scrathcyboy
asked on
TD line-height not working in IE6
MS says IE 6 supports line-height CSS (all the way back to version 5) -- but this --
TD { border:1px solid gray; padding-left:7px; line-height: 0.25in; }
does NOT work in IE 6 -- it does in all other browsers.
I've changed units, sizes, and everything I can think of, makes no difference.
IE 6 ignores whatever I set for line-height.
What is fix?
TD { border:1px solid gray; padding-left:7px; line-height: 0.25in; }
does NOT work in IE 6 -- it does in all other browsers.
I've changed units, sizes, and everything I can think of, makes no difference.
IE 6 ignores whatever I set for line-height.
What is fix?
The first question is how are determining that it isn't working? Things like making the <td> content larger than the line height or having CSS in the <td> that overrides the style sheet.
ASKER
Hi remorina,
Yes, I know it should, but it is not -- I changed to your DOCTYPE and DTD, no difference.
But there is a small "dot" image in front of each line of text.
I had to do that because a bulleted list was giving too many problems to fix by CSS.
Maybe IE6 is incapable of handling a 4 x 6 px dot ?
Yes, I know it should, but it is not -- I changed to your DOCTYPE and DTD, no difference.
But there is a small "dot" image in front of each line of text.
I had to do that because a bulleted list was giving too many problems to fix by CSS.
Maybe IE6 is incapable of handling a 4 x 6 px dot ?
ASKER
dave -- it is staying minimum (default) line height for 3 point Arial, no matter how many PX or IN I use.
ASKER
Yep, I removed the dots and now it is working. What a classic IE 6 gotcha. Ideas how to tame this beast?
ASKER
If no one has knows way to fix that bug, maybe suggest <UL> and <LI> CSS to remove the indent and approximate what I had for the TD --
border:1px solid gray; padding-left:7px; line-height: 0.25in;
Seems I couldn't remove the UL indent either to get it to work right in IE 6 !!
border:1px solid gray; padding-left:7px; line-height: 0.25in;
Seems I couldn't remove the UL indent either to get it to work right in IE 6 !!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ul, ul li {margin:0;padding:0;} will remove the indent for the lists
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks much remorina. I simplified your CSS to this --
UL, UL LI {margin:0;padding:0;}
UL {no-repeat left 9px; line-height: 0.25in; padding-left:20px; }
And it looks fairly good, but lists are so redundant in their font repetition. Have to condense these 50 --
<FONT color="#0000cc" size="2" face="Arial"> specifications into the CSS for the UL or the TD.
I don't like the repetitive code that the UL does. Anyway, enough for tonight, will tackle that in the morning.
UL, UL LI {margin:0;padding:0;}
UL {no-repeat left 9px; line-height: 0.25in; padding-left:20px; }
And it looks fairly good, but lists are so redundant in their font repetition. Have to condense these 50 --
<FONT color="#0000cc" size="2" face="Arial"> specifications into the CSS for the UL or the TD.
I don't like the repetitive code that the UL does. Anyway, enough for tonight, will tackle that in the morning.
ASKER
Got the font sizes converted and all looks OK. Thanks for your help remorina, it is amazing how much one can forget when pushed for time.
OF interest to future readers -- the article you gave was interesting, but implied that if the image matches the font height, then IE6 should give the correct line-height specified in CSS. I tried that, and it does NOT.
IE6 is simply *paralyzed* when a small image is in line with text where the line height is specified. It fails totally to render anything correctly or intelligently. Another reason why MS yuppies should not be writing code for any browsers -- they never bother to test out obvious features, and never correct them over years of version changes --they are simply BAD, myopic coders and even worse code testers!
OF interest to future readers -- the article you gave was interesting, but implied that if the image matches the font height, then IE6 should give the correct line-height specified in CSS. I tried that, and it does NOT.
IE6 is simply *paralyzed* when a small image is in line with text where the line height is specified. It fails totally to render anything correctly or intelligently. Another reason why MS yuppies should not be writing code for any browsers -- they never bother to test out obvious features, and never correct them over years of version changes --they are simply BAD, myopic coders and even worse code testers!
ASKER
Great work remorina, thanks. Check my final comment.
It should work fine, the example code below works well in all browsers including IE6
It could be that the cell lies within a row that has other cells preventing it from applying the line height, for example if you have a row with 2 cells, specify 2 different line height, the one with bigger value will overtake the smaller one and they'd both be the highest value.
Open in new window