underline text decoration does not work with a:link set to none

[concepts99]

Hello,

I am having a problem.

I have a site loaded css file

with a href to

A:link {
COLOR: #112536;
TEXT-DECORATION: none;

no underline

However, in some sections, I am LOOKING for the underline for the links.

I then have 2 font classes loaded also


.font12 {color: black; font: 12px/1 Verdana;text-effect:emboss;}
.font12:link {color: blue; font: 12px/1 Verdana;text-effect:emboss;TEXT-DECORATION: underline;}

with the link set to underline

I try to load it as

<font class="font12"> text here <a href="">text</a></font>

but the text still does not show the underline for the link

I then try



<div class="font12"> text here <a href="">text</a></div>

Also, same results. Whatever reason, I cannot seem to override the no underline text decoration link from the main css load.

Can anyone give me some pointers, driving me nuts

[tangor]

I personally leave most a:links alone. The webtards are used to it. However... looking at above the "a:" has been left out. Might take a look at that.

[Demaestro]

The reason is that when you add the <a> any style you gave the <a> tag will override your base a class definition.

You need to define that <a> tags in the font12 class get the same style as the font12 class.

You are close but you have the syntax wrong. You want your css like this

.font12 {color: black; font: 12px/1 Verdana;text-effect:emboss;}
.font12 a {color: blue; font: 12px/1 Verdana;text-effect:emboss;TEXT-DECORATION: underline;}

OR

.font12 a:link {color: blue; font: 12px/1 Verdana;text-effect:emboss;TEXT-DECORATION: underline;}


Some explanation.....

In CSS, when you define a class or an id you can define tags that are children of those classes or ids.

So for example.. this:

.font12 a {}

...means only use the above definition for <a> tags that appear IN an object that has the class="font12"

I do this often for nested objects like <ul><li>

Instead of

.ul1 {style here}
.li1 {style ehre}

<ul class="ul1"><li class="li1"></li></ul>

I do this

.ul1 {style here}
.ul1 li {style ehre}

<ul class="ul1"><li></li></ul>

[Major_Payne]

Might help...

You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

* link - this is a link that has not been used, nor is a mouse pointer hovering over it
* visited - this is a link that has been used before, but has no mouse on it
* hover - this is a link currently has a mouse pointer hovering over it/on it
* active - this is a link that is in the process of being clicked

Using CSS you can make a different look for each one of these states:

a:link {
color:#006;
text-decoration:none;
cursor:pointer;
}

a:visited {
color:#369;
}

a:hover {
color:#f60;
text-decoration:underline;
}

a:focus {
outline: none; /* remove the dotted outline added by Firefox */
}

a:active {
color:#fc9;
cursor:wait;
}

a:link {color: #090;}
a:visited {color: #999;}
a:hover {color: #333;}
a:focus {color: #333;}
a:active {color: #090;}

Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

Pseudo Classes

You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

You can do this in the following fashion:

#pseudo_content a:link {color: #090;}
#pseudo_content a:visited {color: #999;}
#pseudo_content a:hover {color: #333;}
#pseudo_content a:focus {color: #333;}
#pseudo_content a:active {color: #090;}

Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #pseudo_content selector to match your division name.

Then for the links in a column you could use the following:

#pseudo_column a:link {color: #090;}
#pseudo_column a:visited {color: #999;}
#pseudo_column a:hover {color: #333;}
#pseudo_column a:focus {color: #333;}
#pseudo_column a:active {color: #090;}

Once again, this assumes the name of the column division, just change the name to match yours.

This same method can be accomplished by declaring a class instead of an id.

a.pseudo_column:link {color: #090;}
a.pseudo_column:visited {color: #999;}
a.pseudo_column:hover {color: #333;}
a.pseudo_column:focus {color: #333;}
a.pseudo_column:active {color: #090;}

Though in this case you will need to add a class to each link

<a class="pseudo_column" href="" title="">some link text</a>

But, there is still yet an easier way

.pseudo_column a:link {color: #090;}
.pseudo_column a:visited {color: #999;}
.pseudo_column a:hover {color: #333;}
.pseudo_column a:focus {color: #333;}
.pseudo_column a:active {color: #090;}

Then in the (X)HTML file

<div class="pseudo_column">
<a href="" title="Link Description">Link Text Description</a>
</div>

[concepts99]

thank you for pointing out the syntax error. Great help