Css – IE6 extra padding on bottom

cssinternet-explorer-6

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

Best Answer

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>

Related Solutions

Css – multilevel vertical unorder list menu

It looks like the above example may be a 3 levels menu - which isn't much harder than the 2 level menu you already have once you get it working.

My suggestion is build the whole thing so you have one massive expanded menu, rather than only putting in the li's and ul's appropriate to whatever section they are currently in, then do something like this:

ul ul {
display: none;
}

ul li.lit ul {
display: block;
}

Then give whatever menu item they happen to be in (on the li) the class of .lit and it will only show that menu as open. It's much easier than generating a custom menu for each and every page.

Css – Problem with iframe and IE6 and IE7 causing extra bottom padding

try setting the following CSS and see if it helps:

iframe { 
    margin: 0;
    padding: 0;
    padding: 4px;
    border: 1px solid #d5d5d5;
}

.clear { 
    clear: both;
}

Best Answer

Related Solutions

Css – multilevel vertical unorder list menu

Css – Problem with iframe and IE6 and IE7 causing extra bottom padding

Related Topic