IE7 Display Bug, Magic Padding/Margin that should not exist

Question

Preface: Sorry if this question should have been posted on a sister-site. There's so many now it's hard to tell what still falls under SO's jurisdiction.

Problem: I'm having a problem with consecutive <div> elements. Sometimes there's a magic padding/margin between them and I cannot figure out why.

IE7 Magic Padding Bug http://img689.imageshack.us/img689/6239/ie7bug.png

As you can see there's a space between my container's header div and the body div. Let me explain how my DOM/CSS is set up:

HTML

<div class="Product-IconView">
  <div class="PIV_TopCap"></div>
  <div class="PIV_Body">
      ...
  </div>
</div>

A simple container/child div setup, nothing fancy.

CSS

Top Cap:

.PIV_TopCap
{
    margin: 0px;
    padding: 0px;
    height: 10px;

    line-height: 1px; /* For IE so the text doesn't make the div higher */
    overflow: hidden;

    background-repeat: no-repeat;
    background-image: url(/Images/Controls/IconView/PIV-Regular-Top.png);
}

Body:

.PIV_Body
{
    height: 266px;

    padding-left: 10px;
    padding-right: 10px;

    background-repeat: repeat-y;
    background-image: url(/Images/Controls/IconView/PIV-Regular-Body.png);
}

As you can see, pretty simple CSS too, nothing overly fancy. Inside the body is another series of <div> items following the same principle as this div (container div, stacked children). That do not exhibit strange padding like this.

I've used the developer tooling in IE9 (with IE7 standards enabled) to inspect the DOM and see what might be causing this (like a margin pushing up through the top or something)

As you can see here:

Body Highlighted http://img844.imageshack.us/img844/3448/ie7bug01.png Top Highlighted http://img192.imageshack.us/img192/46/ie7bug02.png

The bounds of the divs are intact and correct.

Conclusion This is a very strange bug, I saw it in an earlier design of mine and wasn't able to figure it out there either. It's really the only IE7 migration issue I've encountered with this project so far. To the best of my knowledge I'm following HTML Standards really close (I know IE tends not to respect them in some cases, but the plan is to do this as right as I can).

Questions for you:

• What should I look for that might cause this?
• Am I doing something wrong? If so, how can I fix it?
• Is there a simpler / better way of going about this?
• Is there something obvious I am missing?

Also

If you need clarifications or more information please feel free to leave them in the comments, I will answer them when I see them. (Posting this kinda late on a friday :o).

Answer 1

Found the answer so I will post it here for anyone that lands here looking for help with IE7.

The problem was the font-size of the top div. While I had line-height: 1px; set, the rendering engine still allocated 14px for the 12px font, this invisible allocation/padding/margin/whatever bleeds out through the div even with overflow: hidden or strict size constraints.

Simply making sure both these lines were in my top div (smaller than a line of text):

font-size: 1px; line-height: 1px;

...will fix the issue.

It seems IE7 does not obey line-height very well.