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

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

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

Post 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.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

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

Post by kaszu »

Add

Code: Select all

position: relative;
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

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

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

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

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post by pickle »

Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

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

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

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

Post by pickle »

It was an attempt at humour.

I think it actually may be related to the "hasLayout" property that IE invented.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply