WP-Mix

The developers at Firefox decided to add their own default styles for <abbr> and <acronym> tags — completely ignoring the fact that many sites already include their own styles for abbreviations and acronyms. The result is an ugly double underline and/or text-decoration in Firefox browsers.

Here is a screenshot of the double-underline issue.

News flash

News flash to Firefox developers: many sites already have applied their own styles for these elements. So you’ve just messed up the appearance of many well-designed sites when they are viewed via your browser.

For developers and designers who provide their own CSS for the abbr and acronym tags, this amateurish, ill-conceived move by Firefox makes your content look bad. And I’ve read that Chrome will soon be following suit by adding their own default styles, likewise completely snubbing designers in favor of their own generic preferences.

How to fix

Fortunately, it’s trivial to fix the issue by overriding the browser’s default styles. Unfortunately, it requires the use of !important to do so. Here is an example:

abbr[title], acronym[title] {
	cursor: help !important; 
	border-bottom: 1px dotted #777 !important; 
	text-decoration: none !important; 
	}

Note that you also may want to check and adjust any related properties, such as line-height, et al.

Stop breaking things

So the “double-underline” or “double-decoration” issue easy to resolve, but the problem is that we shouldn’t have to do this in the first place. How many designers have time to keep track of their <abbr> and <acronym> tags, of all things? So for the next several years and beyond, users of these browsers are going to see ugly, confusing double underlines on all abbreviations and acronyms. Just because of some hasty, ill-conceived decision made by myopic browser developers. </rant>