Comments on: Identifying External Links With CSS http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/ Utterly random, incoherent and disjointed rants and ramblings... Fri, 09 Jan 2009 02:11:00 +0000 http://wordpress.org/?v=2.0.5 by: Luke Maciak http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-11138 Fri, 02 Jan 2009 21:23:08 +0000 http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-11138 [quote post="2673"]he image still has a link indicator, but it’s hidden underneath the image itself. This works primarily because all images in my content are padded uniformly (at 7px, not 6 or 8, don’t make fun of me).[/quote] Well, 7 is a perfectly respectable number. :) I may switch to image based link indicators at some point just to hide them on image links. :P

he image still has a link indicator, but it’s hidden underneath the image itself. This works primarily because all images in my content are padded uniformly (at 7px, not 6 or 8, don’t make fun of me).

Well, 7 is a perfectly respectable number. )

I may switch to image based link indicators at some point just to hide them on image links. P

]]> by: Brad Czerniak http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-11134 Fri, 02 Jan 2009 15:55:23 +0000 http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-11134 Instead of using a character and the :after pseudo-element, I use the icon solution from <a href="http://www.psyked.co.uk/css/auto-matic-link-icons.htm" rel="nofollow">http://www.psyked.co.uk/css/auto-matic-link-icons.htm</a>. At first I was having the same issue with images, but one thing I tried is something like this: <pre lang="css">#content a[href^="http:"] {display:inline-block;padding-right:14px;background:transparent url(/images/external.png) center right no-repeat;} #content a[href^="http:"] img {margin-right:-21px;padding-right:7px;}</pre> The image still has a link indicator, but it's hidden underneath the image itself. This works primarily because all images in my content are padded uniformly (at 7px, not 6 or 8, don't make fun of me). Hope this helps. Instead of using a character and the :after pseudo-element, I use the icon solution from http://www.psyked.co.uk/css/auto-matic-link-icons.htm.
At first I was having the same issue with images, but one thing I tried is something like this:

#content a[href^="http:"] {display:inline-block;padding-right:14px;background:transparent url(/images/external.png) center right no-repeat;}
#content a[href^="http:"] img {margin-right:-21px;padding-right:7px;}

The image still has a link indicator, but it’s hidden underneath the image itself. This works primarily because all images in my content are padded uniformly (at 7px, not 6 or 8, don’t make fun of me).
Hope this helps.

]]> by: Luke Maciak http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-10370 Sun, 12 Oct 2008 20:11:51 +0000 http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-10370 @<a href="#comment-10342" rel="nofollow">Jam</a>: No problem - that's why I post things here - so that people can use it if they want. :) As for you question - I'm not sure what you mean, but I think the answer is probably yes. Do you mean something like: <pre lang="java"><a href="...." class="extlink" rel="nofollow"></pre> or <pre lang="java"><a href="...." rel="nofollow extlink" rel="nofollow"></pre> If yes then you could totally do that. It won't affect any of your old links that don't have the class extlink. @Jam: No problem - that’s why I post things here - so that people can use it if they want. )

As for you question - I’m not sure what you mean, but I think the answer is probably yes. Do you mean something like:

<a href="...."  class="extlink" rel="nofollow">

or

<a href="...."  rel="nofollow extlink"  rel="nofollow">

If yes then you could totally do that. It won’t affect any of your old links that don’t have the class extlink.

]]> by: Jam http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-10342 Tue, 07 Oct 2008 20:37:54 +0000 http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-10342 This is fantastic :) I'm going to have to use it on my blog.. if you don't mind that is ? And can't just have something like: <pre lang="java"><a href="...." / rel="nofollow"></pre> and then have the code for the external link innbetween CSS tags that name it extlink? Sorry if that is confusing, or just plain dumb :) Jam This is fantastic )
I’m going to have to use it on my blog.. if you don’t mind that is ?

And can’t just have something like:

<a href="...." / rel="nofollow">

and then have the code for the external link innbetween CSS tags that name it extlink?

Sorry if that is confusing, or just plain dumb )

Jam

]]> by: Luke Maciak http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-10330 Mon, 06 Oct 2008 19:56:28 +0000 http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-10330 That would probably be an optimal solution, but keep in mind I have an archive consisting of approximately 5 years of daily posts. I could start putting the rel on external links today but it would not work retroactively without running some regexps on the whole archive. I would also need to pre-process the incoming links in the comments to make sure the external ones are appropriately tagged. All in all, not a perfect solution. If I was starting a new blog today, I'd probably consider going that route. That would probably be an optimal solution, but keep in mind I have an archive consisting of approximately 5 years of daily posts. I could start putting the rel on external links today but it would not work retroactively without running some regexps on the whole archive.

I would also need to pre-process the incoming links in the comments to make sure the external ones are appropriately tagged. All in all, not a perfect solution. If I was starting a new blog today, I’d probably consider going that route.

]]> by: aaaaaaaaa http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-10329 Mon, 06 Oct 2008 19:31:51 +0000 http://www.terminally-incoherent.com/blog/2008/10/06/identifying-external-links-with-css/#comment-10329 <a href="http://www.reddit.com/r/web_design/comments/75iq3/identifying_external_links_with_css/c05qegs" rel="nofollow">from reddit</a><blockquote>Why not just stick rel="external" on the links and use a[rel="external"] ? No "hacking" necessary.</blockquote> furthermore, when your CMS processes submitted text, you could remove the rel from links that contain images. still semantically incorrect, i know, but it's better than messing with classes. from reddit

Why not just stick rel=”external” on the links and use a[rel=”external”] ? No “hacking” necessary.

furthermore, when your CMS processes submitted text, you could remove the rel from links that contain images. still semantically incorrect, i know, but it’s better than messing with classes.

]]>