Forum Moderators: not2easy
I'm brand new to this forum and just read through several topics about CSS and link manipulation, and tried what they said, but with no luck yet. I apologize in advance if my terminology isn't perfect.
In my CSS I have ID sections (for DIVs) defined with link attributes as follows:
#centerItemLeft
{
text-align: left;
margin: 0px;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 0px;
border-left: 1px solid #999999;
padding: 5px 15px 5px 15px;
background: #ffffff;
}
#centerItemLeft a:link, a:visited, a:active
{
text-decoration: none;
font-weight: bold;
color: #009999;
}
#centerItemLeft a:hover
{
text-decoration: underline;
color: #009999;
}
Elsewhere in the CSS file (I've tried putting it before and after the above section), I define another set of attributes to be used by a specific link:
.cGHCLink:link
{
text-decoration: none;
font-weight: bold;
color: #333333;
}
.cGHCLink:active
{
text-decoration: none;
font-weight: bold;
color: #333333;
}
.cGHCLink:visited
{
text-decoration: none;
font-weight: bold;
color: #333333;
}
.cGHCLink:hover
{
text-decoration: underline;
color: #333333;
}
The page where the above are used is pretty straightforward:
<div id="centerItemLeft">
.
.
<a class="cGHCLink" href="[URL]">[LinkText]</a>
.
.
</div>
FWIW, there are a number of table elements in between (the link itself is inside a <td> element), but I don't think that should make a difference. I even tried throwing the link inside its own <div class=\"cCHGLink\"></div> tags with no luck.
I gotta believe this can be done, but my head's starting to hurt from all the banging against the wall...
Thanks for any help,
Dave
I found another topic that talked about how ID selectors (finally found the term) will override class selectors. Anyway, the solution I found was to wrap the link in a DIV that used an ID, not a class:
CSS:
#centerItemLeft
{
text-align: left;
margin: 0px;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 0px;
border-left: 1px solid #999999;
padding: 5px 15px 5px 15px;
background: #ffffff;
}
#centerItemLeft a:link, a:visited, a:active
{
text-decoration: none;
font-weight: bold;
color: #009999;
}
#centerItemLeft a:hover
{
text-decoration: underline;
color: #009999;
}
.
.
.
#cGHCLink
{
margin: 0px;
border: 0px;
padding: 0px;
background: #cccccc;
}
#cGHCLink a:link, a:visited, a:active
{
text-decoration: none;
font-weight: bold;
color: #333333;
}
#cGHCLink a:hover
{
text-decoration: underline;
color: #333333;
}
Page:
<div id="centerItemLeft">
.
.
.
<div id="cGHCLink">
<a href="[URL]">[LinkText]</a>
</div>
.
.
.
</div>
I hope this can help someone else.
Dave
Well, there are actually a few problems still with your style sheet. Take a look at these selectors:
#centerItemLeft a:link, a:visited, a:active
#cGHCLink a:link, a:visited, a:active
What do they tell us? The first one will apply to all anchors that are links inside the #centerItemLeft element, as well as all visited and active anchors regardless of where they are located in the document. In fact, that's the same as:
#centerItemLeft a:link {}
a:visited {}
a:active {}
...which is probably not what you have in mind :)
So, to make it work properly, those lines need to be:
#centerItemLeft a:link, #centerItemLeft a:visited, #centerItemLeft a:active
...and
#cGHCLink a:link, #cGHCLink a:visited, #cGHCLink a:active
...respectively.
:)
I had this "bug" latent in my CSS the whole time, but it wasn't being seen, maybe because the DIV order in the page matched the ID selector order in the CSS. Finally, this latest monkey-wrenching requirement forced the problem to the surface. I was just starting to pull my few remaining hairs out again because my visited links were now suddenly changing colors unexpectedly after making the last change. Then I come in here, and bingo!
So... thankyouthankyouthankyou, your answer was timely and extremely hair-preserving! :^)
Now I'm that much more positive this will help someone else out there!
Dave
