Adding support for image icons which denote offsite links

One of the improvements I’ve been wanting to make to my blog theme is support for icons next to URL links which indicate if the link is offsite, meaning that it’ll cause you to browse to another domain. As you can see from this search there are lots of different approaches largely because not all browsers support the latest standards. For the time being I’ve opted for a CSS only solution which means it’s only supported in Firefox (2.0 is what I’ve tested) and IE7. IE6 and less will continue to render the links normally without any offsite icon indicator. I’ve opted for this route because it was really easy to add the following CSS.

1 #centercolumn a[href^="http://"] { 2 background: url(/blog/themes/stevewhite/images/external.png) 3 no-repeat center right; 4 padding-right: 13px; 5 } 6 #centercolumn a[href^=""], 7 a[href^=""] { 8 background: transparent; 9 padding-right: 0; 10 }

This means that offsite links appearing only in the center column will be denoted with an icon like this offsite link icon. Supporting IE versions < 7 is a bit more involved than I have time to $d(spelunk). I came across the above solution by digging into the theme used for $g(MediaWiki) which is the wiki engine the Delphi R&D team uses. It has a solution for IE6 but it’s more involved than I care to dig into. On my blog, IE7 usage has eclipsed IE6 (50% to 44%) so it’s a matter of time before this becomes a non-issue anyway. Regardless, if someone has a simple solution that works for IE6 which they’d like to share I’d be more than happy to add it.

5 thoughts on “Adding support for image icons which denote offsite links

  1. A few notes:
    1) The CSS is being cropped on the right.
    2) Sometimes when I try to post a comment, there’s a box requesting the code and no image for it.
    3) I’ve just noticed that, while posting this comment, the comment box runs over the "Navigation" box on the right… Don’t remember this happening before…
    1) Took some PRT-SCRs if you cant to have a look.
    2) Using Firefox

  2. Typos in previous comment:
    "cant to have a look" => "want to have a look";
    "CSS is being cropped" => "CSS listing is being cropped".
    Usually check what I type, but was distracted by the "side-effects"! 🙂

  3. Thank Fernando, I had left some of the bits from my experiments trying to get the icons to work on IE6. Regarding the CAPTCHA control I’ve seen similar problems on other blog engines in Firefox as well. For example, I have to use IE to post comments on since I can’t see the image in FF.

  4. Naturally, your external link-icons shows correctly in Opera too, at least in version 9.20 that I use.

Comments are closed.