Anchor colors

[tshad]

My links/anchors in my site are a turquoise color.

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
a:link {
color:#3EA2BC;
}
a:active {
color:#3EA2BC;
}

I have some tags I want to be a different color so I set up a class -
bodybold.

It seems the way I do it with my menu list doesn't work for my other links
For my menu Links I do it this way:

..nav-menu li a
{
height: 2em;
line-height: 2em;
color: #666666; /* Color of the Link - need to change it for a:visited as
well */
text-align: center;
margin: 0;
padding: 0;
font-weight: bold;
}
..nav-menu li a:visited
{
color: #666666; /* Color of visited link - should be the same as the "a"
tag */
}

The class name, then the list, then the link. This is then applied as so:

<div class="nav-menu" >
<ul>
<li><asp:HyperLink ID="HomeMenu" Text="Home" NavigateUrl="home.aspx
runat="server"/></li>
<li><asp:HyperLink ID="ViewBasicMenu"
NavigateUrl="viewPositionsNS.aspx?type=Basic" Text="Basic Search"
runat="server"/></li>
</ul>
</div>

This doesn't work for my normal links:

My <a> is:

<a class="bodybold" href="file:///C|/Inetpub/wwwroot/media_kit">media</a>

I tried this first:

..bodybold
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

That didn't work.

I then realized that I needed to specifically set the <a> specifically as I
do with my list menus, so I now have:

..bodybold a
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

..bodybold a:link
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
..bodybold a:active
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
..bodybold a:visited
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
This still didn't work work. But then I did this which did work.

a.bodybold:link
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
a.bodybold:active
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
a.bodybold:visited
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

Why didn't the previous ones work?

Thanks,

Tom.

 

[John Hosking]

My links/anchors in my site are a turquoise color.

By which I guess you mean #3EA2BC. A URL would be useful.

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}
a:link {
color:#3EA2BC;
}
a:active {
color:#3EA2BC;
}

I have some tags

By which I guess you mean links, or elements, rather than tags.

I want to be a different color so I set up a class -
bodybold.

I get itchy when I see a class name suggesting its presumed formatting
rather than the semantic importance of the classed items. Here, I wonder
which link elements you want to be non-#3EA2BC, and *why*. Are they auto
models? Member names? Monitor brands? Planets? Species of primates? Name
the class "planet" and then you can style (and re-style) as your heart
desires. With bodybold you have to watch out constantly that you don't
change from using font-weight: bold anymore.

It seems the way I do it with my menu list doesn't work for my other links
For my menu Links I do it this way:

.nav-menu li a
{
height: 2em;
line-height: 2em;
color: #666666; /* Color of the Link - need to change it for a:visited as
well */
text-align: center;
margin: 0;
padding: 0;
font-weight: bold;
}
.nav-menu li a:visited
{
color: #666666; /* Color of visited link - should be the same as the "a"
tag */
}

The class name, then the list, then the link. This is then applied as so:

<div class="nav-menu" >
<ul>
<li><asp:HyperLink ID="HomeMenu" Text="Home" NavigateUrl="home.aspx
runat="server"/></li>

What the hell is asp:? This is why you should provide a URL, so we can
see what you've really got.

This doesn't work for my normal links:

My <a> is:

<a class="bodybold" href="file:///C|/Inetpub/wwwroot/media_kit">media</a>

I tried this first:

.bodybold

That didn't work.

I then realized that I needed to specifically set the <a> specifically as I
do with my list menus, so I now have:

.bodybold a

You're just guessing. Read and digest an actual tutorial, like
http://css.maxdesign.com.au/selectutorial/
(http://css.maxdesign.com.au/selectutorial/selectors_class.htm) or
http://www.htmldog.com/guides/cssintermediate/pseudoclasses/ (although
beware because the HTMLDog page doesn't use the ordering :link,
:visited, :hover, :active.

This still didn't work work. But then I did this which did work.

a.bodybold:link
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;

BTW, please don't do this. Use % or em instead.

font-weight:Bold;
text-decoration:none;
color:#666666
}
a.bodybold:active
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
a.bodybold:visited
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

Why didn't the previous ones work?

