hasLayout.net

Diagnosis

Affected browsers:

All versions of Internet Explorer below version 7.

Visual appearance:

Element drop below floated element with italized text.

Triggers:

Float and font-style.

Overview

Yet another float bug in IE, in this case no one would suspect that it is caused by the italics in the floated element. Let's take a look at the bug in the demo.

Demo

• skip accessibility navigation
• skip to HTML code
• skip to CSS code
• skip to content

HTML Code:

skip to CSS code

<div id="container">
	<div id="bugger">
		Lorem ipsum dolor sit amet, consectetuer
		adipiscing elit. Suspendisse vel
		velit at ipsum tristique porttitor. Suspendisse
		potenti. Nam non arcu sit amet nulla volutpat
		bibendum. Aenean eget metus. Nulla elit.
		Quisque aliquam luctus diam. Curabitur at
		lectus. In hac habitasse platea dictumst.
		Nam ultrices porttitor dolor. Morbi metus.
		Praesent et nulla at pede elementum consectetuer.
		Donec sapie...
	</div>
	<div id="victim">*cry*</div>
</div>

CSS Code:

skip to content

#container
{
	width: 500px;
	overflow: hidden; /* just containing floats */
}
	#bugger
	{
		float: left;
		width: 300px;
		font-style: italic;
	}
	#victim
	{
		width: 200px;
		height: 200px; /* just to make bug more obvious */
		float: left;
	}

Apparently the extremely advanced IE's rendering engine thinks that italized text needs three extra pixels of space to fit. Nothing new, we are all familiar with the fact that IE likes to expand everything, it's claustrophobic. However, since we have a pretty tight spot in our #container, those extra three pixels cause our second element #victim to drop below the floated one.

Solution (CS)

Nothing special to this solution. All that we are adding is one line of code, overflow: hidden in particular. This does the trick of hiding the excessive space that IE puts in the wrong place. Here is our original demo with the fix applied to it:

• skip accessibility navigation
• skip to HTML code
• skip to CSS code
• skip to content

HTML Code:

skip to CSS code

<div id="container">
	<div id="bugger">
		Lorem ipsum dolor sit amet, consectetuer
		adipiscing elit. Suspendisse vel
		velit at ipsum tristique porttitor. Suspendisse
		potenti. Nam non arcu sit amet nulla volutpat
		bibendum. Aenean eget metus. Nulla elit.
		Quisque aliquam luctus diam. Curabitur at
		lectus. In hac habitasse platea dictumst.
		Nam ultrices porttitor dolor. Morbi metus.
		Praesent et nulla at pede elementum consectetuer.
		Donec sapie...
	</div>
	<div id="victim">*cry*</div>
</div>

CSS Code:

skip to content

#container
{
	width: 500px;
	overflow: hidden; /* just containing floats */
}
	#bugger
	{
		float: left;
		width: 300px;
		font-style: italic;
		overflow: hidden; /* bug fix */
	}
	#victim
	{
		width: 200px;
		height: 200px; /* just to make bug more obvious */
		float: left;
	}

Pretty straight-forward. We are setting overflow: hidden on #bugger, the element with font-style: italic applied, and that causes the bug to be hidden.

Depending on what your situation is like, applying overflow: hidden may not be favorable. If that's your case, you will be interested in the Conditional Comments solution .

Solution (CCS)

This solution uses Conditional Comments to target affected browsers only. We will use negative values for margin property to remove the excessive space.

• skip accessibility navigation
• skip to HTML code
• skip to CSS code
• skip to condcom
• skip to content

HTML Code:

skip to CSS code

<div id="container">
	<div id="bugger">
		Lorem ipsum dolor sit amet, consectetuer
		adipiscing elit. Suspendisse vel
		velit at ipsum tristique porttitor. Suspendisse
		potenti. Nam non arcu sit amet nulla volutpat
		bibendum. Aenean eget metus. Nulla elit.
		Quisque aliquam luctus diam. Curabitur at
		lectus. In hac habitasse platea dictumst.
		Nam ultrices porttitor dolor. Morbi metus.
		Praesent et nulla at pede elementum consectetuer.
		Donec sapie...
	</div>
	<div id="victim">*cry*</div>
</div>

CSS Code:

skip to condcom

#container
{
	width: 500px;
	overflow: hidden; /* just containing floats */
}
	#bugger
	{
		float: left;
		width: 300px;
		font-style: italic;
	}
	#victim
	{
		width: 200px;
		height: 200px; /* just to make bug more obvious */
		float: left;
	}

Conditional Comments:

skip to content

<!--[if lt IE 7]>
	<style type="text/css">
		#bugger { margin-right: -3px; }
	</style>
<![endif]-->

All the code is the same as in our original demo with the exception of condcoms. The conditional match in condcom matches any IE version below 7 which is exactly the versions which Italics Float Bug affects. Recall in the beginning of this tutorial I've mentioned that IE expands the element by three pixels. I have no idea why the magic number three, ask MS developers. The fact being is that is three pixels, same as three pixels in the sibling of this bug, the Three Pixel Gap Bug

Recommended Reading

• skip list
• CSS: margin property
• CSS: float property
• Conditional Comments

Comments

• jesus2099

  Tue Oct 23 06:18:55 2007

  Hi there, Just to say that it seems to be "We are setting overflow: hidden on #bugger" rather than "We are setting overflow: hidden on #victim"…

• Zoffix Znet

  Tue Oct 23 10:20:51 2007

  Thanks! Fixed it. I should reread my tuts more carefully before pushing them online :)

Advocacy

Browsers

Use what is right for you: "Browse Happy - Online. Worry Free. Switch today!"

XHTML

Don't use it unless you understand it. Please take some time to read these articles:

• skip list
• WebDevout - Beware of XHTML
• WebDevout - Validity and well-formedness
• Ian Hickson - Sending XHTML as text/html Considered Harmful

CSS and Internet Explorer

Use Conditional comments