Links not accepting class change

HTML & CSS
1

I am trying to apply a class to a link that is picking up style from the div that it is in. Here is the css for that existing style from the div:

}
#content {
float: left;
padding: 5px;
width: 680px;
min-height: 550px;
height: auto;
}
#content a:link {
color: #000000;
}
#content a:visited {
color: #000000;
}
#content a:hover {
color: #DA830C;
text-decoration: none;
}

I created the following class in order to change the color.:

a.center_link a {
	color: #CC3366;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
a.center_link:link, a.center_link:visited, a.center_link:hover {
     color: #CC3366;
}

I thought that by applying a class to this link it would override whatever styling the Div Content puts on it but I can’t get it to change no matter what I try so I must be wrong. Some help would be appreciated. Here’s the relevant HTML:

<div id="content"><!-- InstanceBeginEditable name="content" -->
<div id="affiliate-div">
<!-- start new product -->
<form method="get" action="http://www.dpbolvw.net/interactive" target="_blank">
<table border="0" width="665" cellpadding="5" cellspacing="4">
<tr>
<td valign="top" width="17%"><img src="http://img3.musiciansfriend.com/dbase/pics/products/tn/4/3/4/375434.jpg" border="0" alt="Musician's Friend Vintage Electric Guitar Case"/></td>
<td valign="top" ><p><b><font size="4">Musician's Friend Vintage Electric Guitar Case</font></b></p>
<p><font size="2">If you love the look of a classic wooden case, the Musician's Friend Vintage Electric Guitar Case is the one for you! It's constructed of 5-ply, cross-grain Luan plywood and features a distressed, leather-like finish. The case is extremely durable and road-ready. Plush interior lining, internal storage pocket and lockable. All hardware is triple chrome-plated. The case's carrying handle is ergonomically designed and padded for added comfort. Body area: 18-3/4&quot;L x 12-3/4&quot;W. Total length: 42&quot;.</font></p>
<hr>
<input type="hidden" name="pid" value="2849393"/>
<input type="hidden" name="aid" value="10381297"/>
<input type="hidden" name="cjsku" value="544769"/>
<input type="hidden" name="url" value="http://www.musiciansfriend.com/product/Musicians-Friend-Vintage-Electric-Guitar-Case?sku=544769"/>
<input type="submit" value="See More Details"/> </td>
</tr>
</table>
</form>
[B]<a href="hardshell_cases2.html" class="center_link">MORE</a> </div>[/B]
<!-- InstanceEndEditable --> </div><!-- end #content div -->

Thanks

2

The problem is that the new rules you have set are overridden by the previous rules because an ID selector has much more weight then a class selector.
This should work for you :slight_smile:

#content #affiliate-div a.center_link {
	color: #CC3366;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#content #affiliate-div a.center_link:link, #content #affiliate-div a.center_link:visited, #content #affiliate-div a.center_link:hover {
     color: #CC3366;
}

Also, do you realize that this code selects an anchor inside an anchor?

a.center_link a {
	color: #CC3366;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

Remove that extra “a” on the end lol :). New CSS posted above.

3

Thanks for your help.

Re: the code: Yeah I tried numerous variations. I probably had it right a some point but nothing was working so I kept throwing stuff in there.

So if I understand correctly, applying class to the link itself will not override the style applied by the containing div??

I realized the #affiliate-div was in closer contact to the link in question but I thought I could simply apply a broader class that i could use elsewhere (outside the #affiliate-div) if I wanted??? I guess not.

4

“in general” (have I prefaced that sufficiently) :wink:

If you specify an ID in a style rule it will win out over anything else.
If you specify a class in a style rule, that rule will trump anything except an id.

If you specify two elements, they’re more specific and will trump one of the same element. For example

.class1 .class2 {…} will trump
.class1 {…}

regardless of order, in fact even .class1 p {…} will trump .class1 {…}

Within those guidelines, the style applied last is the one that counts. That’s why Ryan’s technique is standard, you just build on the old style rule to make it more specific (the technical name for this behavior is called, specificity)

5

I gave a nice link for you to look at. It can tell you how to calculate specificity.

In the original CSS you had, you had an (#) Id selector. That has a high specificity value, and just simply selecting a class in CSS will not overide it. You just have to calculate specificity :).

Chronicle helped you above to help understand, but I strongly recommend you look at the link I provided in my first post.

6

Nice explanation guys.

I’ll check out the link

7

Thanks again and I did read the Specificity link which was very helpful. I still have one issue and another general question:

Why is the “Center text” attribute still not being applied if all the others are??

New css:

}
#content #affiliate-div a.center_link {
	color: #000000;
	font: bold 100% Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}
