hasLayout.net

Diagnosis

Affected browsers:

All versions of Internet Explorer on Windows.

Visual appearance:

Part of the element that is outside the container disappears.

Triggers:

Negative margins on the element and container has layout.

back to top

Overview

The bug is easy to notice. You set some margin on the element to a negative value so it would escape a bit from its container and viola: IE cuts off the part of the element that is outside the container. Let's take look at 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="inner">
		I am cut off<br>
		Text<br>
		More text<br>
	</div>
</div>

CSS Code:

skip to content

#container
{
	margin: 2em auto .5em;
	padding: 2em 0;
	width: 80%; /* width gives layout */
}
	#inner
	{
		margin: -4em 2em 0; /* negative margin is used */
	}

In this demo width: 80% gives the container layout which is one of the trigger requirements. When this demo is viewed in Internet Explorer the top part of #inner, the one that goes out of the #container, will be cut off.

back to top

Solution (CS)

This solution has side effects.

The cleanest way to fix this bug is to remove layout from the container.

The methods to make an element loose layout vary. The idea is to not use any properties that give an element layout. Keep in mind that it is not always possible; for example, when properties that give layout are crucial to the page style or an element has layout by default.

Let's see how we can fix our demo using this method.

First of all, since one of the triggers is container having layout, this is exactly where we should start looking - <div id="container">. A quick scan of the CSS code for the demo reveals that #container has width property, which in turn gives it layout. We need to loose it. How? Since the set width is in percent units (80%), let's try using margins instead. And since we already have auto value for our left and right margins, we will need to make them both equal (10% each).

Here is it, fixed 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="inner">
		I am cut off<br>
		Text<br>
		More text<br>
	</div>
</div>

CSS Code:

skip to content

#container
{
	margin: 2em 10% .5em; /* 10% left and right margins, no width */
	padding: 2em 0;
}
	#inner
	{
		margin: -4em 2em 0; /* negative margin is used */
	}

Fixed version looks the same as original demo, however the bug does not appear anymore.

back to top

Solution (CS) Side Effects

Removing layout from the container causes peek-a-boo bug to appear in IE versions below 7. If you are supporting such versions consider using another solution for this bug.

• back to solution
• back to top

Solution (LS)

This solution uses hasLayout on the element with negative margins itself as well as position: relative as an extra kick that is needed to stabilize the fix.

Here is a fixed version of our demo using this method.

• 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="inner">
		I am cut off<br>
		Text<br>
		More text<br>
	</div>
</div>

CSS Code:

skip to condcom

#container
{
	margin: 2em auto .5em;
	padding: 2em 0;
	width: 80%; /* width gives layout */
}
	#inner
	{
		margin: -4em 2em 0; /* negative margin is used */
	}

Conditional Comments:

skip to content

<!--[if lte IE 7]>
	<style type="text/css">
		#inner
			{
				zoom: 1;
				position: relative;
			}
	</style>
<![endif]-->

Everything is pretty straight forward. Giving #inner layout makes the part that is outside #container appear. And position: relative is what helps prevent the disappearing background bug.

back to top

Recommended Reading

• skip list
• CSS: margin property
• CSS: position property
• IE Conditional Comments

back to top

Comments

• Erich Stauffer

  Sat Jul 26 11:40:17 2008

  Thanks! That really helped me out!

• Judy

  Tue Jul 29 17:40:19 2008

  Thank you, thank you, thank you! The conditional comments worked wonderfully. Appreciate your work and expertise!

• bogdan876

  Tue Aug 19 08:36:44 2008

  Thanks! I found out that (at least to paragraphs) only with "position:relative" the problem is solved.

• Joel Starnes

  Wed Sep 10 08:34:00 2008

  Thanks for the article. I also found out that applying a filter such as 'filter:alpha(opacity=80);' to the containing element will trigger the same effect of cutting off the overflowing content. (This was in IE7).

• Rollo

  Mon Sep 15 09:24:48 2008

  Thanks. Helpful background and worked beautifully.

• Stephen_Bigelis

  Sat Feb 21 12:31:33 2009

  So I am going to post this one here for the archive, I found your solution on Google and it took me some fix my particular issue so I figure it might help someone else. I am using a inline ul for my menu that I wanted custom bullets to appear on hover. (I also didn't want to to use "img" tags for these bullets.) Instead I applied them as background images to the hover state of my "a". I used a negative margin = positive padding on the hover states to get the background image to appear. This work perfectly on everything but IE, which for some reason would ignore both the negative margin and the padding when they equaled one another (The background image would appear behind my link text instead of to the left.) Interestingly enough, if it was just one pixel different it obeyed, but then cut off part of the background image due to haslayout. When I applied the conditional IE fix (LS) it would display properly but it would ignore the negative margin and push the rest of the list over when the background image appeared. Anyhow, I had to drop the position:relative in this case, but keep the zoom:1 on the IE conditional. Now it works-go figure. Thanks for your work on this very annoying bug.

• TOM

  Tue May 5 00:23:20 2009

  WHY IS I.E. ALWAYS OUT OF STEP? IT'S ANOYING. WHAT ARE THEY? RETARDS?, EACH AND EVERY HACK ON CSS IS AIMED TO FIX I.E. SHORTCOMINGS.

• Liezl

  Thu Jun 4 10:33:04 2009

  This works brilliantly and saved me so much heartache - thank you!

• katBo

  Thu Jun 4 22:44:54 2009

  Agree with Liezl. A life saver. Will go donate now. Thanks!

Feel free to post your comment. Only Comment field is required. Your e-mail will not be shown; specify it if you wish to be contacted.

Your comment

Your name:

Your e-mail:

Comment (required):

back to top

Donate

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Advocacy

skip to copyright notice

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

back to top