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
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
% (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...
The issue is caused by hasLayout, read my article on http://zoffix.com/css/ie/haslayout.shtml
Try to set only height (or width): 100%;
It worked with me.
Thanks to dario for the width: 100% tip. Worked like a charm for me too.
you rock, i like the hacks, so i used the word-wrap method, perfecto!
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.
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.
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.
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?
height: 100% /* again, fill in value needed */
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.
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,
Overflow solutions behaves differently in the sub-version of the IE6. There may not be a generic solution to this.
I managed to fix this by setting a postion property.
So if you don’t want things to change simply use position:relative;
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!
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.
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!
great with position:relative !
I do the height 100% and overflow but it expand the height of the page show the scroll :(
thanks Leslie R! great fix with position:relative!
Thanks dario, height:100% has fixed my problem,
height: auto is differs from other browsers and IE6.
Good solution Thanks,
Yes, adding position: relative to the surrounding box with the overflow: hidden did the trick - now my images are cropped in IE7. Thanks!
This worked for me also when I applied the line
In the following code
The postion:relative helped me with my issue.
Thanks!! Applying a fixed width to the same container as the overflow property worked for me
Fixed by position:relative;
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! :)
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!
THANKS! The position relative worked great for me too!.
You, sir, have just ended about 2 hours of frustration on my end. Kudos!
Thanks mean! It’s work very well. Have a nice day!
Thanks very much! This is exactly what I was looking for … works without the hack in IE8, but IE7 was not behaving.
Thanks! Saved my day! :D
thanx so much! works fine!
Thanks for your tip!
Adding height: 100%; worked for me
This is a great IE6 fix. I was floating some spans inside an anchor and using overflow:hidden; fixed the bug perfectomondo.
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
it worked for me.
thank you! you help me a lot, good job brother!
position: relative; Also fixed the bug for me in Chrome, now it hides all of the elements! Thanks for the tip!
to the element worked for me
this helped me out a lot! Thank you so much :)
Thanks ! The width:100%; worked for me :-)
Height:100%; fixed IE8 issue but now in Firefox it’s not showing scroll.
Thanks ! The width:100%; worked for me :-)
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)