...

View Full Version : Styling link text in caption



quartzy
04-03-2011, 02:33 AM
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.

oesxyl
04-03-2011, 03:55 AM
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/cssintermediate/pseudoclasses/

don't forget about specificity, LoVe/HAte:

http://www.d.umn.edu/itss/support/Training/Online/csstips/lovehate.html

best regards

quartzy
04-03-2011, 05:51 PM
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

SB65
04-03-2011, 06:17 PM
The underline here is coming from the default styling applied to anchors from this anchor:


<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.

quartzy
04-03-2011, 06:53 PM
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.

SB65
04-03-2011, 06:55 PM
So, give this anchor an id and then use that to remove the underline.

quartzy
04-03-2011, 07:24 PM
Tht's what I have done, except I used a class, see above it is not working

SB65
04-03-2011, 07:33 PM
Tht's what I have done, except I used a class, see above it is not working

You have:


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

and


.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.

quartzy
04-03-2011, 07:50 PM
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

SB65
04-03-2011, 07:55 PM
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:


<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:


.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


a.lbcfca {text-decoration: none;}

which wil apply to an anchor with that class. Then add


a.lbcfca span {text-decoration: underline}

which applies to spans within anchors where the anchor has class lbcfca.

quartzy
04-03-2011, 08:21 PM
.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


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.

oesxyl
04-04-2011, 06:44 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum