...

View Full Version : IE Breaks Position Absolute



Downugo
12-13-2010, 11:28 PM
Hello,
I have a slideshow on the home page of a website I am doing www.pohlusa.com. The slideshow uses scriptaculous appear and fade effects. As far as I can tell, everything works perfectly fine in Firefox and Chrome all the time, and works on about 80% of IE browser versions. On some computers with IE8 it looks fine, and some with IE8 it is broken. When it is broken the slideshow appears way off the right and only the left side of each image is visible. The right side of the images are even truncated! I think the problem lies in the absolute selector of the CSS, because when I take out the two places where position:absolute is specified, the slideshow is positioned correctly on the version of IE that were previously not displaying correctly. However, when the absolute lines are removed, the slideshow gets a flicker in all browsers (actually the appear effect doesn't work and the new image just snaps in immediately). Anyway, I think there must be something strange about how IE interprets position:absolute, and hopefully someone knows a fix.

The CSS:

#slide-images{
position:absolute;
display:block;
margin:0px;
padding:0px;
overflow:hidden;
}
#slide-images li{
position:absolute;
display:block;
list-style-type:none;
margin:0px;
padding:0px;
background-color:#8b8989;
}
#slide-images li img{
display:block;
background-color:#8b8989;
}

The HTML on the home page:

<div align="center" style="height:370px; width:850px;">
<ul id="slide-images" style="height:370px; width:850px;">
<li style="width:850px; height:370px;"><img align="middle" src="images/home/1.jpg" alt="image1" /></li>
<li style="width:850px; height:370px;"><img align="middle" src="images/home/2.jpg" alt="image2" /></li>
<li style="width:850px; height:370px;"><img align="middle" src="images/home/3.jpg" alt="image3" /></li>
<li style="width:850px; height:370px;"><img align="middle" src="images/home/4.jpg" alt="image4" /></li>
<li style="width:850px; height:370px;"><img align="middle" src="images/home/5.jpg" alt="image5" /></li>
<li style="width:850px; height:370px;"><img align="middle" src="images/home/6.jpg" alt="image6" /></li>
</ul>
</div>


So slide-images is the <ul> and removing the position:absolute from #slide-images{...} and #slide-images li{...} fixes the position in the broken versions of IE, but totally breaks the slideshow in all browsers including IE. Thanks in advance for your help!

abduraooft
12-14-2010, 08:05 AM
Validate and fix all errors in your markup first, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.codingforums.com%2Fshowthread.php%3Ft%3D211998

Downugo
12-14-2010, 11:14 PM
Thanks for your response. However, the result of checking the index page where the problem exists: This document was successfully checked as XHTML 1.0 Transitional! Any other ideas?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum