Welcome to WebmasterWorld Guest from 54.196.214.35

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)

Junior Member

5+ Year Member

joined:Feb 7, 2010
posts: 119
votes: 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)

Moderator This Forum

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

joined:Apr 25, 2002
posts:8137
votes: 102


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)

Junior Member

5+ Year Member

joined:Feb 7, 2010
posts: 119
votes: 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)

Moderator This Forum

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

joined:Apr 25, 2002
posts:8137
votes: 102


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)

Junior Member

5+ Year Member

joined:Feb 7, 2010
posts: 119
votes: 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)

Moderator This Forum

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

joined:Apr 25, 2002
posts:8137
votes: 102


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

Senior Member from US 

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

joined:Apr 27, 2001
posts: 12166
votes: 51


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)

Junior Member

5+ Year Member

joined:Feb 7, 2010
posts: 119
votes: 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.