Hi and thanks in advance...

Check out this page of my website.


On any browser the two nav menus on top look fine, but in IE 7, they have a ton of margin/padding in between. The menu is are both "ul".

The weird thing is at some point I added a red border to each of the "li" just to figure out if the problem was margin or padding--but when I did the problem disappeared.

(I've removed the border).


3 answers

This was chosen as the best answer

Sounds like a hasLayout issue, try to give the elements layout, starting from the IMG element in the ULs and work your way up in the tree.

I saw something when checking the DOM with developer tools (F12). The IMGs has display explicit set to block, toggling this off seemed to fix it.

Answered almost 8 years ago by anddoutoi

The images inside the links inside each list item in your menu is set to 'display:block' by virtue of being a descendent of the div with the class 'block' assigned. Removing this rule should straighten things out for IE7. This will slightly change your layout in FF, but not to a degree that things look broken. After this change, you can probably adjust padding on the list items to acheive the spacing you're going for.

Answered almost 8 years ago by Dwayne Anderson

Problem solved by removing display: block. Thanks!

Answered almost 8 years ago by Maria De La Guardia