ALT tags not showing

@ThePostmanApr 30.2009

Hello

Neither in IE8 nor Safari can I see my ‘alt’ tags using the following:

[CODE]<td width=”175″> <div style=”border-right: 1px solid blue;”> <a href=”newMacimagemenupage1.html”><img src=”logo_Apple1_Red54.jpg” WIDTH=57 HEIGHT=54 alt=”Apple Mac logo”/></a> <p><b>Apple Mac</b></p> </div> </td>[/CODE]

What might be the reason for that, please?

Thanks.

to post a comment

HTML

12 Comments(s) _↴

@tracknutApr 30.2009 — #Do you perhaps mean to use the "title" attribute? The alt string is used when the image is not found, whereas title is used to display a tooltip when you hover over an image.

Dave

@aj_nscApr 30.2009 — #Well, first of all that's not any type of valid HTML that you showed in your post, attribute values must be encased in quotes (double " or single '). The reason why I said that is that any 'weird' behavior by your page should first be attributed to invalid markup, unless you know what the problem is specifically.

Secondly, what do you mean your alt attributes aren't showing? In older versions of IE alt attributes used to show up as tooltips when you hovered over the image, but this isn't the actual purpose of alt attributes. If you want to show a tooltip with the content of your alt attribute, then use the title attribute on your img tag.

@ThePostmanauthorApr 30.2009 — #Hello

Thanks for your posts.

I thought the alt attribute was used for people with images turned off?

Regarding the ' and "", the 'alt' text does not show if I use:

WIDTH="57" HEIGHT="54" alt="Apple Mac logo"

or

WIDTH=57 HEIGHT=54 alt="Apple Mac logo"

but I take your point. If I use the following:

[CODE]<a href="newMacimagemenupage1.html"><img src="redApple1.gif" alt="Apple Mac logo"/>[/CODE]

- then the 'alt' text does appear, but if I use:

[CODE]<a href="newMacimagemenupage1.html"><img src="logo_Apple1_Red54.jpg" WIDTH="57" HEIGHT="54" alt="Apple Mac logo"/></a>[/CODE]

as I mentioned in my original post, I cannot see it anywhere.

Thanks.

@CharlesApr 30.2009 — #attribute values must be encased in quotes (double " or single ')[/QUOTE]That's not true in the least. No quotes are required as long as the attribute value follows a simple rule, "The attribute value may only contain letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45), periods (ASCII decimal 46), underscores (ASCII decimal 95), and colons (ASCII decimal 58)."

The quotes are required in XHTML but then so to are lower case attribute names. But the trailling slash in the IMG tag violates the HTML rules. We have here the usual confused mix of HTML and XHTML. Best to get rid of those traillling slashes and stick with HTML.

@ThePostmanauthorApr 30.2009 — #OK, just to clarify. These pages will never see a server. They will be burned onto a CD.

The backslashes, as in "newVistaimagemenupage1.html" refer to files/folders on my C drive.

Cheers

Steve

@WebJoelApr 30.2009 — #<img src="redApple1.gif" alt="Apple Mac logo"[B]/>[/B][/QUOTE] should be a 'whitespace' before the "/" else older browsers might mistake this as the beginning of a shell-command. <img src="redApple1.gif" alt="Apple Mac logo" />[/QUOTE] should stop validation error citation.

While alt="[I]foo[/I]" is required for images (Accessibility s.508) you also use title="[I]foo[/I]". Just not by itself. alt="" is required for images.

@ThePostmanauthorApr 30.2009 — #Hello WebJoel

Thanks for that. I have added the white space, so I now have:

[CODE]<td width="175"><div style="border-right: 1px solid blue;">
 <a href="newMacimagemenupage1.html"><img src="logo_Apple1_Red54.jpg" WIDTH=57 HEIGHT=54 alt="Apple Mac logo[B][COLOR="Blue"]" /[/COLOR][/B]></a>
 <p><b>Apple Mac</b></p>
 </div>
 </td>[/CODE]

but for some reason that ALT tags (there is a logo there) are not showing when I place the mouse over the logo.

@CharlesApr 30.2009 — #You're mixing HTML and XHTML. That blue "/" needs to be removed. And if you want a "tool tip", which you seem to, use the "title" attribute.

@ThePostmanauthorApr 30.2009 — #Hello Charles

I've removed the forward slash and used title and see it now!!!

Thanks to you and for all those who helped!!!!

Cheers

@felgallMay 01.2009 — #Don't forget to keep the alt attribute so that there is something to display for those who can't see the image so as to tell them what the image tells those who can see the image.

@ThePostmanauthorMay 01.2009 — #Hello Felgall

Thanks for that.

This is what I have at the moment and which seems to work:

[CODE]<table border="0">
 <tr valign="top" align="center">
 <td width="175">
 <div style="border-right: 1px solid blue;">
 <a href="newXPimagemenupage1.html"><img src="WinXp_use.jpg" WIDTH=87 HEIGHT=54 [B][COLOR="Blue"]title[/COLOR][/B]="XP logo"></a>
 <p><b>Windows XP</b></p>
 </div>
 </td>[/CODE]

But if I need to use the ALT tag in addition to TITLE, where would I squeeze that in?

Thanks

@CharlesMay 01.2009 — #Well, you shouldn't be using a TABLE for layout but the DIV part would read:

&lt;div style="border-right: 1px solid blue"&gt;
 &lt;a href="newXPimagemenupage1.html" type="text/html"&gt;&lt;img src="WinXp_use.jpg" WIDTH=87 HEIGHT=54 title="XP logo" alt="XP"&gt;&lt;/a&gt;
 &lt;h4&gt;Windows XP&lt;/h4&gt;
 &lt;/div&gt;

Also in #HTML _↴

Newbie question (can't find answer anywhere)How To Get Constant (but Proportional) List Box Sizes preventing image copying

Success!

Help @ThePostman spread the word by sharing this article on Twitter...

Tweet This

ALT tags not showing

12 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

ALT tags not showing

12 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #HTML _↴