Wrapper Div Not A Full Page with Firefox But Looks Right in IE7

Errors inevitably find their way into your files while you’re developing new themes or basically while doing anything with CSS.

Once an error is fixed jot down a note as to how you got the look you were going for and that in itself should help you remember what you did correctly. So, here’s a CSS tip for myself and maybe a few other developers interested in creating WordPress themes.

I was checking out how a border would look around the whole page and this error became obvious. Maybe not an error per se, but the output was not the same between Firefox 2.0 (Fx) and Internet Explorer 7.0 (IE7) so something needed to be fixed.

Problem was that the wrapper div, which should hold everything between the opening and closing body tags, did not extend all the way down the page to envelope the footer in Fx, but it looked as expected in IE7. I could tell there was a difference in output between the two browsers because I used <border: 2px solid #f00;> in the css stylesheet for #wrapper. That should have put a bright red rectangle around the wrapper, and in essence the entire WP page.

Firefox 2.0 didn’t let the #wrapper div enclose the entire page. Notice the red line at the top of the image and the dark grey background for the post.

IE 7 filled the page as expected without the use of a clearing div. Notice the red box around everything and the lighter color to the post.

Divs were properly closed as the XHTML code grabbed from View Source validated ok.

The solution I found was to insert a spacer clearing div just after the end of the footer div. Somehow that forced the #wrapper to go all the way to the bottom of the page in Firefox.

New CSS entry:

.spacer {
clear: both !important;
}

New XHTML entry added at end of footer.php:

<div class="spacer"> </div>

Now, for the time being everything looks identical between Firefox and Internet Explorer 7.