I have been working on a site which includes some abbreviations so I thought the obvious thing to do was to use the HTML abbr tag to explain them.
Nice browsers like Opera and Firefox display abbreviations with a blue dashed line underneath, when you hover over the text a tooltip pops up to display the title text of the abbreviation. So you can do something like this to expand an abbreviation
<abbr title="Hyper Text Markup Language">HTML</abbr>
Chrome & Safari offer the tooltip feature but don’t show the dashed underlining unless you provide a style for the abbr tag. Internet Explorer is different again, IE7 & IE8 will display the tooltips (but not very reliably) but ignore the styling, IE6 doesn’t do anything.
To get working properly in all browsers I thought I would try adding a class to each tag to see if Internet Explorer liked that. I had already styled the abbr element to keep Chrome & Safari happy so I just added a selector for a new abbr class to the existing style.
abbr, .abbr {
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: blue;
}It worked better than I could have hoped, I didn’t need to add class=”abbr” to any of my html abbr tags at all. It seems that just declaring a style for a class of .abbr makes Internet Explorer work like the other browsers. And as a real bonus it also works in IE6 and IE8 behaves more consistently too!
I don’t know why this works and perhaps I am not the first to discover this but I thought it was worth sharing.
Tags: abbr, Browsers, Chrome, CSS, Firefox, HTML, internet explorer
Your definition beings with “abbr, .abbr {” so you are defining the CSS for all abbr elements, not just the class “abbr” in which your style started as “abbr.abbr {” or “.abbr {“. Best regards, Julian.
You are quite right.
In fact I think the whole article is a mistake, which will teach me to get excited about “new discoveries” and rush out helpful solutions.
I think the real reason that IE6 behaves nicely with the abbr tags is because I have included the following code in the head section
It is the html5 shiv which is making things work properly, not my CSS magic at all. I suspect I made both changes about the same time and completely misinterpreted the cause of my success.