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 12 of 12
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Styling link text in caption

    I have a box, and in the box is a caption which is also a link, the client wants the image centred, with the caption underneath, the caption is a link. I have done a margin left to get the caption to centre, but the link line is showing from the beginning of the box to the centre of the caption. I need to remove the underline of the link, but am having problems with it.

    .lbcfca {margin-left: 50px; font-size: 0.78em;}
    a:link .lbcfca {text-decoration: none;}
    .borders6{
    border-right: 1px solid #CCC;
    border-left: 1px solid silver;
    margin: 0; padding: 5px;
    width: 188px; height: auto;}

    <p class="borders6">
    <img class="center" style="vertical-align: top; margin-left: 57px;" alt="footbal club and academy 2003" height="79" src="images/football_club.jpg" width="70" />
    <a rel="external" title="external link to LBCFCA" href="http://www.lewishamboroughfc.com/">
    <br/><span class="lbcfca">LBCFCA 2003</span></a></p>

    Could be because I am tried that I cant get this.

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by quartzy View Post
    I have a box, and in the box is a caption which is also a link, the client wants the image centred, with the caption underneath, the caption is a link. I have done a margin left to get the caption to centre, but the link line is showing from the beginning of the box to the centre of the caption. I need to remove the underline of the link, but am having problems with it.

    .lbcfca {margin-left: 50px; font-size: 0.78em;}
    a:link .lbcfca {text-decoration: none;}
    .borders6{
    border-right: 1px solid #CCC;
    border-left: 1px solid silver;
    margin: 0; padding: 5px;
    width: 188px; height: auto;}

    <p class="borders6">
    <img class="center" style="vertical-align: top; margin-left: 57px;" alt="footbal club and academy 2003" height="79" src="images/football_club.jpg" width="70" />
    <a rel="external" title="external link to LBCFCA" href="http://www.lewishamboroughfc.com/">
    <br/><span class="lbcfca">LBCFCA 2003</span></a></p>

    Could be because I am tried that I cant get this.
    try to use text-decoration: none for all pseudoclasses you need not only a:link

    http://www.htmldog.com/guides/cssint...pseudoclasses/

    don't forget about specificity, LoVe/HAte:

    http://www.d.umn.edu/itss/support/Tr.../lovehate.html

    best regards

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Thanks but I still have the problem of the margin underline, when I dont want an underline.

    .lbcfca {margin-left: 50px; font-size: 0.78em;}
    a.lbcfca:link, a.lbcfa:hover, a.lbcfca:visited {text-decoration: none;}

    the link is www.tenembee.org.uk/programs.html

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The underline here is coming from the default styling applied to anchors from this anchor:

    Code:
    <a rel="external" title="external link to LBCFCA" href="http://www.lewishamboroughfc.com/">
    <br/><span class="lbcfca">LBCFCA 2003</span></a>
    not from a.lbcfca which does not apply to this link.

    Set text-decoration:none on the anchor, then set it to underline on the span.

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I know it is coming from the default styling on the anchors, but I still want them I just dont want this one to do it.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    So, give this anchor an id and then use that to remove the underline.

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Tht's what I have done, except I used a class, see above it is not working

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Quote Originally Posted by quartzy View Post
    Tht's what I have done, except I used a class, see above it is not working
    You have:

    Code:
    <a rel="external" title="external link to LBCFCA" href="http://www.lewishamboroughfc.com/">
    <br/><span class="lbcfca">LBCFCA 2003</span></a>
    and

    Code:
    .lbcfca {
        font-size: 0.78em;
        margin-left: 50px;
    }
    a.lbcfca:link, a.lbcfa:hover, a.lbcfca:visited {text-decoration: none;}
    The latter does not apply to this anchor because the anchor does not have class lbcfca, the span within it does. You could add this class to the anchor which will remove the underline. Then add the underline back on the span.

  • #9
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    OK I see that the a had rel=external so I deleted it, and added the class to the a. But it is still not working

    a.lbcfca {margin-left: 50px; font-size: 0.78em;}
    .lbcfca a:link, .lbcfa a:hover, .lbcfca a:visited {text-decoration: none;}

    <a class="lbcfca" title="external link to LBCFCA" href="http://www.lewishamboroughfc.com/">
    <br/><span style="margin-left: 50px;">
    LBCFCA 2003</span></a>

    There is still a line where the margin is. In IE8 it is showing OK, but not in Firefox
    Last edited by quartzy; 04-03-2011 at 08:55 PM.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Well, I can't see it on your page, no class on the a. If you've done what you've typed in your last post it's still not right. You (now) have:

    Code:
    <a class="lbcfca" title="external link to LBCFCA" href="http://www.lewishamboroughfc.com/">
    <br/><span style="margin-left: 50px;">
    LBCFCA 2003</span></a>
    Fine - could have left the rel in. But you now have your css:

    Code:
    .lbcfca a:link, .lbcfa a:hover, .lbcfca a:visited {text-decoration: none;}
    which won't apply, because this will only apply to an anchor within an element with class lbcfca, not to an anchor with class lbcfca. You need

    Code:
    a.lbcfca {text-decoration: none;}
    which wil apply to an anchor with that class. Then add

    Code:
    a.lbcfca span {text-decoration: underline}
    which applies to spans within anchors where the anchor has class lbcfca.

  • Users who have thanked SB65 for this post:

    quartzy (04-03-2011)

  • #11
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Code:
    .lbcfca a:link, .lbcfa a:hover, .lbcfca a:visited {text-decoration: none;}
    which won't apply, because this will only apply to an anchor within an element with class lbcfca, not to an anchor with class lbcfca. You need

    Code:
    a.lbcfca {text-decoration: none;}
    which wil apply to an anchor with that class.

    which applies to spans within anchors where the anchor has class lbcfca.
    Well I cant get my head around what you stated, and I am now in a hurry, so I will have to look at it again, it works now so thanks.

  • #12
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by quartzy View Post
    Well I cant get my head around what you stated, and I am now in a hurry, so I will have to look at it again, it works now so thanks.
    SB65 said, and is right, you have '<span class="lbcfca"' and not '<a class="lbcfca"' that's why don't work.

    best regards


  •  

    Posting Permissions

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