CSS id trouble... I think.
I have been working on a new site for myself and I have run into a problem that bothers me beyond all the other problems that I have with it. Best I can figure, it is an "id" issue. I have a div at the top of the page that has the id of "where". Here is a snippet.
[INDENT]
#where {
margin: 25px 50px 10px 150px;
min-width: 400px;
text-align: right;
border: 0px none;
background-image: url(../images/red.png);
}
#where a:hover {
font: bold 10px/10px Verdana, Arial, Helvetica, sans-serif;
color: #FFF;
text-align: right;
text-decoration: underline;
}
#where a:link, a:visited, a:active {
font: bold 10px/10px Verdana, Arial, Helvetica, sans-serif;
color: #330000;
text-align: right;
text-decoration: none;
}
[/INDENT]
Then lower down in the CSS there is another div with the id of "menu" with its own properties. You know colors and size.
The problem is that all of the visited links on the whole page are the being overrun by the "menu" id.. All that it is is this:
[INDENT]
#menu a:link, a:active, a:visited {
font: bold 10px/10px Verdana, Arial, Helvetica, sans-serif;
color: #CCCC00;
text-align: right;
text-decoration: none;
}
[/INDENT]
The whole thing is odd as it seems that the only thing that is being overwridden is the "visited" links.
Please have a look at the troublesome site and the attached CSS.
I have looked in some books and did some web searches and am, at this point, a loss.
Thank you!
Suzanne posted this at 23:03 — 5th January 2004.
She has: 5,507 posts
Joined: Feb 2000
#menu a:link, #menu a:active, #menu a:visited {}
Dorn posted this at 23:15 — 5th January 2004.
They have: 42 posts
Joined: Jul 2001
so what you are saying is that I should not group the selectors as I have?
If that is the case when is it OK to group them and when not?
thanks for the quick reply.
Suzanne posted this at 00:14 — 6th January 2004.
She has: 5,507 posts
Joined: Feb 2000
You can, you just had the syntax wrong.
#menu a:link, a:active, a:visited means for all hyperlinks (unvisited, nonactive) in the element identified by "menu", and for all active and visited hyperlinks, do this. Notice that it no longer includes the specification "in the element identified by "menu"".
#menu a:link, #menu a:active, #menu a:visited on the other hand says for hyperlinks in #menu, and active hyperlinks in #menu and visited hyperlinks in #menu, do this.
It's not that your declarations have been over-written, it's that you haven't written any (in your original as posted here). Does that help?
Edited to add:
Also...
#where a:link, #where a:visited, #where a:active is what you should have in the #where declarations.
Edited again to add:
You should also have the #where a:hover AFTER the a:visited bits.
Dorn posted this at 00:55 — 6th January 2004.
They have: 42 posts
Joined: Jul 2001
thank you... that did the trick. You are the CSS MASTER. Have you seen CSS Zen Garden ?? I would love to see what you could do there.
I suppose that I should say that I checked out your site. With your help here and what I saw there... I suspect that it would be good.
thanks again
Oh! would you mind sharing some of your reference sites? Or do you store all this information in your uber CSS brain?
Suzanne posted this at 01:08 — 6th January 2004.
She has: 5,507 posts
Joined: Feb 2000
ha, hardly a master, I just have a lot of room in my head for semantics (and some other antics).
In general, I read folks like Eric Meyers (his books, articles and website), pay attention to the links provided by The Web Standards Project, and keep on learning.
http://www.wpdfd.com/
http://www.digital-web.com/
http://www.alistapart.com/
Projects like the Zen Garden are helpful in bringing the beauty and possibility of CSS and standards to the forefront. Dave Shea (who started and runs it) is a large contributor to the current understanding and future aims of standards as well. His website is beautiful and he posts regular articles where many others contribute intelligent considerations.
On the whole, I don't have a particular authority other than the http://www.w3c.org to offer. I read a LOT of websites and follow the links. I find using a news reader and using the RSS feeds has helped considerably.
I will be putting some of the more common urls I've read online in the future, but, typically, real life takes precedent.
Keep reading, keep learning, keep asking! That's all *I* do.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.