Having wierd IE6 bug

It renders ok, but whenever I mouseover over the menu text jumps left

[Wertigon]

Okay, wonder if anyone can help me with this wierd bug, I have a page set up like this:

<div id="main">
[...]
</div>

<div id="menu">
<h3>Menu</h3>
<ul>
<li><a href="index.html">Main</a></li>
<li><a href="about.html">About</a></li>
<li><a href="artists.html">Artists</a>
<ul>
<li><a href="accessories.html">Eminem</a></li>
<li><a href="aerosmith.html">Aerosmith</a></li>
<li><a href="theark.html">The Ark</a></li>
</ul>
</li>
<li><a href="credits.html">Credits</a></li>
</ul>
</div>

And the CSS:

#main {
float : right;
width : 70%;
padding : 2%;
margin : 2%;
}

#menu {
width : 12%;
padding : 0% 2% 0% 2%;
margin : 2%;
}

#menu ul {
margin-left : 10%;
}

#menu li {
margin : 0%;
padding : 0%;
}

Thing is, this works in IE 5.0, but not in IE 6.0, and I'm using full doctype (HTML 4.01 Strict, and yes, it validates). CSS also validates with no errors. What happens when I run this code is that the menu renders, but as soon as I mouseover above any of the links, the link and the element directly above jumps to the left. I have no idea what's causing this, anyone knows a solution?

Thanks

[MWpro]

I tried your code and could not reproduce the bug.

Do you have anything set in a:hover or something else that you didn't post?

[SethCall]

are you saying that it jumps left, and never goes back?

Ive seen this bug in IE countless times when making web pages. Not sure what thats about... drives me mad though: )

on mouseover, too.

[MsDetta]

Could it be the open li tag with the Artists link? And then there's a closing li tag out of place before the Credits link. HTH!

[rjohara]

Ah, sounds like you have found the old "jumping links bug" a.k.a. the guillotine bug. I spent hours on this. It has been mentioned here in WebmasterWorld before:

[webmasterworld.com...]

And we had a thread on usenet as well which you can find through Google groups [groups.google.com]. Search for "jumping links bug" or "guillotine bug" and you'll find more.

It is one of the most obscure and exasperating bugs I've encountered. You can spend hours and never figure out what the cause is without some clues.... I believe you'll find if you change the % values you are using to some other measure, like em's, it may go away. There isn't any true "fix" that I know of, but I'd be glad to hear otherwise.

[Wertigon]

Hmm, yeah, that sounds like it. Looks like I have some redesigning to do... Oh well. Thanks anyhow. :)

MsDetta: It isn't overly visible since the indentation got FUBAR:ed, but that list item isn't closed off improperly. Rather, the artist link and the list under it is the entire list item.

[SuzyUK]

Hi, it seems this bug is triggered by % paddings on the element that contains the links.

which in this case is:
#menu {
width : 12%;
padding : 0% 2% 0% 2%;
margin : 2%;
}

just by changing the padding on this element only to:
padding: 0 1em 0 1em;

it corrects the "bug"

Suzy

[DrDoc]

Just FYI...

Could it be the open li tag with the Artists link? And then there's a closing li tag out of place before the Credits link.

A nested list is to be placed within the list item it belongs to.

<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz
<ul>
<li>Foo bar</li>
<li>Bar baz</li>
</ul>
</li>
</ul>

[Wertigon]

Thanks for the help, I managed to code around it using the percentages and stuff anyhow (I'm simply not touching the padding). Works just fine. :)