CSS: Fixing overflow: hidden in IE

« Looking for a new hosting company?

Apple Mighty Mouse goes wireless... but how far away? »

CSS: Fixing overflow: hidden in IE

08/14/06

CSS: Fixing overflow: hidden in IE

04:32:19 pm, by Francois PLANQUE

, Categories: XHTML/CSS

Internet Explorer 6 for windows has been giving me a hard time with expanding fixed width or fixed height boxes (divs) in the most non standard fashion...

The trick would be to apply overflow: hidden to the div to force the browser to hide any excessive content (text, images) instead of expanding the container. But IE6 will not always do as told...

I found out today that the trick with IE, is to apply a fixed width or height property to the same container (div) as the overflow property, and then, IE will always crop the contents as expected.

Note: you can specify widths and heights in ex, em or % (not just px). So it's only "fixed" in a relative manner.

PS: In some cases, you may want to consider the non standard IE CSS property word-wrap: break-word; This will break words too long to fit into the fixed width. IE only and non standard...

Tags: css, msie, tip

Permalink 8 comments »

8 comments

Comment from: Zoffix Znet [Visitor]

· http://zoffix.com

The issue is caused by hasLayout, read my article on http://zoffix.com/css/ie/haslayout.shtml

12/26/06 @ 08:57

Comment from: dario [Visitor]

· http://darioferrari.blogspot.com

Try to set only height (or width): 100%;
It worked with me.

08/16/07 @ 16:03

Comment from: Isaac Grover [Visitor]

· http://www.qcs-rf.com

Thanks to dario for the width: 100% tip. Worked like a charm for me too.

09/10/07 @ 05:16

Comment from: fe kaylius [Visitor]

· http://0009.org

you rock, i like the hacks, so i used the word-wrap method, perfecto!

10/25/07 @ 22:44

Comment from: Ben Dappen [Visitor] · http://carbonprinciples.com

Setting overflow:hidden and height:100% fixed the problem beautifully. One would think that without a set height, the parent would automatically fit the content instead of presuming height:0... I'll be glad when IE6 usage is low enough that I can start ignoring it.

03/14/08 @ 16:23

Comment from: Simon [Visitor] · http://www.flasharcadegamessite.com

This doesn't seem to work for me, tried the height and width at 100% and its still not playing, if you click on any of the top categories in ie6 you see what I mean. Or maybe I'm doing something wrong.

#blockdiv {
clear:none;
display:table;
overflow:hidden;
height:188px;
width: 147px;
}

04/09/08 @ 11:09

Comment from: Romain [Visitor] · http://www.rcprog.com

Thank you for this nice tip ;-)

For me, I had to put a div with height and width to 100% in the first div for this to work.

04/10/08 @ 10:24

Comment from: Neil Pharazyn [Visitor]

· http://www.newsknife.com

I ran the following using IE6. The code version I run contains a couple of pages of content. It displays and prints the lot despite your suggested height: 100% and overflow:hidden;

I only want to see\print half a page of content. What do I add\change to achieve that?

#wrapper {
height: 100% /* again, fill in value needed */
overflow:hidden;
border: 3px solid; /* this is just for debugging, to see if the
browser actually does something sane */
}

....a couple of pages of content

04/11/08 @ 07:10

This post has 1 feedback awaiting moderation...

Comment feed for this post