SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    External Link Class

    On my website all external links have a little icon next to them showing that they point to somewhere other than my site.

    This is done by putting a class="ext" attribute in the necessary <a ...> tags. In conjunction with the following line in the CSS, just about all works as expected.

    HTML Code:
     .ext { padding-right:15px; background:url(arrow.gif) no-repeat 100% 65%; }
    The only problem occurs when viewed in Internet Explorer 6 and a link spans more than two lines of text. The right-hand padding stays there but the icon is nowhere to be seen. Of course this looks rather ugly and I'd like to fix it.

    Anyone got any idea what I can do?

    Thanks in advance

    -Sam
    Sam Hastings

  2. #2
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't really investigate the rest of your css, but anyway, try adding position: relative. Sometimes it helps.

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Sorccu, but that doesn't seem to work when the anchor text spans two lines. When a carriage return is forced by the length of the text it makes the leftmost pixels appear on the right hand side of the icon.

    Also in Firefox it makes the icon repeat itself on each line of the link.

    -Sam
    Sam Hastings

  4. #4
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, well. Seems like a bug to me, atleast in IE. I wasn't able to come up but with one solution; making sure that the link stays in one line (using white-space: nowrap), and adding position: relative. It sure ain't a pretty solution, but it works.

    Let's hope that Paul finds this thread and shares us his wisdom

  5. #5
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Renewing thread for a possible solution?

    Anyone got news about a solution regarding this recently, especially in IE?

    PS. Seems that in FF1.5+, it displays properly now. I have mine setup almost like the above...

    Code:
    a.external { 
    	background:url("icon_external.gif") center right no-repeat;
    	padding-right:14px;	
    }

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was looking for a similar solution recently but didn't end up looking too hard and opted for this instead which doesn't show an icon in IE:

    Code:
    a.external:after { content: " " url(/images/external.gif); }

  7. #7
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Tyssen: What would that be in terms of how I declared it? Just confused on how that "content" keyword works w/ additional style-declarations. TIA

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Content inserts content either before or after the content of the element it's attached to. In my case I'm inserting a space and then an image after the content (ie the text) of the anchor.

  9. #9
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh. I see. So no need for having that extra padding declaration, or could it be used instead of assigning the " " (space)? TIA


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •