Alt text display

wackypanda · 31-03-2011, 01:39 PM

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?

*Japo* · 31-03-2011, 04:34 PM

Quote:

Originally Posted by wackypanda

Does this go here?

I think it goes in the Programming subforum.

You could attach example code in a small HTML file so we could test and look inside, but

Quote:

as long as the width and height attributes are set

it's the browser's fault.

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"/>

Oh by the way, I remember reading a long time ago that there was a bug in Firefox that it couldn't read self-closing tags right if there wasn't a whitespace before the closing />, for example it needed <br /> and would not work with <br/> which is correct HTML. (By self-closing tags I mean the ones that don't come in pairs of <xxx...> and </xxx>, but a single <xxx.../>.) It was ages ago so it must have been fixed, but still give that a shot, or in case you're using an old version of FF. In this case Firefox would need a whitespace before /> like this:

HTML Code:

<img src="/images/foo.png" alt="This is an image" width="400" height="300" />

wackypanda · 01-04-2011, 02:16 AM

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">
	<div id="logo"><img src="Webdoken logo.png" alt="Webdoken logo" width="243" height="73" /></div>
	<h1>Webdoken™</h1>
	<p>Reducing Internet idiocy one punch at a time
	</p>
</div>

The divs are for applying CSS. The alt text displays the same way with or without it, except that with the CSS the alt text adopts the font of the "header" div.

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.

*Japo* · 01-04-2011, 04:53 PM

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&trade;</h1>

http://htmlhelp.com/reference/html40/entities/

wackypanda · 02-04-2011, 03:47 AM

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">
	<head>
		<title>blah</title>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	</head>
	<body>
		<p><img src="Webdoken logo.png" alt="Webdoken logo" width="243" height="73" /></p>
	</body>
</html>

and Firefox still won't display the image void until I remove the doctype declaration. I'm now thinking that the image void is not part of the W3C specs. That would stink.

BTW, the trademark symbol started out as an entity.

It seems that the post preview converted it.

*Japo* · 02-04-2011, 11:00 AM

Quote:

Originally Posted by wackypanda

I'm now thinking that the image void is not part of the W3C specs. That would stink.

Yes and I would be surprised to learn that... Dunno you can take a look at the specification.

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

wackypanda · 02-04-2011, 01:12 PM

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Restoring original display	FlyingTritons	Tech Corner	13	06-03-2011 06:24 PM
public display of affection	stinker	Music, Art, Movies	6	12-07-2009 06:52 PM
Display Adaptors	Wade	Tech Corner	7	18-08-2006 06:22 AM
Settlers 2 Ge Display Problem	Kenta	Troubleshooting	5	11-12-2005 03:22 PM