homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / WebmasterWorld / Accessibility and Usability
Forum Library, Charter, Moderators: ergophobe

Accessibility and Usability Forum

Rendering of ABBR element in Chrome and Firefox

 3:32 pm on Dec 23, 2011 (gmt 0)

Would I be correct when saying:

The bottom-border property value dotted does not render under Google Chrome?

Is it in fact the bottom-border of the element? Whatever it is, the dotted line appears to be the default display, yes?

I've looked at the dtd at [w3.org ] but simply don't know enough yet to figure it out. Thanks all.



 4:21 pm on Dec 23, 2011 (gmt 0)

The DTD does not, as far as I know, specify a visual style (that is usually the case, even with elements like EM and STRONG which browsers universally map to italic and bold. Lots of decisions are left to the user agent (because if you specify dotted underline or italic, this leaves no clue how to handle the element in a screen reader, for example).

So yes, the visual style varies. Firefox and Opera will underline the abbreviation IF you have defined a title for it. Webkit browsers (Safari and Chrome) will not.

In the case of a webkit browser, it's up to you to specify the visual style with CSS.

I don't think it would be correct to say that the "bottom-border property value dotted does not render under Google Chrome" because as far as I know, it's not set.

You would need to set it in your stylesheet.

It believe it would be correct to say (subject to testing): "By default, Firefox and Opera style the ABBR element with a dotted underline if a title is present, and display the title on hover. Webkit browsers (Chrome and Safari) display the title on hover, but leave it to the designer to provide visual styling for the element."


 12:27 pm on Dec 24, 2011 (gmt 0)

Yes, I understand now that the tone of my description was improper and less precise. I tested under GC, IE, FF and Opera and the results are as you described. Thanks.


 3:54 am on Dec 25, 2011 (gmt 0)

My pleasure. I learned a little something in poking around on this, so that's always fun.

Because I'm lazy, can you tell me what the behavior is in IE (and which version of IE you tested)? Just idle curiosity, but if you remember, I'd appreciate it. Thanks.


 11:48 am on Dec 26, 2011 (gmt 0)

ergophobe, I'm still *under* winXPpro using IE8. The cursor displays the cursor property text value by default when I mouseover an abbr element. I decided to style my abbr elements like so:

abbr, acronym {
cursor: help;
border-bottom: none;

I appreciate that GC and IE8 (and maybe Safari, I don't have it installed now because it became unstable and now my machine refuses to complete a re-install, but thats another problem in my stack,arrgh!) allow the developer to choose a style.


 6:35 am on Dec 28, 2011 (gmt 0)

Thanks for the update!


 1:33 pm on Dec 28, 2011 (gmt 0)

I do the same but, <acronym> has been deprecated in HTML5. The <abbr> element is all alone now. No more confusion on what is an <abbr> and what is an <acronym>.

border-bottom:1px solid #ddd;

I use the cursor:help diligently. Anytime a title element appears, there's usually a requirement for the cursor:help. Not all the time, but frequently.

border-bottom: none;

^ I wouldn't do that. There's a reason why <abbr> is styled by default with a bottom border. It's a visual indicator for the user. Without it, the user won't be enticed to hover and invoke the title attribute of the <abbr>.


 1:06 pm on Dec 29, 2011 (gmt 0)

pageoneresults: DEPRECATED! yes, I know, after I spent the better part of 24hrs creating this [meinsandkasten.com ] to concatenate <abbr> and <acronym> objects. Oh well, I did learn a thing or three, and I've decided to squeeze the last bit of life out of <acronym>. It may have been confusing but I liked the precision of using it for things like COBOL or ROSCOE, you know, abbreviations you could pronounce.

As for the border-bottom: my <abbr> elements are all caps so that is my version of a visual clue. The dotted property value IMHO is redundant and a bit noisy, particularly if the element exists in bunches. Peace.

Global Options:
 top home search open messages active posts  

Home / Forums Index / WebmasterWorld / Accessibility and Usability
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved