| « 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
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...
8 comments
It worked with me.
#blockdiv {
clear:none;
display:table;
overflow:hidden;
height:188px;
width: 147px;
}
For me, I had to put a div with height and width to 100% in the first div for this to work.
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
This post has 1 feedback awaiting moderation...