".bodybold a" selects the <a> elements which are descendants of elements
with the bodybold class. You don't have any of those. What you have are
<a> elements which have the bodybold class. Such elements are selected
with a.bodybold, as you have done.

Also BTW: since these three rule sets are identical, you can combine them to

a.bodybold:link, a.bodybold:visited, a.bodybold:active
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

or even

a.bodybold:link, a.bodybold:visited, a.bodybold:active
{
font: normal bold 11px Geneva, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#666666
}

but if they're identical, why are you specifying them at all? And what
about the :hover case?

HTH

 

[tshad]

I am not sure I understand your explanation on the differences between:

..bodybold a:link

and

a.bodybold:link

and the reason the first one works for my links in my lists but not for the
links by themselves.

I am looking at your suggestions for information on it now.

Thanks,

Tom

 

[Chris F.A. Johnson]

I am not sure I understand your explanation on the differences between:

.bodybold a:link

and

a.bodybold:link

The first one is an anchor inside an element with class="bodybold";
the second is an anchor with class="bodybold".

and the reason the first one works for my links in my lists but not for the
links by themselves.

URL?

 

[Jukka K. Korpela]

Scripsit tshad:

My links/anchors in my site are a turquoise color.

Bad idea, especially since you use the same color for unvisited and visited
links.

font-size:10px;

Bad idea.

The symptoms strongly suggest that you should stop authoring web pages, take
a crash course on the basics, and start afresh. Don't try to fix the pages
you have already written; it's much faster and more productive to redesign
them from scratch.

I don't expect you to like this idea, but it's really the best advice.

 

[tshad]

Unfortunately, I don't have a public site to use - just an intranet.

In the following, can I put the selectors together (the following works - I
just want to see if I can combine them)?

..nav-menu-side li a
{
height: 2em;
line-height: 2em;
color: #666666; /* Color of the Link - need to change it for a:visited as
well */
text-align: center;
margin: 0;
padding: 0;
text-decoration:none;
font-size:9px;
}
..nav-menu-side li a:link
{
color: #666666; /* Color of visited link - should be the same as the "a"
tag */
}
..nav-menu-side li a:visited
{
color: #666666; /* Color of visited link - should be the same as the "a"
tag */
}
..nav-menu-side li a:hover
{
color: #666666; /* Color of visited link - should be the same as the "a"
tag */
}
..nav-menu-side li a:active
{
color: #666666; /* Color of visited link - should be the same as the "a"
tag */
}

I tried

..nav-menu-side li a:link a:visited a:hover a:active
{
color: #666666; /* Color of visited link - should be the same as the "a"
tag */
}

And

..nav-menu-side li a:link a:visited a:hover a:active
{
color: #666666; /* Color of visited link - should be the same as the "a"
tag */
}

neither of these worked.

I am using them for my menu links that I want to be the same color and not
change when visted as these are just for navigation and they will be using
them constantly on all my pages.

<div class="nav-menu" >
<ul>
<li><asp:HyperLink ID="HomeMenu" Text="Home"
NavigateUrl="/jobSeeker/displayCompanyJobs.aspx" runat="server"/></li>
<li><asp:HyperLink ID="ViewBasicMenu"
NavigateUrl="/jobSeeker/viewPositionsNS.aspx?type=Basic" Text="Search"
runat="server"/></li>
<li><asp:HyperLink ID="NewAccountMenu"
NavigateUrl="/jobSeeker/create_new_account.aspx" Text="Create Account"
runat="server"/></li>
<li><asp:HyperLink ID="LoginMenu" NavigateUrl="/jobSeeker/EELogin.aspx"
Text="Login" runat="server"/></li>
</ul>
</div>

Thanks,

Tom

 

[John Hosking]

Unfortunately, I don't have a public site to use - just an intranet.

Please don't top-post.

Please get access to a public site and post your code there and a URL
here. Nobody wants to see all this code out of context. There are free
servers where you can put up a page for free, if your ISP doesn't
provide one.

In the following, can I put the selectors together (the following works - I
just want to see if I can combine them)?

Yes, did you not read my post up-thread? You responded to it.

Also BTW: since these three rule sets are identical, you can combine them to

