HTML and CSS Reference
In-Depth Information
Figure 14-9.
On top, Safari correctly renders the margin, and then there's IE 6...
Three-Pixel Jog
Next up is an even weirder bug that affects elements adjacent to floats. This one's often difficult
to catch, because its effects are so seemingly minor, and in certain layouts may be easily over-
looked. For some unknown reason, IE 6 adds three pixels to any inline elements next to a float,
even if those elements are contained by a block element. The results range from a simple cos-
metic flaw in the positioning of text (see Figure 14-10 for a before/after view), to complete and
utter chaos with pixel-precise layouts (an extra three pixels is enough to wreak all sorts of havoc).
For our example, let's float a
div
next to another
div
containing some text (we've shortened
the dummy text here; you'll need enough text to extend beyond the bottom of the floated element
to see the effects):
<div id="floated">
floated div
</div>
<div id="notfloated">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
➥
tempor incididunt ut labore et dolore magna aliqua...
</div>
Next, we'll add some basic styles:
#floated {
float:left;
width:300px;
