IE6 Doesn’t Hide When Overflow Is Hidden

Posted on Tuesday, February 12th, 2008

A little CSS bug that affected me twice recently. I had to create a news ticker (so 1990s, but not my design) and an image slider, both which did the same thing; moving information from one side of the screen to the other. The important part was, at some point the news or the images would disappear, seemngly sliding underneath the next part of the page. Of course, this worked in all browsers but every developer’s favourite, Internet Explorer 6. Let me explain why this was happened and what I did to fix it.

The Problem: Position Relative

In order to create the effect of moving both the news ticker and the images, I set up something like the following:

<div id="slide_frame">
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>

With the following CSS:

#slide_frame { width:300px; }
#slide_frame ul {
list-style-type:none; position:relative; width:600px;
}
#slide_frame li { float:left; padding:0 5px; }

The sliding was done with JavaScript, jQuery, which I am falling in love with, as it happens, and the result was fine in all browsers but IE6 where both the news ticker and the image slider remained visible at all times.

The issue, it seems, comes down to the <ul> being positioned relatively, which had to be done, so that the JavaScript could move it about. Removing the position hid the out of shot part of the list but meant it wouldn’t move anywhere.

The Solution: Position Relative

Thankfully, this turned out to be an easy fix! In order to make IE6 behave all you need to do is apply position:relative to the containing <div> as well. Don’t go around playing with z-indexes like I did for half an hour anyway!

I have provided an example of the problem, with the fix to show what should be happening. Interesting point for those of you with many, many versions of Internet Explorer at your disposal, IE5 and 5.5 are not affected by this issue.

So, don’t get caught out by hidden overflow and relative positions again, just position your container relatively too!

If you enjoyed this post, why not subscribe to Unintentionally Blank

Posted in CSS | Trackback | Leave a comment


Comments

  1. 1July 20th, 2008 at 7:26 am

    Brandon Says:

    Thanks a ton! I constructed an image slider using Mootools and I had the same problem. Nice work. I just wish the world would come together as a whole and say that no one will use IE6 every again. It would make our jobs easier.


  2. 2July 22nd, 2008 at 10:26 pm

    Phil Says:

    One day Brandon, one day we won’t have to worry about that wreck of a browser.

    Glad this helped though!


  3. 3August 22nd, 2008 at 7:07 pm

    Xander Says:

    Thank you Phil, you helped me with solving the issue.


  4. 4September 9th, 2008 at 2:54 am

    Tim Says:

    I was having the same problem with a mootools sliding image gallery. Your fix worked great.

    Thanls


  5. 5September 15th, 2008 at 1:29 am

    Matt Says:

    Thanks heaps :-)


  6. 6September 22nd, 2008 at 10:18 pm

    Daniel R. Ziegler Says:

    Thank you thank you thank you so much! I have been struggling with this problem for the past week reading as much as I could about every possible quirk in IE but none solved my problem like yours. I would call you a god, but that would be blasphemy.


  7. 7October 23rd, 2008 at 9:03 pm

    Bas Says:

    Thanks for the solution! I had the same problem in two projects, problem solved within 10 seconds.


  8. 8November 11th, 2008 at 10:08 pm

    R. Sigg Says:

    You. Are. A. Genius!

    (Down with IE6!)


  9. 9November 19th, 2008 at 11:16 pm

    Mike Says:

    Thank you very much for sharing this monumental discovery.

    I have been struggling with this for … weeks.


  10. 10November 25th, 2008 at 7:41 pm

    dnnsldr Says:

    Thanks for the solution. I am using the Prototype Carousel and all that was needed was the position:relative added to the .container class and everything works great in IE6 now. Thanks again for the solution.


  11. 11December 10th, 2008 at 1:06 pm

    Olly Hodgson Says:

    Phil, you’re a scholar and a gentleman. I thought I’d seen everything when it came to IE6, but then today I ran headlong into this lovely bug.


  12. 12December 18th, 2008 at 8:57 pm

    enkosynthesys Says:

    that was veeery helpful. spend two days alignin flash object inside a container. Thanks!


  13. 13February 3rd, 2009 at 11:02 am

    Gary Says:

    Wow, thanks for this! I was doing a similar enough animation thing with an image and couldn’t get it working on IE.

    cheers :)


  14. 14February 24th, 2009 at 3:47 am

    Jeff V Says:

    Thanks. I messed around with absolute positioning last week to try to sort this exact problem. That really wasn’t satisfactory, and I had another look today. An hour later after fiddling I decided to search again, and your article reminded me how to fix this problem. Thank you very much.


  15. 15March 24th, 2009 at 9:56 pm

    Dave Says:

    This has worked great for me in the past and was a quick fix to a problem that I was afraid was going to be a huge pain. Unfortunately on my latest project it didn’t do the trick. I’m doing something very similar, sliding image from right to left with jQuery, but even with the containing element set to relative the images are still visible and in the flow of the page. Any other tricks?


  16. 16April 1st, 2009 at 10:27 pm

    Luis Says:

    Thanks!


  17. 17April 3rd, 2009 at 11:31 pm

    Darren Rees Says:

    Excellent. Thanks, I got stuck on this myself.


  18. 18June 24th, 2009 at 11:56 pm

    W Bell Says:

    Well, this worked for my problem using Spry images for a gallery in a DIV. The only browser that required this fix was IE 6 on Win2000 and XP. I thought it was going to be a big problem as well so many thanks to the solution poster!


  19. 19July 5th, 2009 at 10:10 pm

    Phil Says:

    6 hours on this problem. I love you.


  20. 20July 30th, 2009 at 4:14 am

    Joe Clay Says:

    I love you also. God that was a pain in the ass. I spent most of my time looking at an unrelated float problem!


  21. 21July 30th, 2009 at 7:34 am

    alice Says:

    that’s really helpful, thank you!


  22. 22August 17th, 2009 at 4:27 am

    Matt Says:

    Thanks a lot. This worked! IE6 can be so frustrating.


  23. 23October 6th, 2009 at 6:00 pm

    Daniel Says:

    Thanks, you save my life ! :)


  24. 24October 13th, 2009 at 10:00 pm

    johann Says:

    it’s funny how the article written two years ago still helping people :)

    thanks! ;)


  25. 25October 14th, 2009 at 2:58 pm

    Andy Says:

    Wow! Thank you so much for this, glad I googled this when I did :-)


  26. 26October 15th, 2009 at 11:55 am

    stefan Says:

    Thank you! I had a similar problem today and your fixed solved it. Great find and keep up the good work!


  27. 27December 4th, 2009 at 6:04 am

    Sean Says:

    Thank you very much! Sliding comments box here with the same issue. Naturally i build in firefox because of the genius that is firebug, got it all perfect and then BAM, IE6 comes in with a wet fish round the face.

    Been googling for about 30 mins and you’ve solved the issue for me, thank you very much. All I have to do now it tweak all the alignment and I’m set.


  28. 28December 14th, 2009 at 11:50 pm

    Phil Says:

    I’m really glad this is still helping out! Until IE6 finally fades away people are going to come across this problem. Thankfully, it can’t be long until the browser we all love to hate will disappear.


  29. 29January 21st, 2010 at 12:37 am

    Mike Says:

    You saved my day and night…..

    Great advice, IE6 problem solved…


  30. 30April 18th, 2010 at 9:09 am

    paul Says:

    good job on that! well played.. the position:relative was my problem on the container..


  31. 31April 23rd, 2010 at 2:05 pm

    marcel Says:

    thanks!


  32. 32May 24th, 2010 at 9:18 am

    Lam Says:

    My savior … Thanks a lot… 4 years guys… 4 years …


Leave a Comment