a.bodybold:link, a.bodybold:visited, a.bodybold:active

Note the commas delimiting three selectors.

Back to your last post:

I tried

.nav-menu-side li a:link a:visited a:hover a:active

The delimiter is a comma. Between each comma you need the exact (full)
selector you want added to the list for the shared ruleset. So:

..nav-menu-side li a:link,
..nav-menu-side li a:visited,
..nav-menu-side li a:hover,
..nav-menu-side li a:active { color: #666666; }

And

.nav-menu-side li a:link a:visited a:hover a:active

How is this second attempt different from the first? I don't see it.

neither of these worked.

Two (identical) stabs in the dark. Get a reference and use it.

BTW, if you have identical rules for :link, :hover, and :active, you can
probably just specify a:link, a:visited and leave out the others, as
they are affected by the a:link selector.

 

[tshad]

Please don't top-post.

Please get access to a public site and post your code there and a URL
here. Nobody wants to see all this code out of context. There are free
servers where you can put up a page for free, if your ISP doesn't provide
one.

Where would I find one of those?

That would make it easier.

Yes, did you not read my post up-thread? You responded to it.


Note the commas delimiting three selectors.

Back to your last post:

The delimiter is a comma. Between each comma you need the exact (full)
selector you want added to the list for the shared ruleset. So:

.nav-menu-side li a:link,
.nav-menu-side li a:visited,
.nav-menu-side li a:hover,
.nav-menu-side li a:active { color: #666666; }


How is this second attempt different from the first? I don't see it.

My mistake. I actually meant to have commas between them but left it out.
And, as you pointed out, that wouldn't work as I needed the whole selector.

Two (identical) stabs in the dark. Get a reference and use it.

I actually have a couple of references, but from them references I couldn't
figure out the differences between:

..bodybold a:link

and

a.bodybold:link

At least not directly. For example, I didn't see in my references (may have
missed it) that a:Link affects the other classes.

BTW, if you have identical rules for :link, :hover, and :active, you can
probably just specify a:link, a:visited and leave out the others, as they
are affected by the a:link selector.

Are you saying that a:hover and a:active is affected by a:link or a:hover is
affected by a:link and a:active is affected by visited? Just wanted to make
sure.

Also, since we are using the pseudo selectors, is

a{
}

not really useful? I can't figure out why I would use the "a" tag by
itself.

So I assume that the following:

..bodybold a:link
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
..bodybold a:visited
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
..bodybold a:hover
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
..bodybold a:active
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

Can be changed to:

..bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
a:active
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

or

..bodybold a:active, .bodybold a:visited
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

The same with this:

a.bodybold:link
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
a.bodybold:visited
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
a.bodybold:hover
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}
a.bodybold:active
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

can be changed to:

a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

or

a.bodybold:link, a.bodybold:visited
{
font-family:Geneva, Arial, Helvetica, sans-serif;
font-style:normal;
font-size:11px;
font-weight:Bold;
text-decoration:none;
color:#666666
}

Thanks,

Tom

 

[Michael Fesser]

..oO(tshad)

Are you saying that a:hover and a:active is affected by a:link or a:hover is
affected by a:link and a:active is affected by visited? Just wanted to make
sure.

One of the pseudo-classes :link and :visited always applies. The other
three pseudo-classes hover, :active, :focus) might apply additionally
and even at the same time.

Also, since we are using the pseudo selectors, is

a{
}

not really useful? I can't figure out why I would use the "a" tag by
itself.

For example to declare some general properties for all links, regardless
of their current state.

So I assume that the following:
[...]

Can be changed to:

.bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
a:active
[...]

..bodybold a {
font-weight: bold;
text-decoration: none;
color: #666
}

You don't have to declare the font family, size etc. over and over
again.

The same with this:
[...]

can be changed to:

a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
[...]

a.bodybold {
font-weight: bold;
text-decoration: none;
color: #666
}

Same thing.

Micha

 

[Jonathan N. Little]

Where would I find one of those?

http://www.justfuckinggoogleit.com/search.pl?query=free+web+hosting

<snip code>

 

[John Hosking]

in message news:[email protected]...

Where would I find one of those?

