Hi,
I have created a site with CSS layout and it appears fine in IE7 and latest firefox but not in IE6.
the navigation menu that runs horizontally at the top comes out vertical in IE6… one on top of the other, instead of side by side…
HTML:
<div id=“navBar”>
<ul>
<li><a href=“contactUs.html”>Contact Us</a></li>
<li><a href=“links.html”>Links</a></li>
<li><a href=“ccc.html”>Automotive</a></li>
<li><a href=“ccc.html”>Pattern</a></li>
<li><a href=“ccc.html”>Security</a></li>
<li><a href=“ccc.html”>Solar</a></li>
<li><a href=“ccc.html”>About Us</a></li>
<li><a href=“ccc.html”>Home</a></li>
</ul>
</div>
CSS:
#navBar {
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
height: 32px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
#navBar ul {
padding: 0px;
list-style: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1px;
margin-left: 0px;
}
#navBar li {
margin-top: 0px;
margin-left: 1px;
margin-bottom: 0px;
float: right;
display: block;
margin-right: 0px;
}
#navBar li a {
color: #FFFFFF;
text-decoration: none;
line-height: 30px;
background-image: url(images/10.png);
background-repeat: repeat-x;
background-position: bottom;
height: 32px;
display: block;
padding-right: 21px;
padding-left: 21px;
}
#navBar li a:hover {
color: #FFFFFF;
text-decoration: none;
line-height: 30px;
background-image: url(images/12.png);
background-repeat: repeat-x;
background-position: bottom;
height: 32px;
display: block;
}