Visible acronyms in Internet Explorer

Tutorial categories

Internet Explorer versions younger than the latest version 7 seem to have problems in marking acronyms on a website. Like for almost all problems, there is a workaround for this aswell. All we have to do is write the following code into the websites CSS file, but first of all lets look how this problems looks like in Internet Explorer without the fix.

IE acronym problem picture

Like you can see on the image above, Firefox browsers underline the acronym with a dotted line. If moving the mouse over the acronym, it's definition will show up. This also works in Internet Explorer, but there are no visual hints which tell a website visitor that there is actually an acronym ( or are more acronyms ) in the text. Since a huge percentage of people have Internet Explorer as their prefered web browser, many people won't notice the presence of an acronym. To make acronyms visible in Internet Exlorer, we have to add the following code into the websites CSS file.

CSS Code:

acronym { border-bottom: 1px dotted #767676; }

After applying the code to the websites CSS file go to your browser and refresh the page. Now you should see something like on the image bellow.

IE acronym problem picture

As you can see Internet Explorer is interpreting dotted as dashed. We could have used dashed as setting, but this would have cause a visual mix in other browsers than Internet Exporer.

Download this CSS tutorial by Igor Klajo

Other CSS tutorials

Add to social bookmarking websites