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

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.

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.

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.

Thanks for the update!

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>.

abbr{
cursor:help;
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>.

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.