CSS Lesson #6: IE Pest Control

CSS Lesson #6

"IE Pest Control"

In this tutorial you will learn how to eradicate a few of the CSS bugs in Internet Explorer. Or at least learn how to live with them. In order to correctly view these, you must use IE.

The Double-Floated Margin: Are you using a float and you want to put a margin on the same side that the float is moved towards? (left margin on left floats or right margin on right floats) Well, IE is going to double that margin just because it likes to annoy you. This can wreak havoc on designs.

<div style="background-color:#406480; width:250px; height:25px; padding:3px; border:1px solid #000;">
<div style="background-color:#FFF; width:100px; margin-left:50px; color:#000; float:left; border:1px solid #000;">
the float
</div>
</div>

float

The Fix: Add "display:inline;" to the float. No, this doesn't make sense, but it works. Technically you can't make a float an inline because floats are automatically block-level elements and that doesn't change. This fix is from positioniseverything.net.

<div style="background-color:#406480; width:250px; height:25px; padding:3px; border:1px solid #000;">
<div style="background-color:#FFF; width:100px; margin-left:50px; color:#000; float:left; display:inline; border:1px solid #000;">
the float
</div>
</div>

float

Text Flow Around Floats: This is a big, big problem, due to IE misinterpreting floats. When you create a float, text is supposed to "flow" around it. You're also supposed to be able to place a width on the element that contains the text if you wish to control it. If you do this in IE, the entire layer will drop below the float, leaving a gap in your design. There is a way around this, fortunately. If there hadn't been, my skin redesign for The Dragon Ball Fanfiction Library would have been impossible. In this example my fanfic flows around the left-floated navigation bar. This creates a wider area for the fanfics once they clear the float.

The Problem: The width is set to 100%, which IE tries to fit into that small space beside the float. It's too large since it's basing its width on the parent element (the gray-blue layer) so this is why it's "squeezed out". In Firefox, Netscape, and Opera the text layer is behind the float while the line boxes with the text inside them are beside. You can understand this better by placing a background color on the text layer.

<div style="background-color:#406480; width:250px; color:#FFF; padding:3px; border:1px solid #000;">
<div style="background-color:#FFF; width:100px; height:25px; color:#000; float:left; border:1px solid #000;">float</div>
<div style="width:100%;>This is the text I want to "flow" around the float. This entire area is going to drop down in IE.</div>
</div>

float

This is the text I want to "flow" around the float. This entire area is going to drop down in IE.

The Fix: Don't put a width on your text layer. This may create a problem with text expanding beyond your design, however. To fix this, use a container with a set width around the float and the other text to "rein" in it. In this example, the containing element is the dark blue layer.

<div style="background-color:#406480; width:250px; color:#FFF; padding:3px; border:1px solid #000;">
<div style="background-color:#FFF; width:100px; height:25px; color:#000; float:left; border:1px solid #000;">float</div>
<div>This is the text I want to "flow" around the float. Now this is fixed thanks to the dark blue container.</div>
</div>

float

This is the text I want to "flow" around the float. Now this is fixed by removing the width.