Spacing of javascript slide show in FF good, in IE not good

Posted on 2012-09-04
Last Modified: 2012-09-05
Hi- below is the code I'm using on this page:

The absolute position used on slideshow IMG positions the images correctly on Firefox 12.0, but doesn't move them at all in IE9.  IS there something else I can add that will accomplish the same positioning on IE? Thanks!

<script type="text/javascript" src="/includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $ ? $
        : $('#slideshow IMG:first');


    $next.css({opacity: 0.0})
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');

$(function() {
    setInterval( "slideSwitch()", 5000 );


<style type="text/css">
#slideshow { position:relative; height:390px; }
#slideshow IMG { position:absolute; top:0; left:-15; z-index:8; opacity:0.0; }
#slideshow { z-index:10; opacity:1.0; }
#slideshow IMG.last-active { z-index:9; }

<div id="slideshow">
    <img src="/siteimages/rse/1.jpg" alt="" class="active" />
    <img src="/siteimages/rse/2.jpg" alt="" />
    <img src="/siteimages/rse/3.jpg" alt="" />

Open in new window

Open in new window

Question by:mel200
    LVL 42

    Accepted Solution

    Looking at your site, the slideshow is working absolutely fine. The reason it's out of position is because of the left and right padding you've added to the DIV within the theme header - your measurements don't add up!

    Your themeHeader is 950px wide, and you add a 30px padding (15px left and right) to the inner DIV, which makes the inner DIVs 920px, including the SlideShow one. The SlideShow div contains images that are 950px wide, so you then move them left by -15px!

    Remove the left and right padding from the inner DIV and remove the left:-15px; from the images within your SlideShow and things should line up nicely.

    Also, your page is rendering in Quirks mode, so you have probably got an incorrect DOCTYPE - Fix this ASAP! Here a list of DOCTYPES to choose from:
    LVL 42

    Expert Comment

    by:Chris Stanyon
    One other thing of note - when you position an element, make sure you include a measurement (px, em, etc) otherwise it won't work (0 is the exception). You currently have:

    left: -15;

    It should be

    left: -15px;

    Author Comment

    Thanks very much, and DUH!! I knew that about 15px, what is wrong with me?
    I'll work on it right now.

    Author Closing Comment

    Perfect answer!

    Featured Post

    Maximize Your Threat Intelligence Reporting

    Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

    Join & Write a Comment

    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
    This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now