IE6 extra padding on bottom

css, internet-explorer-6

Solution

Is there an image in your div? If there's an image, there's a bug in IE 6 that can cause white space within the div to create extra padding on the bottom

Extra padding shows up with

<div>
<img src="myimage.jpg">
</div>

Extra padding doesn't show up when you change your HTML to

<div><img src="myimage.jpg"></div>

Problem

I have a div tag styled through CSS. I set the padding to 10px (padding:10px), it works just as I wanted in Firefox and IE7, but in IE6 it adds additional padding at the bottom (about 2-3px I think). Anyone has idea about what's happening here? [update] I just noticed this, the div tag I'm talking about has a background-image. When I removed the background-image, the extra padding on the bottom disappears. Any ideas? [another update, code sample] Here's the CSS applied to my div tag: ``` .user-info{ margin-top: 20px; margin-right: 20px; padding: 10px; background-image: url("../img/user_panel_bg.png"); float:right; border: 1px #AAAAAA solid; font-size:12px; } ```

Original source