Images Display in Firefox and Safari, but not in Internet Explorer

A note from A Beautiful Site’s founder: We developed Surreal to be easy for you and your clients. If you’re a web designer, you should take a look at the simple, hosted CMS that’s changing the way content is managed. Surreal integrates in moments and is trusted by over 18,000 websites. Try it out for free and let us know what you think! Visit Website »

I ran into a little “gotcha” today where an image was displaying properly in Firefox and Safari, but not in Internet Explorer. The weird thing is that it wasn’t showing up as a broken link (no missing image icon with the infamous red ‘X’). Instead, it wasn’t showing up at all:

<img src="/path/to/image/filename.jpg" alt="Sample Image" width="" height="" />

As it turns out, if you have the width and height attributes set to an empty string, IE seems to interpret the width and height as zero, which makes the image not appear. All other browsers, of course, seem to discard the empty attributes.

The solution? Simply remove the empty attributes or plug in the appropriate values.

If you enjoyed this article, please share it with a friend!

3 Responses to Images Display in Firefox and Safari, but not in Internet Explorer

  1. Roman says:

    Maybe, IE is the only right in this case: if you are using some attribute, please, fill it with some meaning value :)

  2. lefter says:

    IE seems to interpret the width and height as zero—-it isnot zero ,it shoud be 1;
    have a try this code;
    var imgsToDisplay=document.getElementById(“imgsToDisplay”);alert(imgsToDisplay.height);

    or
    you can Sample Image

    you can see the picture but the height only 1px;

  3. Pradeep says:

    Infact I have faced a issue where in I did not specify any width or height and IE6 got mad and it did not display the image at all (that was inside a table). I had to explicitly set the image height and width to certain value.So be careful if you are displaying images inside a table and your target audiences use IE6.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>