Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Icon next to Link

    I have the following CSS which will add an icon next to a link (on the right side).

    .externalLink {PADDING-RIGHT: 13px; BACKGROUND: transparent url(external.png) no-repeat right center; }

    This works fine for links which span only one line. It is not working (displayed in center of 2 lines and partially hidden) for links which span 2 lines (more than one).

    How to fix this issue ?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    This works fine for links which span only one line. It is not working (displayed in center of 2 lines and partially hidden) for links which span 2 lines (more than one).

    How to fix this issue ?
    Your issue is not clear. Could you post a link to your page and explain on the basis of that.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by vayumahesh View Post
    I have the following CSS which will add an icon next to a link (on the right side).

    .externalLink {PADDING-RIGHT: 13px; BACKGROUND: transparent url(external.png) no-repeat right center; }

    This works fine for links which span only one line. It is not working (displayed in center of 2 lines and partially hidden) for links which span 2 lines (more than one).

    How to fix this issue ?
    Your issue is not completely clear, but the highlighted portion above is telling the background image to stay flush with the right-hand side of the element and center itself vertically within the element. If you intend for this background image to be docked at the top right then just change that part to "top right" and you will be done with the alignment problem.

    As for the image being partially hidden, well, we really would need to see a test page to help out with that. As abduraooft suggested, please provide us with a link to your page.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    i assume you are setting the anchor to have a class of "externalLink".

    I understand what you are asking but this can only be accomplished ( as far as I know) If you contain the anchor in a <span> or <div> and set the container to have a class of "externalLink".

    As the ANCHOR is contained in the DIV, if the link is on 2 lines, the DIV gets made higher, so the background image is pushed down accordingly.

    the downside is you need to set a width on the DIV as otherwise it will be 100%, which is no use, as the image will be all the way over to the right of the parent container.

    If you can set a fixed width for each link, or the links are in a fixed size container then this will work ok.

    there may be another way, but I can't think of many situations where a link spans on to two lines, so is this really worth worrying about?


  •  

    Posting Permissions

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