Broken Image Icons Appears on my sprites in IE 9. Please Help

[Richard Cousins]

Hi there,

I'm creating a website for the company I work for and I am using some sprites as image rollovers. They also work as links. Now they work fine and I can view them properly in Chrome, Opera and FF but in IE9 I get a little image icon appear in the top left hand corner. How can I get rid of these as I am stumped and cant find anything on the net.

Cheers,

Rich

[jscheuer1]

You won't usually get those icons for sprites which are usually background images. Regardless, you almost certainly have image tags with either no src attribute, or a src attribute that points to an invalid file. These may be, probably are in addition to the sprites, but they might be the elements that the sprites work on. The browsers that are working as desired often do not show the broken image tag, that depends on formatting and HTML syntax. IE almost always does show the broken image icon.

The exact way this issue is playing out on your page cannot be told via speculation, and it's possible some other issue(s) are involved either in addition to this, or alone.

To be of more specific help, we would need a link to the live page.

[Richard Cousins]

Hi jscheuer.

Here is a link to the test site. Its the 360 Service section which is showing the broken image icons on the images in IE.

http://www.richardcousins.net/stormdfx/

Any tips on the code would be great thanks.

[bernie1227]

http://www.richardcousins.net/image1-360 is a broken link.

[Richard Cousins]

Hi bernie1227, thanks for pointing that out. I will try and fix it.

Also can I ask if anyone can give me tips of how I can help the website load faster. Its going to be an image heavy website and I want to load it as fast as possible. I'm already optimising the hell out of the images but is there anything code wise I can do that will help?

THanks

[bernie1227]

I would google preloading and caching
this looks promising.

[Richard Cousins]

How quick did the website load for you and was there anything that didnt run smoothly?

[bernie1227]

it took about 10 seconds and everything worked, it wouldn't be long enough for anyone to get bored and leave the site.

[Richard Cousins]

I cant seem to figure out why I cant get rid of the broken image icon still. Everything works fine in the other browsers and Ive check the HTML and CSS and it all seems OK, I'm stumped :-(

From what I can see when validating the code is that it wants the img to have src. The thing is Ive used a class in the image tag to create the sprite and making it the backgroud thus not needing the background img.

How do I over come this problem?

this is the html im using

<div id="wrapper-360">
<div id="left-360">Our passion for delivery has lead us from being a pure creative agency to being a full service business that has the skills </div>
<div id="image1-360"><a href="account.html" title="Account Management" rel="content-950-690" class="pirobox_gall1"><img class='image1-360' alt="Account Management"></a></div>
<div id="image2-360"><a href="create.html" title="Create" rel="content-950-690" class="pirobox_gall1"><img class='image2-360' alt="Create"></a></div>
<div id="image3-360"><a href="prototype.html" title="Prototype" rel="content-950-690" class="pirobox_gall1"><img class='image3-360' alt="Prototype"></a></div>
<div id="image4-360"><a href="production.html" title="Production" rel="content-950-690" class="pirobox_gall1"><img class='image4-360' alt="Production"></a></div>
<div id="image5-360"><a href="distribution.html" title="Distribution" rel="content-950-690" class="pirobox_gall1"><img class='image5-360' alt="Distribution"></a></div>
</div>

[keyboard]

I'd suggest making the source of the image a transparent image.
That way, when you put the background onto it, you can still see it through the transparent image.