IE6 and Horizonal List Problem

Incorrect width, moves on a:hover

[Seidl]

So I have a horizontal navigation list that displays fine in FF, Safari and IE8 (not tested in other browsers or IE7) but displays incorrectly in IE6. The width on the right is slightly less, and when I hover over one of the links, the entire list moves over to the left. Below is the HTML and CSS. In case any of you should wonder, the different width percentages are optimized according to the number of characters in each <li> and how the list resizes in a liquid layout.

I have searched for a solution to this problem and have not been able to find one. Any help would be greatly appreciated.

<div id="header_navbar">

<ul>

<li style="width:13%;"><a href="/dev">Home</a></li>
<li style="width:21%;"><a href="/dev/furniture">Furniture</a></li>
<li style="width:38%;"><a href="/dev/terms"><nobr>Terms & Shipping</nobr></a></li>
<li style="width:18%;"><a href="/dev/contact">Contact</a></li>
<li style="width:10%;border-right:0;"><a href="/dev/blog" class="end">Blog</a></li>

</ul>

</div>

#header_navbar
{
float: left;
width: 40%;
padding-left: 30%;
font-size: 100%;
clear: both;
}

#header_navbar ul
{
width: 100%;
float: left;
padding: 0;
margin: 0;
list-style-type: none;
text-align: center;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
background-color: #f2f2f2;
}

#header_navbar ul li
{
float: left;
margin: 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

#header_navbar ul li a
{
display: block;
margin: 0;
padding: 8px 0px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}

#header_navbar ul li a.end
{
border-right: 0;
}

#header_navbar ul li a:hover
{
display: block;
padding: 8px 0px;
text-decoration: none;
font-weight: bold;
color: #FEB729;
background-color: #fff;
border-right: 1px solid #ccc;
}

[StoutFiles]

Put in a conditional comment and then edit it to just work for IE 6. Save that as ie6.css.

[Seidl]

Well, yes, I had figured that I would do that once I know how to get it to work in IE6, but therein lies the problem.

[swa66]

Loose the excess baggage in :hover. Only add there what you want to change compared to the normal link. e.g. the color.

It'll also save your from having the inline "border-right:0;"

IE6 is typically bad at math (worse then other browsers).
Given a with (any width), and you calculate a number of percentages that add up to 100%, you might assume it would fit, but there are *always* rounding errors you need to take into account as browsers need to round it to a pixel.

E.g. lets assume a 999px wide part of which you ask 50%:
is the browser going to use 500px ? or 499px ?
500px: add 2 of these side-by-side and it'll be larger than the 999px
499px: add 2 of these side-by-side and there will be a gap of 1px showing through.

That said IE6 really is worse at it than any other browser.

The solution is to not specify the width of all of them: leave at least one of them to take up the "rest of the space", or do it with all of them :)

[Seidl]

Thanks swa66 (sorry for the late reply--finals). I removed the baggage from the :hover and took out the border:0. They were leftovers from tinkering, anyway. This fixed the extra space to the right even with the width specified for the rightmost li, but the ul/div still jumps to the left of the page when hovering over a link.

Any more ideas? Does anyone need a screenshot?

[Seidl]

Hi, I hope there aren't any rules against bumping topics. Can anyone provide help on this? I haven't been able to find solutions.

[Drag_Racer]

Seidl, your the lucky recipient of one of the few IE6 bugs that really has no good solution. Basically whats happening is when you hover on the anchor, it causes a reflow of the page. IE6 then calculates margins incorrectly at this point and basically uses the parent items width as the margin for the element when percentages are used. I know it sounds wierd...

This is found to have no real fix such as setting 'has layout', forcing quicks mode, nesting elements, etc. do not solve the problem. Though you can try and it may be fixed in your case.

Try putting a span tag around the anchors.
Set a specific height to each anchor.
Use positioning instead of floats.
Use the 'Zoom-Fix' to set the 'hasLayout' property.
Don't use percentages.

or ! use javascript instead of :hover class.

[Seidl]

Drag_Racer, I am thrilled that I've got such luck! Thanks for the possible solutions. I will try them in the next couple of days and let you know how it worked out for me.