IE8 bug with max-width and overflow

Just a quick documentation of this interesting bug. This only happens in Internet Explorer 8 (but not 7 or 9), which was interesting. If you have an element with long text but it has white-space:nowrap to prevent text wrapping with a max-width and overflow:hidden to clip the overflowed text, then a floated container (which should collapse to the width of the content) will collapse to the width of the text as if it was not set to be clipped. The use of text-overflow:ellipsis has no effect on this.

Here is the text case:

<style>
        #a { float:left; border:1px solid blue; }
        #b { overflow:hidden; max-width:50px; border:1px solid green; white-space:nowrap; }
    </style>
<div id="a">
        <div id="b">here's a really long string</div>
    </div>
Screenshot from IE8

As the screenshot from IE8 shows, the floated container doesn't collapse like it should.

Solution?

In this particular case, I was able to add a max-width to the container so that it only expanded as far as the content contained within would expand.

Published August 03, 2011
Categorized as HTML and CSS
Short URL: http://snook.ca/s/999

Conversation

18 Comments · RSS feed
NICCAI said on August 03, 2011

Do you have the option of moving the max-width to the parent?

Jonathan Snook said on August 03, 2011

That's a good question, Niccai. In my particular case, I needed different max-widths for the inner element and the outer element because I had other things going on in the container. But I imagine putting max-width on just the parent would work fine.

Darcy Clarke said on August 05, 2011

Hopefully IE8 support will drop once IE10 releases. Much like Google, I only see the need to support the latest 2 versions of a browser unless client needs or market dictate otherwise. Nice to see there's still some learning to be had with these older browsers though.

Martijn said on August 11, 2011

A max-width of what?

Theo said on August 16, 2011

Interesting, thanks for pointing this out!

Justice said on August 16, 2011

Cheers pal. I do appreciate the wiritng.

LeRoy Lee said on August 19, 2011

Get familar because as long as win xp exist there will be ie 8. Probably should focus on ie8 bugs the rest of the browsers are advancing so quickly we don't have time to worry about there quirks.

Tresor Paris said on September 04, 2011

That's a good article. Thank you for sharing it with us. Just keep it up!

Tim Soulo said on September 11, 2011

thanks! that's another reason to hate IE8 :)

Ivan said on September 18, 2011

Good olde IE8 :)) , Ivan @ souplantation coupons

Tisha said on October 02, 2011

Great thniikng! That really breaks the mold!

Matt Slavin said on December 01, 2011

Add a width as well to the floated element, if you have the element in a table cell - we found that:

overflow:hidden; max-width:50px; width:50px; ...

stops the table cell from expanding to the width of the hidden content text. This also allows another element to float to the right of the content. It seems to be the word-wrap property that causes IE8 to go a bit funny.
...Mental.

visaal said on December 06, 2011

Hi bad solution

Radu said on February 15, 2012

Hi Jonathan,

I have a similar problem with IE 9 (previous IEs as well I suppose).

I have a table with just two columns, one that should be limited to, say 50px, and the other expand the rest of the table. For white-space normal everything works ok, but I need white-space: nowrap. IE just does not want to obey the max-width property in this case.

Here is the jsfiddle http://jsfiddle.net/yCWjj/2/

Do you have a suggestion?
I would appreciate any feedback.

Thank you

Jonathan Snook said on February 16, 2012

Yea, with tables, you get different behaviour. In fact, I'm surprised that your table is @Radu: rendering okay in all the other browsers. The way I've fixed this in the past is to put the contents in a div and set the overflow on that.

stefan said on March 29, 2012

This was a great find, thank you! I like the sollution I couldn't quite come up with a better one myself as fast :)

Dave said on April 16, 2012

Ran into this bad boy, thanks for the fix and explanation!

Chandima said on January 22, 2013

This solutions is not working for me.. I am using IE 9

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.