It didn’t take long at all before the linkdumpish nature of this blog so far caught up with me: I grew tired of adding class="external_link" to almost all the <A> tags. I also did not like how the icon did not match the visited link color. I corrected both of these today.
Square visible beneath, yuck!
Square with a difference
Visited version
Finished icon
I wanted the URL icons to appear only in the blog entries themselves but not if it’s a link to this site or a relative link so to finish, I changed the CSS from having a
A.external_link definition to the following:
.entry_content A {
background-image: url('images/url-external-trans.png');
background-repeat: no-repeat;
background-position: right top;
padding-right: 13px;
}
.entry_content A:visited {
background-image: url('images/url-external-trans-visited.png');
}
.entry_content A[href^="http://webgurus.com"],
.entry_content A[href^="http://new.webgurus.com"],
.entry_content A[href^="http://www.webgurus.com"],
.entry_content A[href^="/"],
.entry_content A[href^=".."],
.entry_content A[href^="javascript"]
{
padding-right: 0px;
background-image: none;
}
C’est fin! Any modern browser will display this link with an icon and this one without. At worst, any modern browser will a partial or broken implementation of CSS will either display the icon for all links or for none at all. I can live with either. But IE 7 is not quite a modern browser. If there was a link with a <br/> or one that wrapped over two lines, the icon was displayed in the wrong location, at the top right of the first line and not at the end of the link as other Mozilla and WebKit browsers do. I used a bit of jQuery to compare the link’s height with the line-height in CSS and removed the background image and appended a normal <img> if the link was broken up over more than one line.
