Internet Explorer Ignores Bottom Margin

Well, 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.