Page 1 of 3 123 LastLast
Results 1 to 10 of 22

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

  1. #1
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

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

    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,

    RichClick image for larger version. 

Name:	Untitled-1.jpg 
Views:	146 
Size:	88.2 KB 
ID:	4781
    Last edited by Richard Cousins; 10-09-2012 at 08:25 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 10-03-2012 at 03:52 PM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by Richard Cousins; 10-03-2012 at 08:06 AM.

  4. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  5. #5
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    I would google preloading and caching
    this looks promising.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  7. #7
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    it took about 10 seconds and everything worked, it wouldn't be long enough for anyone to get bored and leave the site.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  9. #9
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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

    HTML Code:
    <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>
    Last edited by keyboard; 10-03-2012 at 10:31 AM. Reason: Merged Posts

  10. #10
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,524
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    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.

Similar Threads

  1. Cool Sprites Free overlapped pure CSS menu using CSS Sprites
    By bdeepu in forum Submit a DHTML or CSS code
    Replies: 1
    Last Post: 04-20-2010, 08:42 PM
  2. Image Sprites???
    By magicyte in forum Other
    Replies: 5
    Last Post: 10-01-2008, 09:29 PM
  3. Online Image Optimizer broken
    By pjrobertson in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 11-14-2007, 04:32 PM
  4. ContentSlider, substitute image icons?
    By jmueller0823 in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 03-13-2007, 08:23 AM
  5. Replies: 2
    Last Post: 06-13-2006, 04:22 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •