Homepage slider positioning problems

[fathernugen]

Hello,

 

If you look at a site I'm updating:

 

www.sittingspiritually.co.uk

 

The jquery slider on the homepage does strange things.

 

Try reloading the page a few times to see the slider in its different positions.

 

Sometimes it sits perfectly.

 

Other times it jumps to the right and overlaps the right hand sidebar.

 

The html code for it is here:

 

<div id="homeslides">
  <div id="slider" class="image-section">	
    <a href="http://www.sittingspiritually.co.uk/garden-swing-seats"><img src="images/slider/swingseatcobb.jpg" alt="Swing Seats on the Cobb Lyme Regis by Sitting Spiritually - Bespoke Swings For All Ages" title="Swing Seats on the Cobb Lyme Regis by Sitting Spiritually - Bespoke Swings For All Ages" /></a>
    <a href="http://www.sittingspiritually.co.uk/rope-swings.php"><img src="images/slider/2_boys_on_a_rope_swing.jpg" alt="Oak Rope Swings by Sitting Spiritually - Bespoke Swings For All Ages" title="Oak Rope Swings by Sitting Spiritually - Bespoke Swings For All Ages" /></a>
    <a href="http://www.sittingspiritually.co.uk/garden-swing-seat-harmony"><img src="images/slider/harmony.jpg" alt="Harmony Painted Pine Swing Bench by Sitting Spiritually - Bespoke Swings For All Ages" title="Harmony Painted Pine Swing Bench by Sitting Spiritually - Bespoke Swings For All Ages" /></a>
    <a href="http://www.sittingspiritually.co.uk/garden-swing-seat-kyokusen.php"><img src="images/slider/kyokusen.jpg" alt="Kyokusen Curved Oak Swing Chair by Sitting Spiritually - Bespoke Swings For All Ages" title="Kyokusen Curved Oak Swing Chair by Sitting Spiritually - Bespoke Swings For All Ages" /></a>
    <a href="http://www.sittingspiritually.co.uk/garden-swing-seat-serenity"><img src="images/slider/serenity.jpg" alt="Serenity Western Red Cedar Swing Seats by Sitting Spiritually - Bespoke Swings For All Ages" title="Serenity Western Red Cedar Swing Seats by Sitting Spiritually - Bespoke Swings For All Ages" /></a>
    <a href="http://www.sittingspiritually.co.uk/garden-swing-seat-pergolas"><img src="images/slider/canopy.jpg" alt="Swing Seats for Pergola's, Gazebo's, Arbours and Trees by Sitting Spiritually - Bespoke Swings For All Ages" title="Swing Seats for Pergola's, Gazebo's, Arbours and Trees by Sitting Spiritually - Bespoke Swings For All Ages" /></a>    
    <a href="http://www.sittingspiritually.co.uk/garden-swing-seat-tranquillity"><img src="images/slider/tranquillityoak.jpg" alt="Tranquillity Oak Swing Seat by Sitting Spiritually - Bespoke Swings For All Ages" title="Tranquillity Oak Swing Seat by Sitting Spiritually - Bespoke Swings For All Ages" /></a>
  </div>
</div>

 

And the CSS is here:

 

div#homeslides { align: center; width: 450px;}

#slider {position: relative; margin: 0 auto;}
.image-section {display: block; margin: 0px 00px 20px; padding: 0;}

.image-section img {background: #FAFAFA; border: 1px solid #ECECEC; padding: 5px; height: 320px;}

:focus {outline: none;}

 

 

The problem seems worse in Firefox and Internet Explorer.

 

I've added some simple preloading code I got form here:

 

http://perishablepress.com/press/2008/06/14/a-way-to-preload-images-without-javascript-that-is-so-much-better/

 

But the problem was there before I added this.

 

Hope someone has enough insight to spot the flaws.

 

Thanks in advance for any comments/help.

 

Fathernugen.

[raknjak]

In IE8 for me it's fine, Firefox overlays the image over your paragraphs: try putting the text that has to come below in a div to solve this hopefully.

It has an ugly preload though: in a split-second I can see the images, then they disappear.

There also seem to be issues with alignment: what are you trying to accomplish with:

 

div#homeslides { align: center; ...}

 

because that won't work. it's either margin: 0 auto or text-align: center depending on your needs.

[fathernugen]

I have removed the stupid align. I have since added to the style sheet - margin: 0 auto;

And added a div. That seems to have fixed it.

 

Can anyone recommend any other pre-load image method I can use. The current one I'm using doesn't seem to be doing the trick.

 

 

 

[haku]

Put all your images into a div, and set the CSS for that div to be display:none. The images will load and be cached, but not visible to the user.