why does my navbar fall apart in ie6?

**rumremix** · Apr 21, 2008 01:14

My navbar looks awful in ie6.

Here is the css...

Code:

ul#topnavbar {
position:absolute;
left:45px;
top:98px;
height:31px;
margin:0;
padding:0;
background:url(../images/nav-border-right.gif) no-repeat;
background-position:right;
padding-right:5px;


}


li.topnav {
height:31px;
background:url(../images/nav-divider.gif) no-repeat;
padding-left:2px;
float:left;
margin:0;
list-style:none;
}

a.topnav {
background-image:url(../images/nav-bg1.gif);
padding:8px 14px 0 14px;
text-align:center;
height:23px;
font-family:Segoe UI, Segoe, Arial, Helvetica, sans-serif;
font-size:70%;
text-decoration:none;
display:block;
font-weight:bold;

}

* html a.topnav {
height:31px;
display:inline;

}

a.topnav:link, a.topnav:active, a.topnav:visited {
color:#ffffff;

}

a.topnav:hover {
color:#7ec3ff;

}

li#topnav-left {
background:url(../images/nav-border-left.gif) no-repeat;
padding-left:5px;

}

and the html...

Code:

 <ul id="topnavbar">
<li class="topnav" id="topnav-left"><a class="topnav" href="#">Link</a></li>
<li class="topnav" ><a class="topnav" href="#">Link</a></li>
<li class="topnav" ><a class="topnav" href="#">Link</a></li>
<li class="topnav" ><a class="topnav" href="#">Link</a></li>
<li class="topnav" ><a class="topnav" href="#">Link</a></li>
<li class="topnav" ><a class="topnav" href="#">Link </a></li>
<li class="topnav" ><a class="topnav" href="#">Link</a></li>
<li class="topnav" ><a class="topnav" href="#">Link </a></li>
<li class="topnav" id="topnav-right" ><a class="topnav" href="#">Link</a></li>

</ul>

Only four smallgraphics are needed...
http:www.eyeofjupiter.com/dev/css/nav/nav-images.zip

As you can see I have anchor tags within <li> tags. The <li> tags are displaying to their full specified height. But the <a> tags are not high enough in ie6 and so do not reveal the full height of the background image. Looks awful. I seem to recall seeing how to accommodate ie6 with this type of nav a while ago but can't remember now.

Any suggestions would be very appreciated.

I also have one other question. Is there any way to center this nav within the container it resides while still maintaining font-resize flexibility? To center, I usually use auto margins. But that only works with a specified width. And i can't specify width if i want the nav to be able to expand and contract with changing font size. Is there any way to do this?

Many thanks.