hasLayout.net

Affected Versions

This bug affects: IE6

Symptoms

Element is wider than the specified width.

Date of the Tutorial

Fri Jul 17 03:52:44 2009

Description

Say you have an element with a long line of text with no spaces in it. That element has set width and text overflows from that element in anything sane but IE; instead, it expands the element to contain overflowing content. It doesn't even have to be long text, you may just set a slightly higher width for some descendant making it overflow and you wouldn't even notice that.

This bug can be hard to identify, just remember to try this fix if your element is wider in IE than it is supposed to be. An example of this bug is presented in the following demo.

Demo 1: Long String

HTML Code:

<div id="container">
    12345678910123456789101234567891011121314
</div>

CSS Code:

#container {
    width: 10em;
    margin: 1em 0;
}

This first demo shows Expanding Width Bug caused by a very long string without any spaces. It's very easy to see what is going on in IE version below 7. The #container is expanded to accommodate the entire string, whereas in any sane browsers and IE version 7 the container is only as wide as specified ( 10em ). There actually two known to me fixes for this issue. I may note that none of them produce the exact same rendering as in standards compliant browsers, if you know of such a fix please let me know.

Demo 2: Overflowing Descendant

HTML Code:

<div id="container">
    <div id="inner">
        Try to spot it!
    </div>
</div>

CSS Code:

#container {
    width: 10em;
    margin: 1em 0;

    /* styling info - not normally included in demo 
    code but is shown here to demonstrate a very common, real-life example */
    background: #ddd;
    color: #000;
    border: 3px solid #000;
}
    #inner {
        width: 300%; /* excessive width will cause overflow */
    }

As opposed to the first demo, this one demonstrates a pretty common real life example. You have some element ( #inner ) that you have put into another element with set width ( #container ). You had no idea what you were doing, were drunk, sleepy, whatever the case may be you ended up having the descendant ( #inner ) width to be more than the one of the ancestor ( #container ). Perhaps your padding and width add up to a larger value (read up on box model if that is not what you expected to happen). If you take a look at the demo, no obvious problems in sane browsers, even IE7 is fine. You take a look in IE 6 and below - whoa! Triple width bug?

What actually happens is, due to excessive width, #inner overflows out of the #container. The effect is not visible in sane browsers because there is no background or border on the #inner; however, affected browsers simply contain the entire #inner (i.e. include overflow ) inside the parent element ( #container ).

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution) - with Side Effects

Date of the Solution

Fri Jul 17 09:49:19 2009

Fixed Versions

all of the affected

Description

This solution applies to both long string and overflowing descendant demos. However, I would like to point out that for overflowing descendant case you should find and fix the cause of overflow since it is often caused by mistake in width or padding calculations.

Fight fire with fire! Bug is caused by overflow, so why not use overflow property to fix it; in particular, we are going to use overflow: hidden.

Here is it, fixed demo:

HTML Code:

<div id="container">
    <div id="inner">
        Try to spot it!
    </div>
</div>

CSS Code:

#container {
    width: 10em;
    margin: 1em 0;
    overflow: hidden;

    /* styling info - not normally included in demo 
    code but is shown here to demonstrate a very common, real-life example */
    background: #ddd;
    color: #000;
    border: 3px solid #000;
}
    #inner {
        width: 300%; /* excessive width will cause overflow */
    }

In real life application I would have fixed the width of #inner to prevent overflow in the first place. I have used overflow: hidden only for demostrational purposes. I would also like to note that CSS3 overflow-x property will fix the bug as well, since it is supported by Internet Explorer.

Solution code is pretty self-explanatory. I've used overflow: hidden to hide the overflow. Not much more to say about it.

Solution (CS) Side Effects

Sadly, this solution will hide the overflow which may be not what you want in some cases. There are no fixes known to me that would make affected browsers behave exactly as standards compliant ones; if you know of such solution, please contact me. You may also want to use conditional comments to pass this solution to Internet Explorer only.

Solution (Future Clean Solution) - with Side Effects

Date of the Solution

Fri Jul 17 09:39:13 2009

Fixed Versions

all of the affected

Description

This fix applies only to the "Long String" demo. Here is our original demo with the fix applied to it:

HTML Code:

<div id="container">
    12345678910123456789101234567891011121314
</div>

CSS Code:

#container {
    width: 10em;
    margin: 1em 0;
}

Conditional Comments:

<!--[if lt IE 7]>
    <style type="text/css">
        #container {
            word-wrap: break-word;
        }
    </style>
<![endif]-->

This solution is less harmful as opposed to Solution (CS), in a sense that the overflowing content will still be visible in affected browsers. Solution uses the CSS 3 word-wrap property with break-word value which would break our extra long line without any spaces into several that would fit into specified width ( 10em ). In many cases you would probably want all of the browsers to use this property instead of making your extra long string overflow, however not many support this yet. Surprisingly enough, IE supports it just fine.

Allow me to cite MSDN: This property applies to elements that have layout (MSDN: word-wrap). Even though, I could not prove this fact as a true one, in case word-wrap: break-word is not working for you, make sure your element has layout.

Solution 1 (FCS) Side Effects

In fixed browsers overflowing content is broken into several lines, thus expands the height of the element as opposed to standards compliant browsers where the overflowing content will simply overflow out of the element. If you would rather prefer the overflowing text to be hidden in affected browsers, consider using alternative solution.

Comments

Create new comment

• Name:
• E-mail:
• Comment:
• Leave this field without any text:

• biziclop

  Thu Jun 10 06:06:32 2010

  I found a markup solution (with questionable quality) which does not cut off content:
  
  http://textsnip.com/e51975
  
  normal browsers:
  <div style="width:50px; height:200px; overflow:visible;">
  
  ie6:
  <div style="width:50px; height:200px; overflow:hidden;">
  <div style="width:100%; height:100%; position:relative;">
  
  Unfortunately I don't know what other bugs will be triggered by this method.

Donate / Buy My Books

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

Alternatively, purchase my book: