HTML and CSS Reference
In-Depth Information
Getting It Right in Firefox
Remember, we want everything to look “right” in Firefox before we check IE, so there are a few
small things to take care of before we move on. There is some uneven spacing at the top of
each column, and our footer isn't surrounding the text it contains.
After we run through our checklist, the footer jumps out as an easy fix: though the
#footer
element itself is cleared (because of the floated columns above), the floats
within
the footer have
not been cleared. The fix is a simple matter of adding the easy float clearing rules from Chapter 6
to our style sheet and making one small addition to the markup to provide the hook:
<div id="footer" class="clearfix">
Solving the spacing issue in the columns is a matter of logic and observation, with a dash of
experience. Looking at the paragraphs of text, the spacing seems a bit extreme, so our first guess
is that the problem is related to margins on the
p
elements. Lucky for us, declaring
margin:0
for
paragraphs takes care of the issue:
p {
margin:0;
padding:.5em;
}
■
Tip
The trial-and-error process is your friend; follow your instincts, make a change, and see what happens.
You can always undo or go back to your backup code.
After these small tweaks, our layout is looking nice and crisp, except for the margin
between our columns and footer (Figure 14-15).