GIYF: search for "free hosting" or "free web server" or something. I
really hate Yahoo's GeoCities, but if all else fails (getting _good_
hosting), you could go there as a last resort.

I actually have a couple of references, but from them references I couldn't
figure out the differences between:

.bodybold a:link

and

a.bodybold:link

Just CSS notation. The thing following the leading dot is a class name.
The thing peceding the dot, if present, is the element with that class.
A sequence of "things" separated by spaces show descendents, where each
thing is a descendent of the things to its left. A colon starts a
pseudo-selector. (And commas separate selectors in a list which use the
same rules, but you know that now.)

Selectutorial has some fine tutorials on CSS. Here's their page on
grouping selectors:
http://css.maxdesign.com.au/selectutorial/rules_group_sel.htm

At least not directly. For example, I didn't see in my references (may have
missed it) that a:Link affects the other classes.

Are you saying that a:hover and a:active is affected by a:link or a:hover is
affected by a:link and a:active is affected by visited? Just wanted to make
sure.

Here's some more to read (and refer back to later). If you read this
(and understand it) you ought to have no more problems in this area.
http://www.satzansatz.de/cssd/pseudocss.html is a page which talks
primarily about bugs in IE regarding pseudo-selectors (so it's both more
than we're discussing here and also restricted to just a couple of
browser versions), but it contains a good explanation about the :link,
:visited, et. al. mechanics. I suggest that you just skip to
http://www.satzansatz.de/cssd/pseudocss.html#link-pseudo-classes and
read from there.

And from the horse's mouth (also linked to from above):
http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

And for dessert, here are a couple of fun facts from
http://www.quirksmode.org/css/hover.html ;-)

..test:hover doesn't work in Mozilla/Firefox in CSS Quirks Mode.

:hover on elements other than links doesn't work in Explorer 7 in CSS
Quirks Mode.

Also, since we are using the pseudo selectors, is a { }
not really useful? I can't figure out why I would use the "a" tag by
itself.


So I assume that the following:

.bodybold a:link
{

[snippage of repeated identical rules]

}
.bodybold a:visited
{ [snippage]
}
.bodybold a:hover
{ [snippage]
}
.bodybold a:active
{ [snippage]
}

Can be changed to:

.bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
a:active

If you correct the first a:active in what I presume is a typo here to

.bodybold a:link, .bodybold a:visited, .bodybold a:hover, .bodybold
a:active

{ [snippage]
}

....then yes, but

or

.bodybold a:active, .bodybold a:visited
{ [snippage]
}

No. Don't know how you jumped here. Ah! unless you have the same typo.
If you mean .bodybold a:link, .bodybold a:visited, then yes.

The same with this:

a.bodybold:link
{
}
a.bodybold:visited
{
}
a.bodybold:hover
{
}
a.bodybold:active
{
}

can be changed to:

a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
{
}

or

a.bodybold:link, a.bodybold:visited
{
}

Well, yes, but do note that these are two entirely different examples
you've given. "a.bodybold:link" is different from ".bodybold a:link".

 

[Andy Dingley]

Unfortunately, I don't have a public site to use - just an intranet.

Then either find help from just those people who can see your
intranet, or else find some simple public hosting where you can post
static HTML/CSS (i.e. the _results_ of you ASP code) so that a much
larger group of people can see it.

One of these groups is likely to be more helpful than the other. One
of these hosting choices is accessible to that group. The rest is your
choice.

 

[tshad]

GIYF: search for "free hosting" or "free web server" or something. I
really hate Yahoo's GeoCities, but if all else fails (getting _good_
hosting), you could go there as a last resort.


Just CSS notation. The thing following the leading dot is a class name.
The thing peceding the dot, if present, is the element with that class. A
sequence of "things" separated by spaces show descendents, where each
thing is a descendent of the things to its left. A colon starts a
pseudo-selector. (And commas separate selectors in a list which use the
same rules, but you know that now.)

Selectutorial has some fine tutorials on CSS. Here's their page on
grouping selectors:
http://css.maxdesign.com.au/selectutorial/rules_group_sel.htm


