4 replies [Last post]
rockart
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2004-09-01
Posts: 3
Points: 0

Hi,

First part of this stylesheeet works fine.
Inline section following (bold) only partly works.
What doesn't work is the linked (unvisited) colour. Can anyone see why? At the bottom is the html.
(The path is correct as the first part works and does not if the path is changed)
Many thanks.

BODY { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
COLOR: #333333; FONT-SIZE: 10px; }

TD { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
COLOR: #333333; }

A { COLOR: #000099; text-decoration: NONE}

A:HOVER {
text-decoration: none;
color: Red; }
a:visited { color: #666666; text-decoration: none}

A:VISITED:HOVER {
color: Red;
text-decoration: underline;
}

H1 {FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 17px; COLOR: #000066; }


.greenlink A { COLOR: GREEN; text-decoration: underline;}

.greenlink A:HOVER {
text-decoration: none;
color: Fuchsia;
}
.greenlink a:visited {
color: Olive;
text-decoration: underline;
}

.greenlink A:VISITED:HOVER {
color: Red;
text-decoration: underline;}





<HTML>
<HEAD>
<TITLE>css check</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../../styles/content_01a.css">
</HEAD>
<BODY bgcolor="#FFFFFF" leftmargin="10" topmargin="0" marginwidth="0" marginheight="0">
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P><A href="http://abc.com">DEFAULT LINK</A> </P>
<P><A href="http://abcd.com">DEFAULT LINK</A> </P>
<P><A class="greenlink" href="http://abcde.com">INLINE LINK</A> </P>
<P><A class="greenlink" href="http://abcdef.com">INLINE LINK</A> </P>

</body>
</html>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Gotta be something obvious...?

Not an expert here, but it looks like your statement is wrong. Your trying to define an anchor inside of a class of greenlink.
I think it should be like this instead:

A.greenlink { COLOR: GREEN; text-decoration: underline;}

A:HOVER.greenlink {
text-decoration: none;
color: Fuchsia;
}
a:visited.greenlink {
color: Olive;
text-decoration: underline;
}

A:VISITED:HOVER.greenlink {
color: Red;
text-decoration: underline;}

Give it a try, and post the results

rockart
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2004-09-01
Posts: 3
Points: 0

Success!

Here's what works.

The problem was in the html

The class thing can go in more than one place it seems except for the a href link which is apparently more critical where what worked for me was to put the class bizzo in the 'enclosing' tag, a P tag or div tag etc

<HTML>
<HEAD>
<TITLE>css check</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../../styles/content_01a.css">
</HEAD>
<BODY bgcolor="#FFFFFF" leftmargin="10" topmargin="0" marginwidth="0" marginheight="0">
<P>&nbsp;</P>
<P>&nbsp;</P>
<P>&nbsp;</P>
<P><A href="http://abc.com">DEFAULT LINK</A> </P>
<P><A href="http://abcd.com">DEFAULT LINK</A> </P>
Change this:
<P><A class="greenlink" href="http://abcde.com">INLINE LINK</A> </P>
to this:
<P class="greenlink"><A href="http://abcde.com">INLINE LINK</A> </P>

</body>
</html>

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 47 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Gotta be something obvious...?

Rockart,

that's what I was saying when I stated you were trying to address the anchor tag inside an element of class greenlink. The changes you made work, but don't seem the most appropiate for what your trying to do (but who am I to say). If you wanted a greenlink anchor outside of a <p> tag, you would need to change or add css.

rockart
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2004-09-01
Posts: 3
Points: 0

Gotta be something obvious...?

Thanks W.
I was not able to get your css to work, did you try it?

The other actions, hover colour, visited colour etc were fine in what I had but the link colour (unvisited) did not work until I moved the class= into the P tag on the HTML page, so my mistake seemed to be in the HTML page, not the style sheet.
However, if the style sheet can be written better I would love to try it. Is it working now because the browser is tolerant rather than because I have done a good job of it. Always learning.
Thanks again
R

Am interested to know if the class stuff in the style sheet can be compacted so I don't have to keep closing the } brackets and starting the .classname over and over.

[[Input from others would be welcome too]]
.