none
Broken images in IE browser only

    Question

  • Hi,

    I've come to this forum recently and received a lot of good advice getting the bugs out of my new site and hope for more of the same. The site is www.zerorelevance.com which i've managed to get working across all browsers but for some reason 3 images are not showing up when the site is viewed in IE. All of the dependent files are on the server so i'm unsure as to why these specific images are not showing up in IE. Any assistance would be greatly appreciated. Thanks

    Vinx
    Thursday, February 11, 2010 3:42 PM

Answers

  • Your problem is with IE6. It views fine in IE8. IE6 doesn't know how to show your PNG image files.

    EDIT: I see the three images now that you referred to. They don't display in IE8. The markup in the image's parent is the same as the others so it is a bit of a mystery. I'm looking at it.
    • Edited by Time Bandit Thursday, February 11, 2010 4:20 PM
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 4:08 PM
  • IE6 will show PNG files it just can't handle any alpha-transparency layer.  Even if the PNG has an alpha layer it will still display the image, but with a grey background.

    His other images are PNG images.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 4:13 PM
  • Try resaving that one files.  Sometimes IE has issue if the image file is not saved with the proper color encooding (you may have save as CMYK instead of RGB).  Since your other button images work then its probably just a hiccup (or incorrect setting) with those files when saving.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Thursday, February 11, 2010 4:17 PM
  • That must be it Chris. IE8 will not show: http://www.zerorelevance.com/FooterBtnNext.PNG

    Nothing to do with the page context.

    Interesting is that if you print the IE8 page of http://www.zerorelevance.com/FooterBtnNext.PNG using Adobe Acrobat the pdf file shows the image just fine.

    It's an IE bug.
    Thursday, February 11, 2010 4:23 PM
  • IE is quirky if image encoding is not exactly correct.  FF is much more pwerful when displaying images of various formats and encoding methods.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 4:44 PM
  • With regards to this "IE6 will show PNG files it just can't handle any alpha-transparency layer.  Even if the PNG has an alpha layer it will still display the image, but with a grey background."

    Is there a better universal image format i should be using, such a jpegs, gifs, tifs? etc. I had been told pngs in the past.
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 5:34 PM
  • pngs are fine as long as you don't use alpha transparency or use a conditional  comment for IE 6.


    MS MVP Expression Tutorials & Help http://by-expression.com
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 5:39 PM
  • Depends on your needs. 
    JPG is best for photograhps or similiar.
    GIF is great for images using less than 256 colors or with very distinct demarcation lines.  Good format for transparent images
    PNG is a great format for mixing GIF type images with JPG type images.  Its more of a universal type format (8-bit replaces GIF well, and 24-bit replaces JPG well.

    I use PNG for transparent images and use a hack to support IE6.  For non-transparent images I use JPG for photographs, GIF for images with very low amount of colors (where quality is not sacrificed) and PNG for everything else.

    What it come down to for me is "use the most optimized format for what I am trying to accomplish where perceived quality will not be sacrificed"
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 5:40 PM
  • Thank you everyone for the quick and clear answers, I'm trying to address the image problems atm but have run into another issue that probably just has to do with my lack of experience. I'm away from my home base (@ work haha) and through an ftp I have downloaded the images, re saved them, then placed the file back in the directory folder for my site. However the first image, (the top nav bars "next" btn) is not showing up in and browser atm??? pls help
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 6:01 PM
  • Says the Image is not on the server.  Since you are on an Apache server understand that filenames are case sensitive so Mybutton.jpg and mybutton.jpg are two totally different files.  Best to name files in lower case, no spaces.

    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 6:25 PM
  • http://www.zerorelevance.com/BtnNext.PNG is not found because it's not there.  Nothing to do with IE.  Firefox or any other browser can't find it either.

    On the other hand, http://www.zerorelevance.com/BtnNext.png is there.  You are on an Apache server: Case matters.  You are starting from a Windows PC: Case doesn't matter.  Because of this, it's not a good idea to mix upper and lower case.  EW will be happy to show either version of the name, while your server will not.  Moreover, it's a bit tricky to change the name in EW, since it won't see a change of name from BtnNext.PNG to BtnNext.png as being an actual change.

    Inside EW, rename the button image to something completely different that EW will see as a change (such as to next_button.png), and upload the new image and changed pages.  (Remove the old button file from your server; it won't be used any more.)
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 6:31 PM
  • http://www.zerorelevance.com/BtnNext.PNG   is on the server. Firefox finds it just fine. IE8 loads it but doesn't show it. If you ask IE8 it to print it using Adobe Acrobat, the print preview shows the image no problem. It is not a capitalization issue on a Linux server.

    http://www.zerorelevance.com/BtnNext.png does not exist.
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 8:03 PM
  • Hi everyone, thanks for the help. I've made some updates but am unable to view the site atm. Stupid mac work environment. Can anyone check the site in IE, a few versions preferably, and let me know if the 3 image problems have been resolved? thanks

    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 8:51 PM
  • There was a missing image that wasn't on the server with the name the webpage expected.  This has been resolved.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 8:54 PM
  • So both the next buttons in the header and footer as well as the logo at the bottom are showing up in IE?
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 8:57 PM
  • A note on png alpha channel image transparency in IE6. You usually display them with the alphaimageloader filter for IE (not always, I've had some stubbornly refuse to respect the alpha channel; image prep, perhaps). Google "IE6 png alpha transparency."

    cheers,
    scott
    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 10:12 PM
  • "http://www.zerorelevance.com/BtnNext.png does not exist"

    Time Bandit:  The OP changed it, that's why you see the new name now.
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 10:30 PM
  • "So both the next buttons in the header and footer as well as the logo at the bottom are showing up in IE?"

    Now that the names are right, yes.
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 10:31 PM

All replies

  • Your problem is with IE6. It views fine in IE8. IE6 doesn't know how to show your PNG image files.

    EDIT: I see the three images now that you referred to. They don't display in IE8. The markup in the image's parent is the same as the others so it is a bit of a mystery. I'm looking at it.
    • Edited by Time Bandit Thursday, February 11, 2010 4:20 PM
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 4:08 PM
  • IE6 will show PNG files it just can't handle any alpha-transparency layer.  Even if the PNG has an alpha layer it will still display the image, but with a grey background.

    His other images are PNG images.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 4:13 PM
  • Try resaving that one files.  Sometimes IE has issue if the image file is not saved with the proper color encooding (you may have save as CMYK instead of RGB).  Since your other button images work then its probably just a hiccup (or incorrect setting) with those files when saving.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    Thursday, February 11, 2010 4:17 PM
  • That must be it Chris. IE8 will not show: http://www.zerorelevance.com/FooterBtnNext.PNG

    Nothing to do with the page context.

    Interesting is that if you print the IE8 page of http://www.zerorelevance.com/FooterBtnNext.PNG using Adobe Acrobat the pdf file shows the image just fine.

    It's an IE bug.
    Thursday, February 11, 2010 4:23 PM
  • IE is quirky if image encoding is not exactly correct.  FF is much more pwerful when displaying images of various formats and encoding methods.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 4:44 PM
  • With regards to this "IE6 will show PNG files it just can't handle any alpha-transparency layer.  Even if the PNG has an alpha layer it will still display the image, but with a grey background."

    Is there a better universal image format i should be using, such a jpegs, gifs, tifs? etc. I had been told pngs in the past.
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 5:34 PM
  • pngs are fine as long as you don't use alpha transparency or use a conditional  comment for IE 6.


    MS MVP Expression Tutorials & Help http://by-expression.com
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 5:39 PM
  • Depends on your needs. 
    JPG is best for photograhps or similiar.
    GIF is great for images using less than 256 colors or with very distinct demarcation lines.  Good format for transparent images
    PNG is a great format for mixing GIF type images with JPG type images.  Its more of a universal type format (8-bit replaces GIF well, and 24-bit replaces JPG well.

    I use PNG for transparent images and use a hack to support IE6.  For non-transparent images I use JPG for photographs, GIF for images with very low amount of colors (where quality is not sacrificed) and PNG for everything else.

    What it come down to for me is "use the most optimized format for what I am trying to accomplish where perceived quality will not be sacrificed"
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 5:40 PM
  • Thank you everyone for the quick and clear answers, I'm trying to address the image problems atm but have run into another issue that probably just has to do with my lack of experience. I'm away from my home base (@ work haha) and through an ftp I have downloaded the images, re saved them, then placed the file back in the directory folder for my site. However the first image, (the top nav bars "next" btn) is not showing up in and browser atm??? pls help
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:49 PM
    Thursday, February 11, 2010 6:01 PM
  • Says the Image is not on the server.  Since you are on an Apache server understand that filenames are case sensitive so Mybutton.jpg and mybutton.jpg are two totally different files.  Best to name files in lower case, no spaces.

    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 6:25 PM
  • http://www.zerorelevance.com/BtnNext.PNG is not found because it's not there.  Nothing to do with IE.  Firefox or any other browser can't find it either.

    On the other hand, http://www.zerorelevance.com/BtnNext.png is there.  You are on an Apache server: Case matters.  You are starting from a Windows PC: Case doesn't matter.  Because of this, it's not a good idea to mix upper and lower case.  EW will be happy to show either version of the name, while your server will not.  Moreover, it's a bit tricky to change the name in EW, since it won't see a change of name from BtnNext.PNG to BtnNext.png as being an actual change.

    Inside EW, rename the button image to something completely different that EW will see as a change (such as to next_button.png), and upload the new image and changed pages.  (Remove the old button file from your server; it won't be used any more.)
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 6:31 PM
  • http://www.zerorelevance.com/BtnNext.PNG   is on the server. Firefox finds it just fine. IE8 loads it but doesn't show it. If you ask IE8 it to print it using Adobe Acrobat, the print preview shows the image no problem. It is not a capitalization issue on a Linux server.

    http://www.zerorelevance.com/BtnNext.png does not exist.
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 8:03 PM
  • Hi everyone, thanks for the help. I've made some updates but am unable to view the site atm. Stupid mac work environment. Can anyone check the site in IE, a few versions preferably, and let me know if the 3 image problems have been resolved? thanks

    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 8:51 PM
  • There was a missing image that wasn't on the server with the name the webpage expected.  This has been resolved.
    --
    Chris Hanscom - Microsoft MVP
    On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help

    Get a Complete Website Analysis by Veign
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 8:54 PM
  • So both the next buttons in the header and footer as well as the logo at the bottom are showing up in IE?
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 8:57 PM
  • A note on png alpha channel image transparency in IE6. You usually display them with the alphaimageloader filter for IE (not always, I've had some stubbornly refuse to respect the alpha channel; image prep, perhaps). Google "IE6 png alpha transparency."

    cheers,
    scott
    C'mon, folks. This isn't rocket science, nor neurosurgery. It's "Expression" (singular) "Web" (singular), in that order, followed by a version numeral if you wish to be specific. It is often abbreviated "EW." It is not "Web Expression," "Expressions Web," "Web Expressions," or plain "Expression" or "Expressions." Not using the correct name indicates either ignorance or laziness. Most folks would rather avoid the appearance of either.
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 10:12 PM
  • "http://www.zerorelevance.com/BtnNext.png does not exist"

    Time Bandit:  The OP changed it, that's why you see the new name now.
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 10:30 PM
  • "So both the next buttons in the header and footer as well as the logo at the bottom are showing up in IE?"

    Now that the names are right, yes.
    • Marked as answer by Vinx21 Thursday, February 11, 2010 10:48 PM
    Thursday, February 11, 2010 10:31 PM