HTML and CSS Reference
In-Depth Information
us target the right element without any further testing (since the bug only appears when a margin
is applied in the same direction as the float, so it can only be .float-wrapper ):
/* fix doubled float margin bug */
.float-wrapper { display:inline; }
There, that was easy, wasn't it?
Squashing the Three-Pixel Jog
As with the doubled float-margin bug, it's easy to deduce which elements are the likely culprits
with the three-pixel jog. Again, using trial and error, stepping through each likely solution one
by one is the best way to solve the problem. In this case, we'll start with .float-wrapper (as the
outermost float coming in contact with our third column). As luck would have it, applying the
fix to that element (along with the third column) does the trick:
/* fix three pixel jog bug */
.float-wrapper { margin-right:-3px; }
.third-col { height:1%;margin-left:0; }
Two down, one to go.
Repositioning the Navbar
It's a fair assumption (based on what we know of IE's problems with positioning absolute elements
within relative containers) that our navbar is positioned incorrectly because our #header doesn't
have a specified height. Once again, our hunch pays off, and one more line is added to our special
style sheet:
/* fix absolute/relative positioning bug */
#header { height:1%; }
This puts the navbar where it belongs, but for some reason the position of the <h1> title
changes slightly. To get it back in line with Firefox, we just have to add an extra line to our fix:
#header h1 { padding-top: .75em; }
With all three bugs now taken care of, our layout is identical in Firefox and IE (Figure 14-18).
Search WWH ::




Custom Search