Back Home

Open Designs

Community. Driven.

General Talk: External Link icon in CSS

Bottom of Page

1 to 13 of 13

  1.  
    • CommentAuthorjason
    • CommentTimeJan 9th 2007
     
    Looking for some help creating an external link icon in CSS. I have the following code below, but it doesn't seem to work for some reason:

    HTML

    <a href="http://link.com/" class="external" title="outside link to: link description">link</a>

    CSS

    a.external:after {
    background: url(../images/icons/outlink.png);
    }


    The code below works in Safari and Firefox (but not IE) if I change the CSS to:

    a.external:after {
    content: url(../images/icons/outlink.png);
    }


    Shouldn't the "background:url" element described above work for all browsers (including IE)?


    Thanks,
    Jason
    Edit/Delete Message
  2.  
    Putting your image as a background would only make the text clickable, not the image. At least I think so...

    background:url works for every browser as far as I know.
    • CommentAuthorjason
    • CommentTimeJan 9th 2007 edited by jason on the 09th January 2007 at 19:54:31 EST
     
    Yes...but the code I pasted above (using background:url) doesn't work in Safari or Firefox (The image does not appear.) That's why I'm looking for help.

    Thanks,
    jason
    • CommentAuthorjason
    • CommentTimeJan 9th 2007 edited by jason on the 09th January 2007 at 19:57:12 EST
     
    .
  5.  
    Ah. OK... I see what you're trying to do. What if you tried this?

    HTML

    <a href="http://link.com/" class="external" title="outside link to: link description">link</a>


    CSS

    a.external {
    background: url(../images/icons/outlink.png) right; /*this will align the background image to the right*/
    padding-right: 5px; /*if your outlink.png is, say, 5px wide*/
    }

    You might have to change the link from inline to block.... but try it out... see what happens.
    • CommentAuthorjason
    • CommentTimeJan 9th 2007 edited by jason on the 09th January 2007 at 20:35:29 EST
     
    Great! Thank you. I just needed to add no-repeat to prevent the image from being displayed multiple times over the link itself, so it works now with the following:



    HTML

    <a href="http://link.com/" class="external" title="outside link to: link description">link</a>


    CSS

    a.external {
    background: url(../images/icons/outlink.png) right no-repeat;
    padding-right: 5px;
    }
    •  
      CommentAuthormdizzle
    • CommentTimeJan 9th 2007
     
    Changing the display from inline to block and setting it to be the dimensions of the icon would do it, I think. If you need to keep the list inline, then just use float: left; right under display: block;
    • CommentAuthorjason
    • CommentTimeJan 10th 2007
     
    For some reason IE 6 does not display this icon correctly. (Works fine in Safari, Firefox, and IE 7).

    The active (outlink.png) icon has a gray box over it (that's not intended to be there)...and the hover (outlink.png) icon disappears.

    Any thoughts?
  9.  
    IE6 does not support .png images, fix = change to gif if you don't the aplha transparency.

    IE6 does not correctly understand the :before and :after psuedo-elements, fix = use a different method.
    • CommentAuthorjason
    • CommentTimeJan 10th 2007
     
    Hmmmm... interesting. I used the same :after element and image icon that I found on the wikipedia site...and that looks fine in IE 6. Will have to find out how they did that.
  11.  
    As far as I am aware IE6 doesn't support the :before and :after pseudo-elements (I spelt that wrong above hehe) whatsoever, but have a look to see if the Wikipedia site you mention is using a JavaScript fix as that could overcome the problem, e.g. writing the extra elements into the document on page load and so on.
    • CommentAuthorjason
    • CommentTimeJan 10th 2007
     
    OK, I found out that the problem was caused by some other style elements used for links in other parts of the page. The easiest thing I could do was change the .png file to a .gif and insert the image directly into the html without css. Works in all browsers...not the most elegant solution, but it works. Thanks to everyone for your help.
    •  
      CommentAuthorgnome
    • CommentTimeJan 10th 2007
     
    quotes inside the URL brackets would improve compatibility...
    Many places use 'fixes' for IE 6.

1 to 13 of 13

  1.