This is a bit basic, but I can't figure out why this bit of code is being overridden by the main A styling element
The main A styling element CSS is this:
/* links */
A {
color: #333;
font-weight: bold;
text-decoration: none;
}
/* hovering links */
A:hover {
color: #000;
font-weight: bold;
text-decoration: none;
}
What I'm trying to do is style the link attribute in the listbox [the styling for how the lists of stories looks]. Right now you can see having that link color kinda meld with the red there, so I wanted to change it to white and perhaps add a text decoration, or leave it be since the main hover attribute will be used. The problem is, my syntax isn't right somewhere because it's not rendering. Everything i've read up on classes is telling me that using A.listbox.title should work. I've tried A.listbox and A.title but neither is being recognized by the browser. Below is the listbox CSS. I'm hoping someone can see what I'm obviously missing. I don't want to go in change it to IDs and change the coding in the tpls unless I have to.
/* The title bar for each story box. */
.listbox .title {
background-color: #800;
background-image: url(images/top1.gif);
background-position: top left;
background-repeat: repeat-x;
color: #FFF;
font-weight: bold;
padding: 4px;
padding-left: 8px;
}
/* Styles the look of links in the Listing title. */
A.listbox {
color: #FFF;
text-decoration: none;}
Here's a URL to the site I'm referencing: http://writ.sansdreamscape.net/browse.php?type=titles
While working on another CSS file, I found my answer...I could have sworn I tried that..but I may have goofed something trying it. For any interested the solution is .listbox A