Here's some more to read (and refer back to later). If you read this (and
understand it) you ought to have no more problems in this area.
http://www.satzansatz.de/cssd/pseudocss.html is a page which talks
primarily about bugs in IE regarding pseudo-selectors (so it's both more
than we're discussing here and also restricted to just a couple of browser
versions), but it contains a good explanation about the :link, :visited,
et. al. mechanics. I suggest that you just skip to
http://www.satzansatz.de/cssd/pseudocss.html#link-pseudo-classes and read
from there.

And from the horse's mouth (also linked to from above):
http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

And for dessert, here are a couple of fun facts from
http://www.quirksmode.org/css/hover.html ;-)

I will be looking at these pretty closely.

I have been looking at: http://www.w3schools.com/css/css_pseudo_classes.asp
with is pretty basic but helps as a tickler to remember the format.

.test:hover doesn't work in Mozilla/Firefox in CSS Quirks Mode.

:hover on elements other than links doesn't work in Explorer 7 in CSS
Quirks Mode.

Also, since we are using the pseudo selectors, is a { }
not really useful? I can't figure out why I would use the "a" tag by
itself.


So I assume that the following:

.bodybold a:link
{

[snippage of repeated identical rules]

}
.bodybold a:visited
{ [snippage]
}
.bodybold a:hover
{ [snippage]
}
.bodybold a:active
{ [snippage]
}

Can be changed to:

.bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
a:active

If you correct the first a:active in what I presume is a typo here to

Yes, it was.

I meant it as you typed it.

.bodybold a:link, .bodybold a:visited, .bodybold a:hover, .bodybold
a:active

{ [snippage]
}

...then yes, but

or

.bodybold a:active, .bodybold a:visited
{ [snippage]
}

No. Don't know how you jumped here. Ah! unless you have the same typo. If
you mean .bodybold a:link, .bodybold a:visited, then yes.

The same with this:

a.bodybold:link
{
}
a.bodybold:visited
{
}
a.bodybold:hover
{
}
a.bodybold:active
{
}

can be changed to:

a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
{
}

or

a.bodybold:link, a.bodybold:visited
{
}

Well, yes, but do note that these are two entirely different examples
you've given. "a.bodybold:link" is different from ".bodybold a:link".

They are different examples - but just wanted to make sure there wasn't some
gotcha between the different types.

Thanks - this helps a lot,

Tom

 

[tshad]

I tried some of the suggestions from here and the articles mentioned and
still am confused. I tried applying this to a datagrid in asp.net which
renders to something like (with the CSS):

<style type="text/css">
a:link, a:visited {
color:#CCFF33;
}
..gridHeaderStyle {
color:#33FFCC;
background-color:#000000;
font-weight:bold
}
..gridHeaderStyle a:link, .gridHeaderStyle a:visited {
color:#red;
}
a.gridHeaderStyle:link, a.gridHeaderStyle:visited {
color:#red;
}
..gridPagerStyle {
background-color:red
}
</style>
<table cellspacing="0" cellpadding="0" rules="all" border="0"
id="_ctl0__ctl1_DataGrid1"
style="border-width:0px;width:635px;border-collapse:collapse;">
<tr class="gridHeaderStyle" align="Center">
<td style="width:100px;"><a href="#">Location</a></td>
</tr>
</table>

No matter what I do - the links in the header are
showing as lime green. I am trying to get them to change to red.

The links in my site should be Lime Green (a:link and a:visited). I have
the headerstyles' CssClass set to gridHeaderStyle - but it doesn't seem to
be working for the links in the header.

I though the ".gridHeaderStyle a:link" or a.gridHeaderStyle:link would
override the a:link but it doesn't seem to be doing this.

Am I missing something here?

Thanks,

Tom

GIYF: search for "free hosting" or "free web server" or something. I
really hate Yahoo's GeoCities, but if all else fails (getting _good_
hosting), you could go there as a last resort.


Just CSS notation. The thing following the leading dot is a class name.
The thing peceding the dot, if present, is the element with that class. A
sequence of "things" separated by spaces show descendents, where each
thing is a descendent of the things to its left. A colon starts a
pseudo-selector. (And commas separate selectors in a list which use the
same rules, but you know that now.)

