Conflicting link colors

Yet another CSS question...

[keyplyr]

I'm wanting to define a specific link color that differs from the "A: link" colors.

When I use a div like this:

div.nolink {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}

.... the text-link centers but defaults to the "A: link" color.

When I add the "a" like this:

div.nolink a {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}

..... the new link color shows, but I loose my center and margin.

Suggestions?

[tedster]

It will work if you use the div class to set block level stuff such as text-align and margin, but change the color of the link text with its own class.

<div class="nolink><a href="someURL" class="newcolor">Link Text<a></div>

[keyplyr]

Doesn't work - what's wrong, thanks.

<div class="nolink><a href="someURL" class="linkcolor">Link Text</a></div>

div.nolink {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}
.linkcolor a {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}

even tried:

a.linkcolor {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}

[tedster]

Just use .linkcolor {...}, not .linkcolor a {...}

All you need is this:

.linkcolor {
color: #669999;
background: transparent;
}

[keyplyr]

OK - got it:

div.nolink {
background: transparent;
color: #669999;
font: 11px verdana, arial, sans-serif;
text-align: center;
text-decoration: none;
margin: 6px;
}
a.linkcolor {
background: transparent;
color: #669999;
}

<added> wouldn't work without the "a" Thanks!

[rewboss]

I've been caught out by the text-align property before.

Basically, the mistake is to think it aligns the element. It doesn't; it aligns the text inside the element.

Consider the <div> element with some text inside it. It might look like this:

+--------------------------+ 
¦                          ¦ 
¦This is some text          ¦ 
¦                          ¦ 
+--------------------------+ 

If you apply the style div {text-align:center;} it will align the text inside the <div> so that there is the same amount of space either side. It does not align the <div> itself.

No consider an <a> element. It is an inline element, which means that the element is only as wide as it needs to be. It looks like this:

+--------------+ 
¦This is a link¦ 
+--------------+ 

There is no extra space anywhere. If you could apply text-align:center to the element, it would make no difference: the text can't be moved any further to the right because there's no room to do so.