#content #affiliate-div a.center_link:link, #content #affiliate-div a.center_link:visited, #content #affiliate-div a.center_link:hover { /* Note: Shorthand for listing pseudo classes */
	color: #000000;
	text-align: center;
	font-weight: bold;
}

New HTML:

            </form>
                     <a href="hardshell_cases2.html" class="center_link">MORE</a> </div>
        <!-- InstanceEndEditable -->

Also:

Is it necessary to still declare


#content #affiliate-div a.center_link

If I am declaring:

}
#content #affiliate-div a.center_link:link, #content #affiliate-div a.center_link:visited, #content #affiliate-div a.center_link:hover

Thanks

8

Nope. You’re covered.

Centering is one of the most difficult things to do in CSS. Part of the problem is that text-align: center is the only place the word “center” appears anywhere in CSS, but it’s not valid in many cases. Another trick is to set the left and right margins of the element to the same value. This will also force the object to center. Frequently the “auto” value will work absolute magic when other things have failed.

Typically the rule of thumb I use is setting margins for centering block elements in a container and setting text-align: center for centering inline elements inside a block element. However, that should mean your links would center. Since they’re not, try the left and right margin technique. You never know.

9

The problem is is that the anchor is an inline element, so its’ width is shrink to fit. It will center the inline nodes INSIDE teh anchor. So thus it will only center the text.

You can give display:block; to the anchor thus its’ width will go all the way out as far as it can, and with the text-align it will center the text.

Or you can set text-align on the parent and then it will center the anchor :slight_smile:

Also:

Is it necessary to still declare


#content #affiliate-div a.center_link

If I am declaring:

}
#content #affiliate-div a.center_link:link, #content #affiliate-div a.center_link:visited, #content #affiliate-div a.center_link:hover

Thanks

If you don’t mind the :active and :focus getting the defaults then sure, the second code will be fine.

10

Thanks for your explanation:
I tried “auto” which did not work so I went to L&R margins. I was hoping that just an equal setting would center it but it only moved it right a little bit. I guess I have to play with the number until it looks right but there must be an easier way??

I have this now:

}
#content #affiliate-div a.center_link:link, #content #affiliate-div a.center_link:visited, #content #affiliate-div a.center_link:hover { /* Note: Shorthand for listing pseudo classes */
	color: #000000;
	font-weight: bold;
	margin-right: 40px;
	margin-left: 40px;
}

The other issue that just popped up is that once I “Visit” the link, the css rule seems to be taken from:

#content {
	float: left;
	padding: 5px;
	width: 680px;
	min-height: 550px;
	height: auto;
}
#content a:link {
	color: #000000;
}
#content a:visited {
	color: #000000;
}
#content a:hover {
	color: #DA830C;
	text-decoration: none;
}

not:

}
#content #affiliate-div a.center_link:link, #content #affiliate-div a.center_link:visited, #content #affiliate-div a.center_link:hover { /* Note: Shorthand for listing pseudo classes */
	color: #000000;
	font-weight: bold;
	margin-right: 40px;
	margin-left: 40px;
}

in which the “visited” pseudo class is referenced???

11

Did you read my post?

And why do you think that? Does upon :visited being activated by you clicking the link, do the margins go away?

12

Yes I read the post and the Specificity tutorial (thank you) and since

#content #affiliate-div a.center_link:link, #content #affiliate-div a.center_link:visited, #content #affiliate-div a.center_link:hover

is more specific than:

}#content {
	float: left;
	padding: 5px;
	width: 680px;
	min-height: 550px;
	height: auto;
#content a:link {
	color: #000000;
}
#content a:visited {
	color: #000000;
}
#content a:hover {
	color: #DA830C;
	text-decoration: none;

given the two IDs referenced, I don’t understand why the css is picking up

#content a:visited {
	color: #000000;

which it is because after visiting the link, the margins go away and the link color is different.

13

Try clearing your cache and history. If not give me a link to look at or your full code (HTML/CSS). Or if you can, a reduced test case would be nice :slight_smile:

14

Normally I avoid such complications by Being Lazy. While you might have some good reason for listing each state specifically (and leaving the poor :focus all in its lonesome), generally the world is a better place with less code.

I am unclear where you are putting these two pieces of code… be aware that if two bits of code have the same specificity, the latter will be the one you see.


