SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 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

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    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.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by StevenHu View Post
    MSIE uses the alt tag to display text when the cursor rests over the image.
    That is incorrect behaviour - the alt tag is only supposed to be for displaying alternate descriptive text when the image is not available (and is required for strict doctypes). The title tag should be the only one that creates the popup text.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    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="^$">

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    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.

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    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.
    ^ what he said.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    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?

  8. #8
    SitePoint Wizard bronze trophy Tailslide's Avatar
    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?
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  9. #9
    SitePoint Author silver trophybronze trophy

    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

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    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.
    Thought I'd better correct those before Dan's head exploded

  11. #11
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're safe.

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    (there's no title tag either)
    Yes, there is. It's even required!
    Code:
    <html>
      <head>
        <title>Document Title</title>
      </head>
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    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

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  15. #15
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)


    Thanks for the help. I'll keep both alt and title in place. Alt is needed to pass validation.

    Regards,
    Steve

  16. #16
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is a common firefox bug

  17. #17
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Malatya View Post
    this is a common firefox bug

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •