The Soulpass Project

I ran into another IE problem creating the Soulpass design. It seems to be a variation of “The IE Doubled Float-Margin Bug“. The problem lied in the footer DIV. For some reason the top margin of the footer was always exactly twice what it is supposed to be. Both the top and bottom margins of the footer are supposed to be 20 pixels, but in Internet Explorer the top margin was doubling to 40 pixels. Grrrr, frustration. I searched the net for answers, and came up with the above-mentioned article. It seemed to be very close to the problem that I was having, but not exactly. The margin effect in the Soulpass template footer is creating by adding 20 pixels of padding to the top and bottom of the P tag, forcing the #footer DIV to be taller. The solution in the article mentions adding {display: inline;} on the float, but my #footer DIV is not floated. The solution that worked for me was adding an absolute width to the #footer DIV. Since the page is set to be 760 pixels and I wanted the footer to match, I gave the #footer DIV a width of 760 pixels and *voila* … IE began to cooperate. Yay!! I hope this helps someone else as well!

This entry was posted on Tuesday, February 22nd, 2005 at 4:22 pm and is filed under CSS, Soulpass. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.