Question

I have the following layout:

https://dustinhendricks.com/breastfest/index.html

In ie7 (or ie8 in Compatibility View mode) whenever I mouse over one of the menus items, the browsers gains a horizontal scrollbar going far out to the right. All that happens when you mouse over one of the menus items is, the menu item gains 2 pixels in height, and it’s top margin becomes -2px, which is why it is so strange that this would cause a seemingly unrelated scrollbar to appear.

I have ever put colored borders around the ul, li, and a tags to see if something got unexpectedly large, but still found nothing out of the ordinary. Any ideas as to why this is happening?

note that the link is for a festival benefiting breast cancer and is suitable for work

Answer 1

Can’t figure out why it is happening but i can tell you that if you set your #main #header ul li a elements to display:inline-block instead of display:block it works fine. Initially thought it is probably an issue attributed to IE’s Negative Margin Bug but that should not be affecting IE8, though it might be due to IE8’s compatibility mode engine…who knows, its IE, whats up its down with and left is right this browser.