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!