Internet Explorer Ignores Bottom Margin
April 11th, 2007 by Jonathan KempWell, I noticed something strange today that I had not noticed before. Internet Explorer ignores the bottom margin I had set when it is the last item on the page. I had the same problem in IE 6 and 7, but not in Firefox or Safari.
To elaborate, I set a bottom margin on the last element on the page. IE ignored it and displayed the element flush with the bottom of the browser instead of showing a margin. When I added another item below it, it showed the margin, so it has something to do with being the last item on the page. This only happened in IE 6 and 7.
Solutions I thought of included setting a transparent border, increasing the height of the footer and setting padding on the body. The transparent border didn’t work in Firefox or IE. Increasing the height of the footer wouldn’t work because there was a bottom aligned background that needed to appear at a certain height. I felt that setting padding for the body was also not a good practice.
I tried everything I could think of to get around it. I ended up adding an empty div below the element and setting the height to what I wanted the margin to be. This worked. It was the best solution because all of the other things I could think of wouldn’t work because of the design constraints.
Related Posts:
- Revised CSS Flyout Menus
- IE6 3 Pixel Float Bug
- Layout Fix for Internet Explorer
- Simulating Position Fixed in IE
- Browser Version Market Share for September 2007
April 29th, 2007 at 5:07 am
Hey Jonathan. I was just searching when I happened to find your entry on down the list or results. I just ended up adding a padding (margin would do too) on the body. This worked for me as I have a div#container inside my body-tag which surround the #header, #content, and #footer sections of the page. So yeah–I hope this helps as another solution.
May 17th, 2007 at 10:37 am
Try just using padding instead of margin on that one element.