IE7 and IE6 are giving trouble with navigation using an unordered list (extra spacing etc.)

Question

Hey guys! I feel like I have gotten a good grasp on IE6 and 7 recently, but today I was working on a site and I just seem unable to fix this problem.

http://arboroaks.bythepixel.com/tyrone/

Check it out in Firefox and Chrome and IE8. All looks good! But then, go into IE7 and some extra padding gets added, as well as the links have to be clicked on the text for it to work.

Then open in IE6 for even more problems.

If anyone has some pointers that would be great; I'm pulling my hairs out here!

** Update ** I think it has to do with there only being a "line-height: 1.4em;" on the a. No set height for the a.

ps. I know people will say FU IE6; no one develops for that anymore...but unfortunately my clients want it to work for that 10% of users.

Answer 1

Unfortunately I don't have IE7 to test, but have you tried to play with the padding and margin attributes of the li element?

I usually reset the styles of all element's padding margins spacings etc... to 0, and add some style rules that a need

Answer 2

Sounds like you are experiencing the IE double padding bug. Try setting each submenu element to display: inline-block.