Selectutorial has some fine tutorials on CSS. Here's their page on
grouping selectors:
http://css.maxdesign.com.au/selectutorial/rules_group_sel.htm


Here's some more to read (and refer back to later). If you read this (and
understand it) you ought to have no more problems in this area.
http://www.satzansatz.de/cssd/pseudocss.html is a page which talks
primarily about bugs in IE regarding pseudo-selectors (so it's both more
than we're discussing here and also restricted to just a couple of
browser versions), but it contains a good explanation about the :link,
:visited, et. al. mechanics. I suggest that you just skip to
http://www.satzansatz.de/cssd/pseudocss.html#link-pseudo-classes and read
from there.

And from the horse's mouth (also linked to from above):
http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

And for dessert, here are a couple of fun facts from
http://www.quirksmode.org/css/hover.html ;-)

I will be looking at these pretty closely.

I have been looking at:
http://www.w3schools.com/css/css_pseudo_classes.asp with is pretty basic
but helps as a tickler to remember the format.

.test:hover doesn't work in Mozilla/Firefox in CSS Quirks Mode.

:hover on elements other than links doesn't work in Explorer 7 in CSS
Quirks Mode.

Also, since we are using the pseudo selectors, is a { }
not really useful? I can't figure out why I would use the "a" tag by
itself.


So I assume that the following:

.bodybold a:link
{

[snippage of repeated identical rules]

}
.bodybold a:visited
{ [snippage]
}
.bodybold a:hover
{ [snippage]
}
.bodybold a:active
{ [snippage]
}

Can be changed to:

.bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
a:active

If you correct the first a:active in what I presume is a typo here to

Yes, it was.

I meant it as you typed it.

.bodybold a:link, .bodybold a:visited, .bodybold a:hover, .bodybold
a:active

{ [snippage]
}

...then yes, but

or

.bodybold a:active, .bodybold a:visited
{ [snippage]
}

No. Don't know how you jumped here. Ah! unless you have the same typo. If
you mean .bodybold a:link, .bodybold a:visited, then yes.

The same with this:

a.bodybold:link
{
}
a.bodybold:visited
{
}
a.bodybold:hover
{
}
a.bodybold:active
{
}

can be changed to:

a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
{
}

or

a.bodybold:link, a.bodybold:visited
{
}

Well, yes, but do note that these are two entirely different examples
you've given. "a.bodybold:link" is different from ".bodybold a:link".

They are different examples - but just wanted to make sure there wasn't
some gotcha between the different types.

Thanks - this helps a lot,

Tom

 

[tshad]

I tried some of the suggestions from here and the articles mentioned and
still am confused. I tried applying this to a datagrid in asp.net which
renders to something like (with the CSS):

<style type="text/css">
a:link, a:visited {
color:#CCFF33;
}
.gridHeaderStyle {
color:#33FFCC;
background-color:#000000;
font-weight:bold
}
.gridHeaderStyle a:link, .gridHeaderStyle a:visited {
color:#red;
}
a.gridHeaderStyle:link, a.gridHeaderStyle:visited {
color:#red;
}
.gridPagerStyle {
background-color:red
}
</style>
<table cellspacing="0" cellpadding="0" rules="all" border="0"
id="_ctl0__ctl1_DataGrid1"
style="border-width:0px;width:635px;border-collapse:collapse;">
<tr class="gridHeaderStyle" align="Center">
<td style="width:100px;"><a href="#">Location</a></td>
</tr>
</table>

I also tried to change the Link to:

<a style="color:#red;" href="#">

But that didn't work either.

Tom

No matter what I do - the links in the header are
showing as lime green. I am trying to get them to change to red.

The links in my site should be Lime Green (a:link and a:visited). I have
the headerstyles' CssClass set to gridHeaderStyle - but it doesn't seem to
be working for the links in the header.

I though the ".gridHeaderStyle a:link" or a.gridHeaderStyle:link would
override the a:link but it doesn't seem to be doing this.

Am I missing something here?

Thanks,

Tom

tshad wrote:
in message
Please get access to a public site and post your code there and a URL
here. Nobody wants to see all this code out of context. There are free
servers where you can put up a page for free, if your ISP doesn't
provide one.

Where would I find one of those?

