This results in users who are not using IE (aka sensible users! :-) ) get the pictures and IE users (poor souls) have plain links… Not an ideal solution… but sometimes it’s not an ideal world sadly. I have to disagree with Andrea though. IE wont be an A grade browser until Microsoft ensures that IE complies with standards that have been in place for years!

Elliott

Code:

#leftcolumn a.exlink
{
border-width: 0px;
text-decoration: none;
padding-right: 0px;
background: none;
}

#leftcolumn a.pdflink
{
border-width: 0px;
text-decoration: none;
padding-right: 0px;
background: none;
}

#leftcolumn a.doclink
{
border-width: 0px;
text-decoration: none;
padding-right: 0px;
background: none;
}

a[href$='.pdf']:before { content: url(/icons/pdf.gif); padding: 0 5px 0 0; }

Also, as well as defining file extensions you can also distinguish links to individual websites;

a[href*='youtube']:before { content: url(/icons/youtube.gif); padding: 0 5px 0 0; }
a[href*='wikipedia']:before { content: url(/icons/wiki.gif); padding: 0 5px 0 0; }

Now, can anyone tell me if it’s possible to have a default icon when all other rules fail?

One rule I have for designing my sites is that I don’t place links within content paragraphs. I place the conversion link after the paragraph to make it stand out, much like my example link.

it’s a pleasure!

I’m all for progressive enhancement, too, but if a solution fails ‘ungracefully’ in an A-grade browser such as IE7, the term doesn’t apply.

In my view Daniel’s – clever – solution may save the day most of the time but would prove unacceptable in still too many cases, as it means that a design constraint limits your editorial choice (in particular if you have relatively narrow text columns) – and as he said, where the rule applies the result tends to be a bit ugly (and sometimes maybe even *very* ugly :o))

From this point of view, Dave’s :after solution seems more reliable: the following works in Firefox and doesn’t break neither in IE6 nor in IE7 (haven’t tried Opera or Safari, though):

a[href$='.pdf']:after {content: ” “url(/graphics/icons/pdf.gif)}

Thanks to all for the tips.

i would see no special reason to dress up IE6 specifically. im all for progressive enhancement.

true. I was hoping for a solution that would work in IE6 and without javascript, but after all your second option would work fine in most scenarios, so as long as it isn’t critical to have the links properly ‘dressed up’, why not.

Use CSS :after speudo selector with the content attribute for browsers that support it, or use JavaScript to loop though the links and add the image.

Unfortunately, this approach breaks in IE7 – precisely because IE7 *does* support the attribute selection!

Indeed, if your link wraps over two lines, you’ll have an unpleasant surprise.

I think the way IE works is as follows: for the background’s dimensions calculation, you will not have a slim box of the height of a line wrapping like a snake over different lines, but a single box that holds them all. As a consequence:
+ the background’s right will be the rightmost point of any of the lines involved (not of the last, as in Firefox);
+ the background’s height center will be the center of the height of all the lines combined (again, not only of the last);
+ however, the right padding will be added only to the last line;
= Disaster: the image will display to the right of the block of text (not of your link’s last line) and somewhere centered between all the lines of the link (usually you’ll only see a small part of it at the right of the first line, covered by the link’s text).

The same applies to IE6 if you extend this technique by using classes to mark the links you want to apply such a rule to.

I met this problem a couple of years ago when I tried to implement exactly the same solution, and had to use an ugly workaround which would only work under certain conditions – which were met in the specific context pf my problem. Maybe somebody has a general solution for it?