Menu
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da" dir="ltr"> <head> <style> body { width: 900px; } .column-1 { width: 500px; float: left; } .column-2 { width: 200px; float: left; } .column-3 { width: 200px; float: left; } ul { width: 2000px; left: -499px; position: relative; } li { list-style: none; display: block; float: left; } .item-list { overflow: hidden; width: 499px; } </style> </head> <body> <div class="column-1"> <div class="item-list clearfix"> <ul> <li class="first"> <div class="node-slide"> <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" /> <div class="infobox"> <h4>Title 1</h4> <p>Teaser 1</p> </div> </div> </li> <li> <div class="slide"> <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" /> <div class="infobox"> <h4>Title 2</h4> <p>Teaser 2</p> </div> </div> </li> <li class="last"> <div class="slide"> <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" /> <div class="infobox"> <h4>Title 3</h4> <p>Teaser 3</p> </div> </div> </li> </ul> </div> </div> <div class="column-2"> ... </div> <div class="column-3"> ... </div> </body> </html> I've tracked down that it is the
ul { position: relative; } on the ul element that is causing the overflow: hidden not to work, but why that is, I don't know. Also this is needed to make the slider javascript work using the left attribute on the ul to slide it. Any ideas as to how you can fix this is most welcome.
278
It is a well-known bug in IE6 and IE7. To solve it, you need to add position:relative to the container. Since in your case body is the container, I'd suggest you add a div directly under the body and give it position:relative. It should solve your problem.
188
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With