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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
remorinaCommented:
ul, ul li {margin:0;padding:0;} will remove the indent for the lists
0
remorinaCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.