| « Looking for a new hosting company? | My favorite Firefox extensions » |
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...
44 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
I have found two interesting sources http://fileshunt.com and http://filesfinds.com and would like to give the benefit of my experience to you.
Finally I create a new div with the fixed height and width to enclose the element,
So if you don't want things to change simply use position:relative;
I added the fix mentioned above - position: relative; and now the A tag behaves in IE.
Thank you for that solution!
height: auto is differs from other browsers and IE6.
Good solution Thanks,
overflow:hidden;
In the following code
background-color:#fafafa;
margin:1em 10%;
min-width:60em;
position:absolute;
width:80%;
overflow:hidden;
}
it's a kind of non sense applying height:100% for an element with a fixed height, so it doesn't work for me.
the fixed height and width, without relative positioning didn't work either. Thanks anyway! :)
THANKS! The position relative worked great for me too!.
Adding height: 100%; worked for me
:)
Cheers
position: relative;
to the element worked for me
