Question

Hello I added a JQuery SlideShow with 6 png images each with the size 548px X 320px

For some reason, sometimes when the page first loads these images appear very tiny. When I refresh the page, the images appear normal size. Again this doesnt happen every time. Im not sure if this could be a JavaScript error because when I run this in JFiddle there are JavaScript errors from the plugin’s js file.

http://jsfiddle.net/Mutant_Tractor/Re9pt/3/

I’ve noticed on other sites that they implement some type of PreLoad(). I dont have that.

Here is the HTML:

    <div id="top-feature">
    <div class="slideshow">
        <img alt="image1" src="images/slide1.png" />
        <img alt="image2" src="images/slide2.png" />
        <img alt="image3" src="images/slide3.png" />
        <img alt="image4" src="images/slide4.png" />
        <img alt="image5" src="images/slide5.png" />
        <img alt="image6" src="images/slide6.png" />
    </div>

Here is the CSS:

#top-feature {
height: 320px;
width: 848px;
margin: 12px 0 0 16px;
background: orange;
/*padding: 10px 0 0 10px;*/
position: absolute;
text-align: left;
}

#top-feature div {
/*float: left;*/
}
.slideshow {
height: 320px;
width: 548px;
margin: 0 0 0 0;
/*background: blue;*/
position: absolute;
}

Answer 1

You can try adding width and height attributes to the slideshow’s <img> tags. IE might be losing track of how big the images are. Even if it isn’t the problem specifying the dimensions in <img> tags is a good habit so it can’t hurt.