GIYF: search for "free hosting" or "free web server" or something. I
really hate Yahoo's GeoCities, but if all else fails (getting _good_
hosting), you could go there as a last resort.


I actually have a couple of references, but from them references I
couldn't figure out the differences between:

.bodybold a:link

and

a.bodybold:link

Just CSS notation. The thing following the leading dot is a class name.
The thing peceding the dot, if present, is the element with that class.
A sequence of "things" separated by spaces show descendents, where each
thing is a descendent of the things to its left. A colon starts a
pseudo-selector. (And commas separate selectors in a list which use the
same rules, but you know that now.)

Selectutorial has some fine tutorials on CSS. Here's their page on
grouping selectors:
http://css.maxdesign.com.au/selectutorial/rules_group_sel.htm


At least not directly. For example, I didn't see in my references (may
have missed it) that a:Link affects the other classes.
BTW, if you have identical rules for :link, :hover, and :active, you
can probably just specify a:link, a:visited and leave out the others,
as they are affected by the a:link selector.

Are you saying that a:hover and a:active is affected by a:link or
a:hover is affected by a:link and a:active is affected by visited?
Just wanted to make sure.

Here's some more to read (and refer back to later). If you read this
(and understand it) you ought to have no more problems in this area.
http://www.satzansatz.de/cssd/pseudocss.html is a page which talks
primarily about bugs in IE regarding pseudo-selectors (so it's both more
than we're discussing here and also restricted to just a couple of
browser versions), but it contains a good explanation about the :link,
:visited, et. al. mechanics. I suggest that you just skip to
http://www.satzansatz.de/cssd/pseudocss.html#link-pseudo-classes and
read from there.

And from the horse's mouth (also linked to from above):
http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

And for dessert, here are a couple of fun facts from
http://www.quirksmode.org/css/hover.html ;-)

I will be looking at these pretty closely.

I have been looking at:
http://www.w3schools.com/css/css_pseudo_classes.asp with is pretty basic
but helps as a tickler to remember the format.

.test:hover doesn't work in Mozilla/Firefox in CSS Quirks Mode.

:hover on elements other than links doesn't work in Explorer 7 in CSS
Quirks Mode.


Also, since we are using the pseudo selectors, is a { }
not really useful? I can't figure out why I would use the "a" tag by
itself.

Not all <a> elements are links. You don't see the non-link kind very
often anymore, but they exist.


So I assume that the following:

.bodybold a:link
{
[snippage of repeated identical rules]
}
.bodybold a:visited
{
[snippage]
}
.bodybold a:hover
{
[snippage]
}
.bodybold a:active
{
[snippage]
}

Can be changed to:

.bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
a:active

If you correct the first a:active in what I presume is a typo here to

Yes, it was.

I meant it as you typed it.

.bodybold a:link, .bodybold a:visited, .bodybold a:hover, .bodybold
a:active

{
[snippage]
}

...then yes, but


or

.bodybold a:active, .bodybold a:visited
{
[snippage]
}

No. Don't know how you jumped here. Ah! unless you have the same typo.
If you mean .bodybold a:link, .bodybold a:visited, then yes.


The same with this:

a.bodybold:link
{
}
a.bodybold:visited
{
}
a.bodybold:hover
{
}
a.bodybold:active
{
}

can be changed to:

a.bodybold:link, a.bodybold:visited, a.bodybold:hover,
a.bodybold:active
{
}

or

a.bodybold:link, a.bodybold:visited
{
}
Well, yes, but do note that these are two entirely different examples
you've given. "a.bodybold:link" is different from ".bodybold a:link".

They are different examples - but just wanted to make sure there wasn't
some gotcha between the different types.

Thanks - this helps a lot,

Tom

 

[John Hosking]

tshad wrote:

Please don't top-post. Again.

I tried some of the suggestions from here and the articles mentioned and
still am confused. I tried applying this to a datagrid in asp.net which
renders to something like (with the CSS):

If you had a URL as we've discussed you wouldn't need to post this code,
and we could all see the results, in all the browsers we have available,
with all the debugging tools we have.

.gridHeaderStyle a:link, .gridHeaderStyle a:visited {
color:#red;
}

