Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy IE Breaks Position Absolute

    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!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,855
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Validate and fix all errors in your markup first, see http://validator.w3.org/check?verbos...p%3Ft%3D211998
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Sep 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •