CSS Forum

**Tom_M** · 03-22-2007, 02:53 PM

Something is giving me extra top padding in my footer in IE:
http://tmwebworks.com/afd/temp.php

Here is the style for the #footer:

Code:

#footer {
	background: #CCCCCC url(img/footer-bg.jpg) no-repeat top center;
	clear: both;
	padding: 16px;
}

All I have in the footer is a simple paragraph. By default, I have all margin and padding set to 0. All my paragraphs are set to have a bottom margin of 16px. I'm sure this is some sort of IE bug, but I can't seem to find a solution with the resources I've looked at.

**LadynRed** · 03-22-2007, 03:54 PM

Umm.. your padding: 16px will put 16px of padding ON ALL SIDES.
If you set it to - padding: 0 16px; it will make top and bottom 0 and left and right 16.

**Tom_M** · 03-22-2007, 04:47 PM

Yes, I want padding on all four sides. My problem is that IE is adding extra top padding. If you compare the page in IE and FF, FF displays as I want it to, but like I said, IE is adding extra top padding. Almost looks like it is doubling my set padding of 16px.

**CKSF** · 03-23-2007, 01:41 AM

Looks like an IE margin bug. Declare a width for your footer div (width:100%).

HTH,
Carol

**Mitch_40** · 02:04 AM

see next post...

**Mitch_40** · 03-23-2007, 02:03 AM

I think the 16px padding from the above div is causeing you to have extra padding.

Maybe try the code below?

Code:

#footer {
    background: #CCCCCC url(img/footer-bg.jpg) no-repeat top center;
    clear: both;
    padding-top: 0px;
    padding-bottom: 16px;
    padding-right: 16px;
    padding-left: 16px;
}

**chrishirst** · 03-23-2007, 05:22 AM

for testing purposes put a border around the suspect elements so you can see where each one "touches" the other.

Then you will be able to see whether it is margins or padding that is the issue.

**Tom_M** · 03-23-2007, 02:04 PM

Quote:

Originally Posted by chrishirst

for testing purposes put a border around the suspect elements so you can see where each one "touches" the other.

Then you will be able to see whether it is margins or padding that is the issue.

I actually went and installed Firebug... which I should have did long ago. Firebug shows that the footer div is doubling the 16px top padding to 32px. There is nothing else is my css that should be conflicting here. IE is just doubling the top padding for some reason.

**CKSF** · 03-23-2007, 03:12 PM

I test solutions before posting them. Did you try adding a 100% width declaration to your footer div?

HTH,
Carol

**Tom_M** · 03-23-2007, 04:04 PM

Quote:

Originally Posted by CKSF

I test solutions before posting them. Did you try adding a 100% width declaration to your footer div?

HTH,
Carol

Yes I did try that. It screwed up my layout though because I had left and right padding... which made the div wider than 100%. I had to tweak padding and margins in that footer div and the paragraph inside to get it to look right. Thanks for the tip.