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…
Comments from long ago:
Comment from: Zoffix Znet
The issue is caused by hasLayout, read my article on http://zoffix.com/css/ie/haslayout.shtml
2006-12-26 08-57
Comment from: dario
Try to set only height (or width): 100%; It worked with me.
2007-08-16 16-03
Comment from: Isaac Grover
Thanks to dario for the width: 100% tip. Worked like a charm for me too.
2007-09-10 05-16
Comment from: fe kaylius
you rock, i like the hacks, so i used the word-wrap method, perfecto!
2007-10-25 22-44
Comment from: Ben Dappen
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.
2008-03-14 16-23
Comment from: Simon
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; }
2008-04-09 11-09
Comment from: Romain
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.
2008-04-10 10-24
Comment from: Neil Pharazyn
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
2008-04-11 07-10
Comment from: Acronyms
Neil, You need to add “;” to height: 100%
2008-04-22 10-14
Comment from: Natasha
nice 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.
2008-05-16 15-53
Comment from: Clotho
The fixed height solution works for me, but fixing width does not help. Other solution does not help too.
Finally I create a new div with the fixed height and width to enclose the element,
2008-05-19 11-11
Comment from: Rajiv
Overflow solutions behaves differently in the sub-version of the IE6. There may not be a generic solution to this.
2008-07-17 19-10
Comment from: Drewe
I managed to fix this by setting a postion property.
So if you don’t want things to change simply use position:relative;
2009-03-02 05-10
Comment from: Leslie R
I’ve been struggling with only showing part of a large image in an A tag. IE would show the entire image, setting overflow did nothing even though my width was set. Overflow did work when set on the parent LI, but this would then hide my flyout menus.
I added the fix mentioned above - position: relative; and now the A tag behaves in IE.
Thank you for that solution!
2009-05-27 17-45
Comment from: Kelly
Thank you so much for posting the solution to this IE6 bug. I’m working on a deadline and your solution fixed the problem and got me back on track quickly.
2009-07-22 21-32
Comment from: Lisa
Thank you Drewe! I had the height and width already set, but it was the position relative that I was missing! I was getting frustrated, thank you!
2009-08-03 17-36
Comment from: driedoezoe
THANKS!!!
2009-08-06 16-41
Comment from: ced
great with position:relative !
2009-08-12 11-45
Comment from: Mahmoud Ameara
I do the height 100% and overflow but it expand the height of the page show the scroll :(
2009-08-13 11-24
Comment from: Kamal
thanks Leslie R! great fix with position:relative!
2009-09-21 15-41
Comment from: sathish
Thanks dario, height:100% has fixed my problem, height: auto is differs from other browsers and IE6. Good solution Thanks,
2009-09-26 14-13
Comment from: Merel Veracx
Yes, adding position: relative to the surrounding box with the overflow: hidden did the trick - now my images are cropped in IE7. Thanks!
2009-09-26 20-17
Comment from: Tony
This worked for me also when I applied the line
overflow:hidden;
In the following code
background-color:#fafafa; margin:1em 10%; min-width:60em; position:absolute; width:80%; overflow:hidden; }
2009-10-05 14-27
Comment from: Donald
The postion:relative helped me with my issue.
2009-10-08 22-06
Comment from: Szilard David
Thanks!! Applying a fixed width to the same container as the overflow property worked for me
2009-12-16 16-03
Comment from: Amit Sharma
Thanks !! Fixed by position:relative;
2010-01-18 06-13
Comment from: ken
the only thing fixing my problem was working with position:relative;
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! :)
2010-02-22 15-12
Comment from: subduedjoy
You’d think MS would have this solved by IE 8. Nope. Setting height did not work for me. Setting width to 100% did. Thanks!
2010-03-11 21-14
Comment from: Wojtek
@Donald.
THANKS! The position relative worked great for me too!.
2010-03-16 18-29
Comment from: Rob Crowell
You, sir, have just ended about 2 hours of frustration on my end. Kudos!
2010-05-18 09-52
Comment from: masoud
THANKS alot! position:relative;
2010-05-27 14-42
Comment from: Dominik
Thanks mean! It’s work very well. Have a nice day!
2010-09-21 12-12
Comment from: Matt
Thanks very much! This is exactly what I was looking for … works without the hack in IE8, but IE7 was not behaving.
2010-11-22 02-13
Comment from: Fredde
Thanks! Saved my day! :D
2010-12-01 14-37
Comment from: وظائف شاغرة
you saved my day :) thanks
2011-01-09 15-51
Comment from: rollo
thanx so much! works fine!
2011-01-27 03-31
Comment from: Fpixl
Thanks for your tip! Adding height: 100%; worked for me
:)
2011-02-15 11-21
Comment from: Craig
This is a great IE6 fix. I was floating some spans inside an anchor and using overflow:hidden; fixed the bug perfectomondo.
Cheers
2011-03-01 16-04
Comment from: Digital Friend
Thank you, I have been trying to make a site IE6 compatible for the last few days and is proving a pain. your tips helped me lots! Thanks
2011-06-09 15-16
Comment from: Monique
position: relative;
it worked for me. thanks!
2011-06-18 09-56
Comment from: Ricky
thank you! you help me a lot, good job brother!
2011-08-01 12-21
Comment from: Sergey Sagan
position: relative; Also fixed the bug for me in Chrome, now it hides all of the elements! Thanks for the tip!
2011-10-15 13-09
Comment from: Robin
Position: relative; did the trick!
2011-10-24 18-31
Comment from: irina
adding :
position: relative;
to the element worked for me
2012-01-19 14-13
Comment from: karen keith
this helped me out a lot! Thank you so much :)
2012-02-26 06-01
Comment from: s-now
Thanks ! The width:100%; worked for me :-)
2012-03-30 11-32
Comment from: Abdul
Height:100%; fixed IE8 issue but now in Firefox it’s not showing scroll.
2012-08-06 22-49
Comment from: Siscolor
Thanks ! The width:100%; worked for me :-)
2012-09-26 18-31
Comment from: Jacques Lederer
Thanks a lot! I have been struggling with this. It didn’t seem to work for me, until I realized you must also apply “overfow:hidden” to the containing div. Not only “fixed” height. That solves the added unwanted scroll problem of IE. (For me at least)
2013-01-27 12-14
Comment from: yana
Thanks !
2013-03-21 09-25