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?
LVL 44
scrathcyboyAsked:
Who is Participating?
 
remorinaConnect With a Mentor Commented:
Yes this is a known bug for IE6 http://www.brunildo.org/test/IElineheight.html

If you're using this instead of bullets, why don't you create a span and give it a css class, then use this image as background, give the span the line-height, use left padding and position the background respectively, that's the best way in my opinion to replace the default list bullets.

Alternatively giving the image a float:left will fix the problem then you can give a margin top to position it correctly.
0
 
remorinaCommented:
Hi scrathcyboy,
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
        td {border: 1px solid gray; padding-left: 7px; line-height:120px;}
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>
                Test
            </td>
        </tr>
    </table>
</body>
</html>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
scrathcyboyAuthor Commented:
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 ?
0
 
scrathcyboyAuthor Commented:
dave -- it is staying minimum (default) line height for 3 point Arial, no matter how many PX or IN I use.
0
 
scrathcyboyAuthor Commented:
Yep, I removed the dots and now it is working.  What a classic IE 6 gotcha.  Ideas how to tame this beast?
0
 
scrathcyboyAuthor Commented:
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 !!
0
 
remorinaCommented:
ul, ul li {margin:0;padding:0;} will remove the indent for the lists
0
 
remorinaConnect With a Mentor Commented:
try the below and replace the image with your image and adjust the top position of the background in the style
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
    <style type="text/css">
        ul, ul li {margin:0;padding:0;}
        ul li {background:url("http://www.channelwhitsundays.com/whitsundays/images/list_bullet.gif") no-repeat left 9px;border:1px solid gray; padding-left:7px; line-height: 0.25in; padding-left:12px; }
    </style>
</head>
<body>
    <ul>
        <li>test</li>
    </ul>
</body>
</html>

Open in new window

0
 
scrathcyboyAuthor Commented:
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.
0
 
scrathcyboyAuthor Commented:
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!
0
 
scrathcyboyAuthor Commented:
Great work remorina, thanks.  Check my final comment.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.