Mystery Padding Issue In IE7 & FF

2 Pixels That Just Won't Die...

[ChainsawXIV]

I have a chunk of HTML which will be embedded in another page (which uses an XHTML Transitional DTD). This doesn't render quite like I was expecting. I'm hoping someone can shed some light on just what's going wrong here, and how I can fix or work around it.

<div style="font-family:arial;font-size:8pt;width:350px;line-height:normal;">

<div style="background-color:#404040;color:#FFFFFF;padding:2px 5px 0px 5px;height:30px;-moz-box-sizing:border-box;box-sizing:border-box;">
<div style="font-weight:bold;float:left;background-color:#FFFF00;">Block Title Here</div>
<div style="font-weight:bold;float:right;">Detail Information</div>
<br />
<div style="float:left;font-size:7pt;background-color:#00FFFF;">Block Subtitle</div>
<div style="float:right;font-size:7pt;">Value</div>
</div>

</div>

The main <div> here is set to have no bottom padding, but as you'll see if you drop this into a browser, it's getting one anyway - 2px for FireFox, 4px for IE7.

Honestly, if I could get them the same I could live with it. 2px is what I actualy want there, when all is said and done. But I'd really love to understand just what the heck is happening here, and how to control it.

[edited by: ChainsawXIV at 7:06 am (utc) on April 7, 2009]

[ChainsawXIV]

This is what I get for working while tired. I woke up this morning and immediately saw the problem: I'm telling the page to treat padding quirks style (-moz-box-sizing:border-box;box-sizing:border-box;) and IE is ignoring it.