Diagnosis
- Affected browsers:
- All versions of Internet Explorer below version 7.
- Visual appearance:
- Element is wider than the specified width.
- Triggers:
- No special triggers, broken box model in IE version below 7.
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.
back to top<div id="container">
123456789101234567891012345678910111213141516171819202122232425262728293031323334353637383940123456789101112131415
</div>#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 contribute.
This solution has side effects.
Here is our original demo with the fix applied to it:
<div id="container">
123456789101234567891012345678910111213141516171819202122232425262728293031323334353637383940123456789101112131415
</div>#container
{
width: 10em;
margin: 1em 0;
}<!--[if lt IE 7]>
<style type="text/css">
#container
{
word-wrap: break-word;
}
</style>
<![endif]-->This solution is less harmful as opposed to Solution 2 (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.
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.
<div id="container">
<div id="inner">
Try to spot it!
</div>
</div>#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 ).
This solution has side effects.
All affected browsers.
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:
<div id="container">
<div id="inner">
Try to spot it!
</div>
</div>#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.
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 contribute. You may also want to use conditional comments to pass this solution to Internet Explorer only.
overflow property
width property
overflow-x property
word-wrap property
Use what is right for you: "Browse Happy - Online. Worry Free. Switch today!"
Don't use it unless you understand it. Please take some time to read these articles: