Alt text display
Does this go here?
I'm doing some light work with HTML and images for an assignment. In IE and Chrome, if the images fail to load, the alt text displays inside a box with the same dimensions as the image, as long as the width and height attributes are set. In Firefox the alt text displays as a line of regular-looking text. I would prefer users to know that there is supposed to be an image there. Is this my fault or the browser's? |
Quote:
You could attach example code in a small HTML file so we could test and look inside, but Quote:
BUT I doubt that any of those browsers is wrong about such a basic thing. I think it's likelier that there's something wrong with the code, and then some browsers are more robust in tolerating and interpreting deviations from the HTML standard. Let me guess, are you using quotation marks around every attribute value? The standard is double quotation marks, maybe single ones are just as good, but to be sure it should look like this, please note all the quotation marks: HTML Code:
<img src="/images/foo.png" alt="This is an image" width="400" height="300"/> HTML Code:
<img src="/images/foo.png" alt="This is an image" width="400" height="300" /> |
Thanks. I tried the whitespace thing, but no difference. One requirement for the assignment is that the code must validate as XHTML 1.0 Strict. If it doesn't, I get zero. So I think I've been quite anal about code correctness. Still, there's always room for things to go wrong.
Sample code: HTML Code:
<div id="header"> Most of my Firefox testing has been with 3.6.13, although I'm quite sure I've also tested it with 3.6.15. |
It looks simple enough, whatever causes this must be in the CSS. Try not applying the CSS (for example remove the divs), and if then the image void displays with the correct size in FF, you can start hunting down the line that causes this behavior.
By the way I think it's better to use entity codes to display symbols such as the trademark sign, to avoid trans-encoding problems: HTML Code:
<h1>Webdoken™</h1> |
:) I only posted that part of the code because I thought the problem had to be in there. As it turns out, the image void displays correctly if I omit the doctype declaration, and only then. I can literally strip everything until I get this:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> BTW, the trademark symbol started out as an entity. :) It seems that the post preview converted it. |
Quote:
http://www.w3.org/TR/xhtml1/dtds.htm...strict.dtd_img By the way, it seems the space before "/>" is now part of the standard for some reason: http://www.w3.org/TR/xhtml1/#C_2 |
There is this Mozilla bug report from 1998, which confirms that this behaviour is (was?) intended. I haven't found out if this is due to W3C specs, although the conversation in the report implies that it was the spec back then.
Edit: Seems it is also a HTML5 spec, although that spec recommends that a missing image icon be displayed as well. As it is, a CSS extended property has to be added (but darned if I can figure out where) to force the icon to appear. |
The current time is 12:19 AM (GMT) |
Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.