Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE6 extra padding on bottom

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;
}
like image 622
codegy Avatar asked Dec 12 '08 03:12

codegy


People also ask

Why is there extra space at the bottom of my div?

If you try to put an image inside a <div> element that has borders, you will see an extra white space (around 3px) at the bottom of image. It happens because image is an inline-level element so browser adds some whitespace under the baseline to adjust other inline elements.

How do I add more space to the bottom of my website?

Using <br> Tag to Create Space in Text or Line Inserting an extra space beneath text or line is pretty easy, it can be achieved using <br> HTML tag. This tag can break any text and create extra space, check out the examples below. BR tag Output: Check out the br tag example below.

How do you stop padding from increasing width?

To avoid the width or height getting increased or decreased when using CSS properties like margin , padding , etc, we can use the CSS property called box-sizing and set its value to border-box on the element in CSS.

How do I get rid of top padding in HTML?

Adjusting the Margin Size of an HTML Element With CSS You can remove this margin by setting the top and left margin to zero. Like the padding and border, the sizes of specific sides of the margin can be set using margin-left , margin-right , margin-top , and margin-bottom .


4 Answers

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>
like image 134
Kibbee Avatar answered Oct 24 '22 09:10

Kibbee


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.

like image 39
jimg Avatar answered Oct 24 '22 08:10

jimg


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

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

like image 24
Philip Arthur Moore Avatar answered Oct 24 '22 07:10

Philip Arthur Moore


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>
like image 1
Neil Monroe Avatar answered Oct 24 '22 09:10

Neil Monroe