Page 1 of 1

Overflow: hidden, height: 0px, IE problem.

Posted: Tue Jun 16, 2009 2:18 pm
by JellyFish
It seems as though there is some weird issue with IE and displaying elements properly when the containing element has the following properties:

Code: Select all

#container {
overflow: hidden;
height: 0px;
}
This works in all browsers (including the new IE8), except for IE7 and below. It seems as though IE6 & IE7 doesn't hide/crop the child elements like it should.

If you want to see the exact code and CSS that I'm using, give firebug a go on this page.

I appreciate all the help on this. If you looked at the link in IE6 or IE7, you can clearly see the issue.

How can I get around this?

Thanks for reading. I really would appreciate as much input as possible.

Re: Overflow: hidden, height: 0px, IE problem.

Posted: Tue Jun 16, 2009 2:48 pm
by kaszu
Add

Code: Select all

position: relative;

Re: Overflow: hidden, height: 0px, IE problem.

Posted: Tue Jun 16, 2009 2:59 pm
by JellyFish
kaszu wrote:Add

Code: Select all

position: relative;
WOoooooooooooa!

Thanks you so much man! So simple, yet so effective. :D I wonder how/why it works?

I have more IE issue with my site, if you've noticed. Should I make another post for each problem?

Re: Overflow: hidden, height: 0px, IE problem.

Posted: Tue Jun 16, 2009 3:05 pm
by pickle
JellyFish wrote:Should I make another post for each problem?
Yes. For the simple fact that if future people are having similar problems, it will be easier for them to find your solution.

Re: Overflow: hidden, height: 0px, IE problem.

Posted: Tue Jun 16, 2009 4:30 pm
by JellyFish
Okay, thanks pickle.

Just to make this post more useful, could some one explain or link to a resource that explains why kaszu's solution works? I'm curious to know.

Re: Overflow: hidden, height: 0px, IE problem.

Posted: Tue Jun 16, 2009 4:59 pm
by pickle

Re: Overflow: hidden, height: 0px, IE problem.

Posted: Thu Jun 18, 2009 1:58 pm
by JellyFish
Pickle I do not see how this blog explains kaszu's solution.

How do anyone figure out that adding 'position: relative' would this issue in IE, and why does it do it? Do adding a relative positioning give the element some special kind of layout in IE?

Re: Overflow: hidden, height: 0px, IE problem.

Posted: Thu Jun 18, 2009 2:15 pm
by pickle
It was an attempt at humour.

I think it actually may be related to the "hasLayout" property that IE invented.