Man, IE sucks. We deal with it every day, but the lack of support for standards really makes developers jump through hoops sometimes for stupid little things. At work we’re adding some icons next to links to better identify them. A slideshow, community links, video etc etc. Normally this would be really simple. Something nice and automated like the CSS guy outlined would be nice. Except……

If the link spans two lines, IE just freaks. It doesn’t recognize the fact that the a element is two lines, it now thinks its a huge a element so the icon gets all cut off and wierd looking. Also, :after CSS support in IE doesn’t work, so it takes that option off the table.

So having said all that, we settled for a solution where we drop a tag, I chose the <i> tag for “icon” (I liked it better and its shorter then using the span tag and I use <em> for italics) after the end of the text inside the a element, and then identify the type of link with a class on the a tag. Not the ideal solution as now this isn’t automated and we have to manually identify the links, but to me it seems to be the only solution that reliably works in all browsers (IE6, IE7, FF, Safari). Alternatively, for automation, all it would take is a little jQuery to go through the hrefs on the page and drop in the <i></i> tag and class on the <a> tag.

<style type="text/css">
.asdf i {
background:url('url of your image') no-repeat;
height:10px;
vertical-align:top;
width:10px;
}
</style>

<a class="asdf" href="yourlink">Your link text goes here<i></i></a>