Welcome to WebmasterWorld Guest from 54.159.179.132

Forum Moderators: ergophobe

Message Too Old, No Replies

Rendering of ABBR element in Chrome and Firefox

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

5+ Year Member



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)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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)

5+ Year Member



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)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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)

5+ Year Member



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)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Thanks for the update!
1:33 pm on Dec 28, 2011 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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>.
1:06 pm on Dec 29, 2011 (gmt 0)

5+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month