IE7 CSS div margin issue

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 this somewhere, it may help:

CSS Double padding IE7 Fix

"Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser ( cough download Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my navigation menu."

CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
 }

"And the fix…

Just add display: inline-block to the div with double padding. That's it… I know, it's ridiculous."

  #nav {
  clear: left;
  display: inline-block;
  padding: 16px 0 0 30px;
  }

---

Another alternative is the parent of the Div which is not displaying correct add the margin: 0 in CSS for it.

Answer 2

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.