When overflow: hidden Doesn’t Hide in IE

2nd Apr 2007 - Posted to Web Development, CSS

I’ve come across this problem before, where I want to hide the overflow of an element, this works fine in all browsers except IE - however it’s never been a problem in anything that I’ve progressed far enough with to worry about fixing it for IE.

Well this evening I came across the problem again, and found the solution - IE (I’m just looking at 6 here - not sure if 7 does the same) doesn’t like it when you have a position: relative; on the child (or possibly children) of an element which you have declared overflow: hidden;.

So in my case swapping that out for position: absolute; on the child and overflow: hidden; position: relative; on the parent worked a charm. Now IE 6 plays nicely like its other browser friends.

Comments

There have been 23 comments so far, join the discussion.

1. Amer Shah - 20th May 2007 - 7:40 pm

This really works.. Thanks a million !!!

2. Chris McCormack - 4th Jun 2007 - 9:25 am

Awesome. I KNEW it was a positioning problem but I just couldn’t figure it out. Literally my last hope this and it worked :)

3. Itay - 30th Aug 2007 - 7:06 am

Worked like a charm! Thanks!

4. Rc.if - 20th Sep 2007 - 3:48 pm

thx :)

5. Shane O'Sullivan - 8th Oct 2007 - 2:20 pm

Thanks a lot for this, works perfectly now.

6. Glenn - 24th Oct 2007 - 10:28 am

I’m still having an issue that hopefully you can help me with…
I’m going to animate some divs that appear within a “display” div. This means that the divs that will be moving will need to have a position applied to them. The structure is like this…

So far, the CSS looks like this:

Display code as plain text
CSS:

  1. #displayBox {

  2.     width: 568px;

  3.     height: 417px;

  4.     overflow: hidden;

  5. }

  6. #final {

  7.      left: -600px;

  8.      position: relative;

  9. }

  10. #displayBox {

  11.     width: 568px;

  12.     height: 417px;

  13.     overflow: hidden;

  14. }

  15. #content1 {

  16.      left: -600px;

  17.      position: relative;

  18. }

Now if I change the position to absolute, it doesn’t hide in Firefox.
The content div has been moved just out of the displayBox div’s line of site, ready to be slid in to place.
Any thoughts?
Thanks for your help. I can see how the above article can be useful in the future, but I’m stuck on this one!
Cheers,
Glenn

7. Dave Flaherty - 7th Nov 2007 - 9:58 pm

If you’d like to use overflow:hidden on an element that has child div elements set to position:relative, just set the overflow:hidden element to have position:relative as well. This obviously won’t work for anyone who needs absolute positioning on that outer div, but it helped me.

8. steve - 28th Nov 2007 - 11:23 pm

dude, you are the man . I was just able to fix this freakin layout bug where I work due to your blog entry.

thanks a mil

rock on

you go

9. Arindam Basu - 17th Dec 2007 - 8:04 am

Thanks a lot… it worked!!!!!

10. ohn - 5th Feb 2008 - 5:47 pm

You just saved my day. This is awesome!!! Thanks so much!!

11. federico - 21st Feb 2008 - 3:36 pm

thanks! I just put relative position to the element and now gets hidden also in my lovely #$%&@ IE!
:)

12. Ezra - 25th Feb 2008 - 2:47 pm

Add another to the list of people who’s day you saved! Thanks for sharing!

13. Dave - 25th Feb 2008 - 2:50 pm

You’re all welcome, I sometimes have to re-read this post to fix the issue myself :)

14. Hari - 9th Apr 2008 - 2:29 am

Thanks a ton – saved me a lot of grief.

15. Chives - 20th Apr 2008 - 11:47 am

Thanks a lot. This post has really helped me out to fix this nasty bug in my layouts :)

16. Eric.givens@gordon.edu - 25th Apr 2008 - 7:09 pm

Awesome tip!! Thanks so much! You just saved me a LOT of head scratching :)

Down with IE! :P

17. Richard - 6th Jun 2008 - 1:24 am

worked for me too, thanks!!!!!

18. Duncan Beevers - 19th Jun 2008 - 1:50 am

You saved the day sir.

19. Yanko - 24th Jun 2008 - 4:51 pm

I can’t believe this bug is still present in IE7, even in strict mode! I’ve been battling this issue for the past couple of hours. Finally a solution that works. Thank you!

20. Tony M - 1st Jul 2008 - 4:55 am

Cheers mate, worked a treat.

21. Pavel - 3rd Jul 2008 - 1:06 pm

I know i won’t be first and last neither who say that, but it really works. Thanks a lot

22. Usman - 4th Sep 2008 - 4:29 pm

Been searchin Google for a fix, and finally found it. Thanks much.

23. Joe - 13th Nov 2008 - 8:09 pm

Even better: leave the children elements alone, and just stick with position:relative; on the parent.

Leave a comment

No HTML please, only textile. For code please use [lang]...[/lang] tags (e.g. [html]...[/html] for HTML)