Question

I have a minor CSS problem, but I’m having trouble fixing it because I don’t have any computer handy with IE7 installed…

In IE8, Chrome, FF, etc. I see this (correctly):

but IE7 gives me this:

the HTML code follows:

<div id="hub">
    <div class="title highlight">Faster, Cheaper, Better</div>
    <p>PNMS...

the relevant CSS code follows:

#hub {} /* literally nothing */

#hub div.title {
    font-size: 4em;
    font-style: italic;
    font-variant: small-caps;
    float: left;
    margin: 5px 0px 20px 0px;
    width: 940px; /* same as parent container */
}

.highlight { color: #ff6633;}

p {
    text-indent: 30px;
    font-size: 1.3em;
    line-height: 1.1em;
    letter-spacing: 1px;
    margin: 5px;
}

Based on visitor traffic, I need my site to be compatible with IE7 (thankfully NOT IE6). But again, guessing blindly and then running browsershots.org is not a very efficient manner.

Can someone help? Thank you.

Answer 1

Found it. The CSS body tag had a line-height: 18px;

For some reason known only to Microsoft, out of IE7, IE8, IE9, Firefox 3.5~6, and Chrome, only IE7 honored that instruction for a deeply nested div 400 lines further down the CSS sheet.