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;
}
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.
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.
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.
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 .
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>
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.
Have you tried hiding your DIV
overflow? overflow:hidden;
Edit: You may also try display: inline;
if you're talking about horizontal pushing.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With