Forum Moderators: not2easy
I make navigation with image background, I set height for navigation box which is as same as image background height (64px).I preview it using FF and IE7 and everything OK, but preview it using IE6 the navigation box look longer than it should be.
many thnx
HTML code :
<body>
<div class="box">
<ul id="navi">
<li id="home"><a href="index.html" class="current">Home</a></li>
<li id="product"><a href="product.html">Product</a></li>
<li id="service"><a href="service.html">Service</a></li>
<li id="faq"><a href="FAQ.html">FAQ</a></li>
<li id="contact"><a href="contact.html">Contact</a></li>
</ul>
</div>
</body>
CSS code :
body{
margin-top:0;
}
.box{
margin:0 auto;
width:800px;
height:300px;
border:#666666 solid 1px;
font:20px,Arial;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
ul#navi{
position:relative;
margin:0 auto;
width:750px;
height:64px;
border:red solid 1px;
}
ul#navi li a{
position:absolute;
display:block;
height:64px;
top:0;
text-indent:-9999px;
}
ul#navi li#home a{
left: 0;
width:152px;
background-image:url(home.jpg);
}
ul#navi li#product a{
left: 152px;
width:138px;
background-image:url(product.jpg);
}
ul#navi li#service a{
left: 290px;
width:160px;
background-image:url(service.jpg);
}
ul#navi li#faq a{
left: 450px;
width:130px;
background-image:url(faq.jpg);
}
ul#navi li#contact a{
left: 580px;
width:170px;
background-image:url(contact.jpg);
}
ul#navi li a:hover{
background-position:0 -70px;
}
ul#navi li a.current{
background-position: 0 -136px;
text-indent: -9999px;
}
long story: It is the IE 'whitespace in lists' problem combined with the expanding box (preIE7) .. the list thinks it has natural height because of the whitespace, and the box is expanding vertically to accomodate that height! (so overriding your set 64px)
short story: to solve (and it shouldn't affect anything else because of the use of absolute positioning) tell it to stop displaying vertically, and 'fool' it into being horizontal instead
#navi li {display: inline;}-Suzy
[edited by: SuzyUK at 9:22 pm (utc) on Feb. 4, 2008]
many thnx for the answer
