?
Solved

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

Posted on 2012-09-04
4
Medium Priority
?
502 Views
Last Modified: 2012-09-05
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

0
Comment
Question by:mel200
  • 2
  • 2
4 Comments
 
LVL 45

Accepted Solution

by:
Chris Stanyon earned 2000 total points
ID: 38367241
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
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38367261
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
 

Author Comment

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

Author Closing Comment

by:mel200
ID: 38367884
Perfect answer!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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)
Suggested Courses

864 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