It's either color:red; or color:#FF0000; or color:#F00;

a.gridHeaderStyle:link, a.gridHeaderStyle:visited {
color:#red;
}

You don't have any elements which match this selector, as previously
discussed.

<tr class="gridHeaderStyle" align="Center">
<td style="width:100px;"><a href="#">Location</a></td>
</tr>

No matter what I do - the links in the header are
showing as lime green. I am trying to get them to change to red.

The links in my site should be Lime Green (a:link and a:visited).

No, not exactly. Lime green is #00FF00.

I have
the headerstyles' CssClass set to gridHeaderStyle - but it doesn't seem to
be working for the links in the header.

This comment is inexact enough to make me think you're doing something
(else) bizarre; when you say, "I have the headerstyles' CssClass set to
gridHeaderStyle," it makes me think you're using a class name as a
property for another class, which won't work. Of course without the URL
we can't see the entire code, and without the entire code we don't know
what's supposed to be a header.

I though the ".gridHeaderStyle a:link" or a.gridHeaderStyle:link would
override the a:link but it doesn't seem to be doing this.

Am I missing something here?

It could be that you need to add the td to the selector, as in
..gridHeaderStyle td a:link, .gridHeaderStyle td a:visited { color:red; }
but I think you probably just need to get the value right. If you had
provided a URL I could have tested it and told you for sure.

Tom, you really, really need to get into a position (and train yourself
to be in the habit) to validate your code. If you keep bashing your head
against invalid code, you're only going to end up with a bloody
forehead. Study the tutorials provided earlier to get your selectors
right, but don't even bother hoping for good results (or asking here)
before you know you have valid code.

And then if you still need to ask here, bring a URL. We'll be glad to
help you then.

HTH. GL.

 

[John Hosking]

tshad wrote:
[Previous text from tschad himself, including semi-relevant info, snipped]

I also tried to change the Link to:

<a style="color:#red;" href="#">

Please stop just guessing. Please validate your code.

But that didn't work either.

Tom

[rest of text from week-old and irrelevant posts snipped]
Please trim your posts.

 

[tshad]

tshad wrote:

Please don't top-post. Again.


If you had a URL as we've discussed you wouldn't need to post this code,
and we could all see the results, in all the browsers we have available,
with all the debugging tools we have.



It's either color:red; or color:#FF0000; or color:#F00;

You're right. I just figured it out before I saw the post. The color was
originally something like #E6E6E6 but I just double clicked it and changed
it to red. Didn't notice it hadn't grabbed the #.

You don't have any elements which match this selector, as previously
discussed.




No, not exactly. Lime green is #00FF00.

Probably right.

This comment is inexact enough to make me think you're doing something
(else) bizarre; when you say, "I have the headerstyles' CssClass set to
gridHeaderStyle," it makes me think you're using a class name as a
property for another class, which won't work. Of course without the URL we
can't see the entire code, and without the entire code we don't know
what's supposed to be a header.

It could be that you need to add the td to the selector, as in
.gridHeaderStyle td a:link, .gridHeaderStyle td a:visited { color:red; }
but I think you probably just need to get the value right. If you had
provided a URL I could have tested it and told you for sure.

Tom, you really, really need to get into a position (and train yourself to
be in the habit) to validate your code. If you keep bashing your head
against invalid code, you're only going to end up with a bloody forehead.
Study the tutorials provided earlier to get your selectors right, but
don't even bother hoping for good results (or asking here) before you know
you have valid code.

Actually, have been looking at the tutorials but I still get confused as to
when to use:

..gridHeaderStyle a:link, .gridHeaderStyle a:visited {
color:#red;
}

or

a.gridHeaderStyle:link, a.gridHeaderStyle:visited {
color:#red;
}

It seems that the 1st is the correct one, in this case. This was what I was
testing and of course couldn't get past the error.

Thanks,

Tom

 

[Jonathan N. Little]

"tshad" <[email protected]> wrote in message

<snip>

Seems we are taking wild stabs at it eh? How about looking up valid
syntax first.

http://www.w3.org/TR/CSS21/syndata.html#value-def-color

^
Of course because your rules are invalid so they are ignored...