IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo

Question

So I have created a slider for a homepage, that slides some images with a title and teaser text using jQuery. Everything works fine, and I went to check IE and found that IE 6 and 7 kills my slider css completely. I can't figure out why, but for some reason I can't hide the non active slides with overflow: hidden; I've tried tweaking the css back and forth, but haven't been able to figure out what's causing the problem. I've recreated the problem in a more isolated html page. ``` …

Accepted Answer

This problem is apparently a known bug for IE 6 + 7, which was fixed in IE8.

To avoid this, in this case you can replace:

```
ul {
    left: -499px;
    position: relative;
  }
```

with:

```
ul {
    margin-left: -499px;
  }
```

This however gave some problems with the background I used on the infobox div, but nothing I couldn't solve with a few style hacks.

IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo

Solution

Problem