I will really appriciate if you can tell me the problem with the
following css. My "content" and "right side" are droping below the
left menu bar.....I am not sure if it is the browser that I am
using..... I ma using IE6
Thanks:
* { padding: 0; margin: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: url('img/banner.gif') top left no-repeat;
/*background: #E7DBD5;*/
}
#navigation {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
/*margin: 0px 0px 5px 0px;*/
margin:0px auto;
background: #FFFFFF
}
#nav{
clear:both;
font-weight:bold;
color:#666;
margin : 0 auto;
margin-left:4px;
float:left;
list-style-type:none;
background:url(navshadow.gif) no-repeat 8px 100% #fff;
padding-bottom:21px;
}
html>body #nav{
margin-left:8px;
background:url(navshadow.gif) no-repeat <strong>4px</strong> 100%
#fff;
}
#nav li{
list-style-type:none;
float:left;
margin:0 0 0 4px;
padding:0 0 0 10px ;
border-bottom:1px solid #999;
background:url(tabgrey.gif) #c0c0c0 top left no-repeat;
}
#nav li a{
color:#666;
background:url(tabgrey.gif) transparent top right no-repeat;
display:block;
padding:0 10px 0 0;
}
#nav li.cur,
#nav li.over,
#nav li:hover
{
background:url(tabblue.gif) #3375b2 top left no-repeat;
border-bottom:1px solid #036;
}
#nav li strong,
ul#nav li.cur a,
ul#nav li.over a,
ul#nav li:hover a
{
display:block;
color:#fff;
padding:0 10px 0 0;
text-decoration:none;
background:url(tabblue.gif) transparent top right no-repeat;
}
.urbangreymenu {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
display: inline;
}
.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(arrowstop.gif) no-repeat 8px 6px; /*last 2
values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of
content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}
.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of
content*/
}
.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}
.urbangreymenu ul li a:visited{
color: black;
}
.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
float: left;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
clear: both;
}
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
