CSS line height in IE help !

[Lobo]

I am looking for a simple hack for css line height in a <li> list .. it works fine in FF with no need to declare a height but over stretches the box when in IE..

How can I force IE to behave itself ?

[tedster]

I'm not sure that line-height is the problem. Have you tred setting specific margins for <li>?

[Lobo]

nope .. although adjusting line height has the desired effect.. except 1.3 ems in FF is 1.4+ in IE

How would you suggest I use margin ?

[tedster]

Set top and bottom margin rules for <li> with a set number of pixels, and tweak the number until you see the result you want in both browsers. You may also want a line-height rule in their, too, depending on the exact rendering effect you are after.

[Lobo]

Just gave that a go and the same results -2px on the bottom margin makes the <li> fit in the box in IE but squashes the list in FF, I'm sure I need some sort of If IE statement .. ?

[tedster]

maybe - check it out: [msdn.microsoft.com...]

[SuzyUK]

or maybe check out the "whitespace in lists" IE bug if you're looking at a 3/4px+ differnce.. there are 2 bugs one produces a space of about 3/4px (depends on font or font-size) the other produces a complete line extra (about 18px). Line height does help one of them but floating the list elements if possible is *usually* the best fix to avoid any hacks. more details of the "gap" would be beneficial

[SuzyUK]

just reread, when I say "gap" I also mean "overlap" it works both ways

are you trying to set a fixed height on the <li> elements, and if so what version(s) of IE?

IE6 and below has an expanding box problem where it expands elements both widthways and heightways, overriding your explicit width/height values, so if your height is more than you expect, it could be that the required/default line-height is more than you've specified.. the "required" line-height is dependant on the font being used and is usually about 4-6px more than the font size

if you're trying to restrict the height to be less than is required for default reasons then conditional comments would be one way to fix it, as IE7 shouldn't have the problem