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,

Rich4781

[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 (http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm) 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.

[Richard Cousins]

I take it a blank png should do the trick?

[keyboard]

It just has to be transparent.
A png or gif would work!

[Richard Cousins]

That worked a treat :D thank you!

[keyboard]

Your welcome!
If you haven't got any other question, please set the thread to resolved.
Otherwise, ask away!

[Richard Cousins]

I do have more if that's ok. Im just validating the code and there are a few thing im not sure how to resolve.

The first one is to do with an iframe. We have an iframe which shows part of our blog. Now in the HTML I am using this code:


<iframe id="blog-iframe" src="http://stormdfx.tumblr.com/" marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no>
<p>Your browser does not support iframes.</p>
</iframe>

Now the validator says I shouldnt be using the marginwidth etc etc in the HTML as it can be used within a CSS file.

The marginwidth attribute on the iframe element is obsolete. Use CSS instead.
The marginheight attribute on the iframe element is obsolete. Use CSS instead.
The frameborder attribute on the iframe element is obsolete. Use CSS instead.
The scrolling attribute on the iframe element is obsolete. Use CSS instead.
Attribute vspace not allowed on element iframe at this point.
Attribute hspace not allowed on element iframe at this point.

How would I go about solving this?

Cheers

[keyboard]

Take a look here (http://www.w3schools.com/cssref/pr_margin.asp).
Fiddle around with the margin attribute..

For the scrolling=no, try overflow:hidden or overflow:auto

For frameborder look here (http://www.w3schools.com/css/css_border.asp).
It's got information on css borders.

[Beverleyh]

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

http://gtmetrix.com/ should help you speed-up/optimise your website - it did for me! http://gtmetrix.com/reports/fofwebdesign.co.uk/9dTaEBCD :)

It will tell you the things that have the biggest impact on speed and make suggestions on how to fix them using Google/Yahoo dev docs/recommendations. It will also generate optimised css and js files for you.

[Richard Cousins]

@keyboard1333 - Ive managed to sort it all out bar the no scroll bars. If I remove all the other parts it seems to work just fine, I guess because its placed in a div thats the same size as the iframe so it cant move, but I still get the horizontal bar. Here is the html and css as it currently stands:


<iframe id="blog-iframe" src="http://stormdfx.tumblr.com/">
<p>Your browser does not support iframes.</p>
</iframe>


#blog-iframe{
border: 0;
width:100%;
height:550px;
margin:0;
overflow:hidden;
}


@Beverleyh - Thank you! I will try this out once I get all the code sorted and validated. Anything to help it load faster.

[Richard Cousins]

While I am trying to find a way or removing scroll bars from iframs by using CSS.

The last 5 errors I am getting are these:

Line 146, Column 120: Bad value content-950-690 for attribute rel on element a: Keyword content-950-690 is not registered.
…content-950-690" class="pirobox_gall1"><img class='image1-360' src="img/clear.…

How do I go about fixing this issue?

here is the html:


<div id="image1-360"><a href="account.html" title="Account Management" rel="content-950-690" class="pirobox_gall1"><img class='image1-360' src="img/clear.png" alt="Account Management" width="110" height="410"></a></div>

<div id="image2-360"><a href="create.html" title="Create" rel="content-950-690" class="pirobox_gall1"><img class='image2-360' src="img/clear.png" alt="Create" width="110" height="410"></a></div>

<div id="image3-360"><a href="prototype.html" title="Prototype" rel="content-950-690" class="pirobox_gall1"><img class='image3-360' src="img/clear.png" alt="Prototype" width="110" height="410"></a></div>

<div id="image4-360"><a href="production.html" title="Production" rel="content-950-690" class="pirobox_gall1"><img class='image4-360' src="img/clear.png" alt="Production" width="110" height="410"></a></div>

<div id="image5-360"><a href="distribution.html" title="Distribution" rel="content-950-690" class="pirobox_gall1"><img class='image5-360' src="img/clear.png" alt="Distribution" width="110" height="410"></a></div>

[jscheuer1]

There's this broken image:

http://www.richardcousins.net/stormdfx/img/nav-arrow.png

But it's looking good in IE 9 here, those broken image tokens no longer show as in the image you posted, or at least not for me in IE 9.

About speeding the load. Preloading won't do you any good unless the images are preloaded on a previous page, preloading on the page itself can slow things down. You can preload the images while showing the user a progress bar, but then they're stuck looking at the progress bar until things load and it probably makes it take a bit longer to load still. There is lazy load:

http://www.appelsiini.net/projects/lazyload

which might or might not be tricky to implement on that page due to its method of scrolling. It waits until images are in view to load them.

[Richard Cousins]

@jscheuer1 - Ive fixed the problem of the broken image tokens.

The only errors I currently have are that is I use scrollbars="no" in the html it isnt valid. Now if I used overflow-x and overflow-y set to hidden this works but only in FF it doesnt work in IE9 or CHrome. There must be a way to remove the scrolling for iframs but using CSS surely?

The second problem I have are to do with the rel on a set of links I have. I believe the rel is setting the size of the windows that open with the JS pirobox im using. But I dont know how so solve this problem either.

[jscheuer1]

If you're only worried about w3c validation, on those two items I wouldn't.

That said, if you control the content in the iframe, you may remove its scrollbars by setting the overflow hidden for the html and body tags of the pages inside the iframe. Otherwise, you are stuck with the scrollbars=no on the iframe tag. Well again if you control the pages inside the iframe, you could make sure their layout dimensions are less than those of the iframe, then there would be no scrollbars either, but that has to be pixel perfect, using overflow is easier.

If you mean that the rel attribute is invalid, it is in HTML 5 (which I see you are using) if it isn't registered and registering it for something like this is impossible. You would have to edit the script to check for a different attribute. In HTML 5 you may assign any number of arbitrary attributes as long as they begin with "data-", so you could change rel to data-rel and change in the script anywhere it looks for rel to have it look for data-rel.

But as I say, these two issues aren't really worth worrying about. No browser is going to give you a problem, only the validator is.

An alternative would be to use another DOCTYPE (HTML strict/strict or transitional/loose), but there probably would be issues in those as well, might not be though.