Forum Moderators: not2easy

Message Too Old, No Replies

styling <a> inside a class prob.

global style overriding class specific style?

         

ch1mp

3:12 pm on Feb 20, 2010 (gmt 0)

10+ Year Member



hi all,

i think i'm missing something really obvious here, i have...


a:link
{
color:#b52323;
text-decoration:none;
}

a:visited
{
color:#000;
text-decoration:none;
}

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

a:active
{
color:#b52323;
text-decoration:none;
}



in a global.css, but inside a panel where the whole div is a link i want to override this global link styling...


.panelText a:link
{
color:#000;
text-decoration:none;
}
.panelText a:visited
{
color:#000;
text-decoration:none;
}
.panelText a:hover
{
color:#000;
text-decoration:none;
}
.panelText a:active
{
color:#000;
text-decoration:none;
}



this doesn't work though, i've tried a.panelText but no dice either. it's weird because in my footer i overwrite the globals with no problem...



.footerLinks a
{
color: #FFFFFF;
text-decoration:none;
}



any ideas? thanks in advance...

rocknbil

7:33 pm on Feb 20, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The last one may be "slippery" and give you something other than #fff for the four states. Try

.footerLinks a:link,
.footerLinks a:visited,
.footerLinks a:hover,
.footerLinks a:active
{
color: #FFFFFF;
text-decoration:none;
}

But of course, don't make them all the same. :-)

this doesn't work though . . .
.panelText a:link
{
color:#000;
text-decoration:none;
}


What's the HTML like?

if it's

<p class="panelText"><a href="#">some link</a></p>

It should work. But if you have

<p><a class="panelText" href="#">some link</a></p>

what you want is

.panelText:link
{
color:#000;
text-decoration:none;
}

The last possibility, if you have a set of nested elements,

<div class="panelText">
<ul><li><a href="#">some link</a></li></ul>
</div>

Some other selector on one of the elements may be conflicting/overriding it.