#content {
	float: left;
	padding: 5px;
	width: 680px;
	min-height: 550px;
}
* html #content {height: 550px;} /*IE is een sukkel*/
#content a {
	color: #000;
}
#content a:focus, #content a:hover {
	color: #DA830C;
	text-decoration: none;
}

#content a.center_link { 
	font-weight: bold;
	margin: 0 40px;
}

If we don’t mention colour at all on .center_link, then normally it should do what was earlier coded… also for focus/hover. “a” by itself covers :visited etc.

The only time I wouldn’t do this is if I needed a different regular-anchor colour on the classed anchors but wanted to keep the hover/focus colour as previously defined. In which case I would go ahead and use :link and :visited:


#content a.center_link:link, #content a.center_link:visited { 
        color: #00f; /*let's say we needed this one blue by default*/
	font-weight: bold;
	margin: 0 40px;
}

This way the original Content a:focus/hover colours should be able to shine through when needed.

An easy (lazy) way to see why your links are changing after they are :visited is to click the link Firefox with either the web developer toolbar or Firebug to see what the css is that’s “winning”. Possibly the only thing I use Firebug for… inspecting the element with a click.

I tried “auto” which did not work so I went to L&R margins. I was hoping that just an equal setting would center it but it only moved it right a little bit. I guess I have to play with the number until it looks right but there must be an easier way??

Auto works after you do two things:
make sure the thingie is a block
give the thingie a width less than 100%

If you set the a.center_link to display: block, it becomes 100% wide by default, so automargins become 0. But specifically named margins like 40px will still work. Think about it, you can’t center someone who’s filling ALL the available space, can you?
Ryan or someone mentioned that if you make the anchor a block, then you can also give it text-align: center and the text inside the new blocky boxy outside of the anchor can be centered. I would do this because it’s easier than messing with a parent or making new parents… though Paul O’B would tell you it’s not a good idea to have an inline sitting around blocks without some block parent wrapping it in the first place.

15

Clearing the cache didn’t do it unfortunately.

Would a link be helpful? If not I’ll post all the code.

16

A link would be more helpful then code but either or will do :).

17

Here’s the link :

http://www.shirtsaboutnothing.com/other_products/hardshell_cases.html

thanks

18

You set the font colors to be the same in both rules, the only difference is that one has margins set (and font-weight:bold).

I visited the link, and then revisted the page (that way the visited effect would be taken up) and the margins / bold font was still there (which means that the below CSS isn’t overridding your other)

#content a:visited {
	color: #000000;}

That CSS isn’t overridding anything :). If you are stil having trouble pleas screenshot your page and give a direct link to it here (don’t attach it since we will have to wait)

Basicvally, if the text is still indented you don’t have to worry about the CSS (that I posted above) is overridding the other styles)

The screenshot will tell us whta you are seeing :).

19

Yup,

I don’t know why. I certainly pressed the button to clear the cache but that must have been an issue.

I even have the link centered better but I’m not sure I understand why or if this is the best way to do it.

I have this code now for those links:

color: #000000;
	font-weight: bold;
	margin-right: auto;
	margin-left: auto;
	display: block;
	width: 10%;

I understand displaying it as a block element, but why did it take a width of 10% to finally get it centered when 80% was not enough to get it over and 5% was too much? How can you calculate this without trying a hit or miss approach or is there a better way entirely?

Thanks again.

20

You would need to know the exact width of the element which is why the method you are using is not suitable for fluid width text. For a block element to be centred you need to set a specific width because as mentioned above it stretches to 100% wide and therefore there is nothing to center. You need to shrink the elements width to match its content before it will be centred correctly.

Instead, simply place the anchor in a block level element (as all inline elements should be) and then align the text with text-align:center on the parent.

This will mean any amount of text will be perfectly centred as long as the text is in an inline context.
e.g.


#content #affiliate-div a.center_link:link, #content #affiliate-div a.center_link:visited, #content #affiliate-div a.center_link:hover { /* Note: Shorthand for listing pseudo classes */
    color: #000000;
    font-weight: bold;
   [B] /*margin-right: auto;
    margin-left: auto;
    display: block;
    width: 10%;*/[/B]
}
p.more{
  [B]  margin:0;
    text-align:center;[/B]
}




    </table>
                </form>
                [B]<p class="more"><a href="hardshell_cases2.html" class="center_link">MORE</a></p>[/B]
            </div>
        </div>

This is starting to get unwieldy.


#content #affiliate-div a.center_link:link,

Be careful how you define your styles so that you don’t need to create such long paths to them. Sometimes you have no choice I know (in cases of specificity) but with careful planning you can minimise the code required. :slight_smile: