Which IE6/IE7 bug is causing this problem?

Get Started
1

I was creating this simple header menu for my website when I ran into an problem I just can’t seem to nail down. As you can see in the image and sample pages below, the padding for my <li> elements is greatly exaggerated in IE6 and IE7 - but only when other content exists below it.

You can see this in action here, first without any additional text - it displays fine in IE6/7. If you add anything below that, the bottom padding of the highlighted <li> suddenly becomes much larger, as seen in [URL=“http://www.gtplanet.net/misc/template2.htm”]this second example.

Does anyone know what IE6 bug is causing this, or how I can fix it?

2

Never mind, I fixed it! Although I’m still not sure why this was occurring, I was applying the border for the highlighted tab to the containing <li>. By moving the border directly onto the <a>, IE6/7 no longer had this issue.

3

Off the top of my head I’d say the cause of the problem was the height of the <li>.

It may have had a height set, or padding on the bottom.

It’s also possible the <li> was extending to the height of the <ul>, so it could have been a height/padding/margin issue on that.