Advanced CSS Links - Spice Up Your Links

Andrea says:

This is ok in Firefox but - as you said - doesn’t work in IE6, because the latter doesn’t support the attribute selection in CSS.

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?

Dave says:

General solution to IE wrapping problem:

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.

Andrea says:

Dave,

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.

daniel says:

surely you could use a {white-space:nowrap;} to avoid the problem above. It might make really long links and paragraphs containing them a bit ugly, so the solution is to not use long links :)

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

Andrea says:

David,

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.

Bert says:

As well as Andreas’ “:after” tip you can also use “:before” , for example

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?