img alt changing image dimensions

Question

For some reason, when I added an alt tag to some images on my site, it changed their dimensions.

Alt tags

<table id="sidebar">
  <tr id="sidebar">
   <td><img src="images/photos/venetian_sample.gif" alt="venetian blind icon"></td>
   <td id="sidebar"><a href="blinds.html#venetian">Venetian Blinds</a></td>
  </tr>
</table>

No alt tags

<table id="sidebar">
  <tr id="sidebar">
   <td><img src="images/photos/venetian_sample.gif"></td>
   <td id="sidebar"><a href="blinds.html#venetian">Venetian Blinds</a></td>
  </tr>
</table>

They are both using the same stylesheet, and otherwise have the exact same HTML in that div.

Anyone know why this would be? I am aware the images aren't loading. They haven't been made yet. But I would like to solve this in the event they don't load in the future so it doesn't end up making my body disappear.

Answer 1

The reason you are experiencing this "issue" is because your images don't exist yet and therefor they aren't being found. alt tags are meant to display text when an image can not be located and that is exactly what is happening. When you do get around to uploading your images they will be the exact size they are supposed to be (as specified in the CSS or HTML). In short, alt tags don't affect your image's dimensions unless the browser can't display/find said images.

Please see the link below. I edited your HTML to include a picture that the browser could find. As you can see the dog image is not affected my the very long alt tag (which is a full paragraph).

http://jsfiddle.net/RWLFG/4/

Also, here is another example that very clearly demonstrates what I was explaining above:

http://jsfiddle.net/P4X58/2/

(Please note that the alt text will not display in Chrome due to a rendering bug.)

Update: Ok, it appears you are referring to the fact that the text you entered in between your <p> tags isn't visible. To fix this remove float:left from the #container in your CSS. Please see the example below. (By the way, the paragraph text is hidden in both of the links you provided, not really sure why you thought the alt tags had anything to do with the issue, but I digress). Also, there are quite a few bugs in your code, I would highly recommend validating it with the official W3C validator.

http://jsfiddle.net/RWLFG/7/

Answer 2

Browsers will specifically display the alt text when an image isn't found, that's obviously the point of the attribute.

You can specify a width/height inline or through css and it should clip the text at those dimensions. That's good practice anyway for images, so the browser still knows what dimension it should use