Infinite Web Design

Following my rant about marking links to PDF files clearly I have decided that it is only right to offer some solutions to those of you who may need them. As such I am including a number of options for the icon I recommended using next to PDF links and a CSS solution for placing them there easily.

The icons are:

In order to get them to display properly you can add some simple css to your style sheet and a class to the PDF links. (Or to a div containing many PDF links)

a.pdf:link{
background-image: url(../images/icon_pdf.gif);
background-repeat: no-repeat;
padding-left: 18px;
background-position: left center;
}

This will set the background image of a link with the class of “pdf” to show the PDF icon (icon_pdf.gif), and to pad the text 18px (the width of the icon + 2) from the left.

OR you can use

.pdf:before {
display: marker;
content: url(../images/icon_pdf.gif);
}

This will place the PDF icon before the link with the class “pdf”. However, this doesn’t appear to align the icon vertically with the text as well as the previous method.

These techniques appear to work fine in FireFox 0.9 while failing gracefully in IE 6 by simply having no effect. I’m working on a solution that will appear in all browsers but this is a start. If anyone knows how to make this work in more browsers please let me know.