SitePoint Sponsor |
|
User Tag List
Results 1 to 17 of 17
Thread: CSS alternative to the alt tag
Hybrid View
-
Aug 30, 2007, 15:41 #1
- Join Date
- Feb 2007
- Location
- Southern California
- Posts
- 1,388
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
CSS alternative to the alt tag
MSIE uses the alt tag to display text when the cursor rests over the image. However, FF uses a different tag. What is that tag?
Thanks!
Steve
-
Aug 30, 2007, 16:15 #2
- Join Date
- Aug 2000
- Location
- Philadephia, PA
- Posts
- 20,578
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Firefox uses the title attribute instead of the alt attribute on image tags. That doesn't mean you should omit the alt attribute which is still used for its intended purposes.
Try Improvely, your online marketing dashboard.
→ Conversion tracking, click fraud detection, A/B testing and more
-
Aug 30, 2007, 18:07 #3
-
Aug 30, 2007, 19:19 #4
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
Basically browsers display the content of the 'title' attribute when the mouse moves over any tag in the page that has a title attribute. Internet Explorer copies the alt attribute to the title attribute for images that do not have a separate title attribute. For consistent results across all bbrowsers simply make sure that all your images have a title attribute.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
Aug 31, 2007, 01:18 #5
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm just wondering what the accessibility implications of this might be. Would a screen reader not read out both the title and alt values? In which case may be repeated if both were specified?
Personally I'd only use a title tag for where it was required, specify an alt tag for all images and ignore Internet Explorer's behavior.
-
Aug 31, 2007, 01:33 #6
- Join Date
- Feb 2006
- Location
- Bedford, UK
- Posts
- 1,687
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Aug 31, 2007, 01:36 #7
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Excuse me for one moment.
There Is No Such Thing As The ALT=""TAG (it's an attribute of the img element).
There, now where were we?Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 31, 2007, 01:40 #8
- Join Date
- Feb 2006
- Location
- Bedford, UK
- Posts
- 1,687
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Dan - put your head between your knees and breeeeathe deeply.... is that better now?
-
Aug 31, 2007, 01:40 #9
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You never know. There might be an <alt> tag in HTML6 or XHTML3.
Birnam wood is come to Dunsinane
-
Aug 31, 2007, 01:44 #10
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry, old habits (there's no title tag either)
Personally I'd only use a title attribute for where it was required, specify an alt attribute for all images and ignore Internet Explorer's behavior.
-
Aug 31, 2007, 01:54 #11
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Aug 31, 2007, 01:49 #12
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You're safe.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 31, 2007, 01:55 #13
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I can see it's going to be one of those days
-
Aug 31, 2007, 02:25 #14
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 31, 2007, 07:53 #15
- Join Date
- Feb 2007
- Location
- Southern California
- Posts
- 1,388
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
Thanks for the help. I'll keep both alt and title in place. Alt is needed to pass validation.
Regards,
Steve
-
Aug 31, 2007, 08:21 #16
- Join Date
- Jun 2007
- Posts
- 33
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
this is a common firefox bug
-
Aug 31, 2007, 08:32 #17
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
As has been pointed out above, this is not a firefox bug. Internet Explorer wrongly uses the alt attribute as it's title text when none has been specified.
The title attribute should be displayed when you mouse over so if this is the effect you want then you should use the title attribute.
However, the right solution is to use the alt attribute on images, use the title attribute on elements that need a title and ignore how Internet Explorer wrongly renders the alt attribute.
Bookmarks