Contact
LifestreamPerhaps I’ve mentioned this before, but I wanted to add those nice little icons (like 
) that you can see at, among other places, Wikipedia designating external or off-site URLs. Should be simple enough to do right? Not so.
There are essentially two ways to go about this and both use CSS. One that will work, more or less on all browsers save for cosmetic snags and one that uses CSS3 which will only work on Mozilla and other modern browsers.
CSS1/2
[css]a.extlink[class] {
background: transparent url(external.gif) center right no-repeat;
padding-right: 10px;
}[/css]This method obviously requires one to add class=”extlink” to all external links. That is a bit of a hurdle to overcome. But with CMSs there are plugins. There is for instance one already for Wordpress. For Nucleus there is something related, namely SEO (Search Engine Optimized URLs). A very basic edit saves you one extra plugin.
Just add class=”extlink” to line 81 and all external links will get that class AS WELL as encoded / masked URLs. NOTE that the [class] addition, or indeed any [attribute] is a way to exclude IE. More in the caveats below …
CSS3
[css]a[href^="http:"] {
background: transparent url(”external.gif”) 100% 50% no-repeat;
padding-right: 10px;
}
a:not([href*="battleangel"]) {
background: transparent url(”external.gif”) 100% 50% no-repeat;
padding-right: 10px;
}[/css]Two approaches. The former just picks up the HTTP part and assumes that urls starting with HTTP are external. But that kind of assumes that you took care to separate local from foreign URLs. The latter, and niftier design, finds your domain, like battleangel (or other pieces of the URL, /guestbook or whatever) and sets the style accordingly.
Padding is obviously related to the size of the icon. But this seems to be the definitive way of aligning the icons. Well, actually, it would be more optimal to have the icons before the link but that just didn’t look as snazzy.
Possible caveats include wrapping problems of one type or another. Everything seems fine in Firefox regardless, save for the small underline anomaly that happens with documents declared as XHTML.
IE is of course another matter and completely chokes when an long URL attempts to wrap. What you can do is add white-space: nowrap;, forcing URLs not to wrap. But that is dangerous and may break layouts. In the end I chose to exclude IE altogether with the [class] approach. If I find a nice way to make IE work like intended, I’ll obviously revert. Chances are that whenever they fix IE, and make CSS3 work among other things, this problem will just go away.
Icons: 
More icons: Micro Icons Qbullets
