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 10 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 10 years ago by Dwayne Anderson

Problem solved by removing display: block. Thanks!

Answered almost 10 years ago by Maria De La Guardia