IE6 extra padding on bottom

Question

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;
}

Answer 1

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>

Answer 2

I would highly recommend taking a look at the positioniseverything.net site and its coverage of IE issues and workarounds. Take a look at the holly hack section - I believe you will find the answer there.

[edit - added] take a look here for the 3px issue, explanation and fix

For box settings and browser difference, sitepoints box model article offers some good insight as well.

Answer 3

Have you tried hiding your DIV overflow? overflow:hidden;

Edit: You may also try display: inline; if you're talking about horizontal pushing.

Answer 4

Make sure font size is not creating the problem. Even with no text inside a container element (say for a bottom cap on a stretchable container) IE6 will still size the height of the box no smaller than the font size (even with an explicit height set.)

So, for example, if you have the HTML:

<div class="box">  
  <h1>Heading</h1>  
  <p>This is the main content.</p>  
  <div class="bottom"></div>  
</div>

...you will need this CSS:

<style type="text/css">
  .box {
    background: url(bg-middle.jpg) repeat-y;
  }
  .box h1 {
    background: url(bg-top.jpg) no-repeat;
  }
  .box .bottom {
    background: url(bg-image.jpg) no-repeat;  /* bottom cap image */
    height: 10px;                             /* height of your bg image */
    font-size: 1px;                           /* for IE6 */
  }
</style>

Answer 5

potentially 'margin' or 'border' properties?

Answer 6

You can also look at something like a CSS reset style sheet which will let you set up defaults which should be reasonably consistent across browsers.