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

Hi- below is the code I'm using on this page:
s50.funeralhomewebhosting.com/index.php?

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 IMG.active');

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

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

    $active.addClass('last-active');

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

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

</script>

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

<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="" />
</div>

Open in new window


Open in new window

mel200Asked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
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:

http://www.w3.org/QA/2002/04/valid-dtd-list.html
0
 
Chris StanyonCommented:
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;
0
 
mel200Author Commented:
Thanks very much, and DUH!! I knew that about 15px, what is wrong with me?
I'll work on it right now.
0
 
mel200Author Commented:
Perfect answer!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.