Problem with visited links

[Rickard Lindhé]

Hey.

I'm experiencing a problem using a css stylesheet on my homepage
(http://w1.193.telia.com/~u19305515/test/testis.html). As you can see, the
link works according to the stylesheet when not visited. But when the link
is visited, the stylesheet has no effect on the link. Basically, what my
problem is all about, is that I want my visited links to be underlined in
hover, just like they are when not visited.

I hope there is someone who can help me with this issue!
/Rickard

This is how my .css file looks like now:

A:active {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION:
underline
}
A:hover {
COLOR: #aa0050; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION:
underline
}
A:link {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION: none
}
A:visited {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION: none
}
BODY {
COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica; FONT-SIZE: 8pt;
}

#PCL {
font-family: Verdana,Arial,H elvetica;
font-style: none;
font-weight: normal;
text-decoration: none;
font-size: 8pt;
}

#PTT {
font-family: Verdana,Arial,H elvetica;
font-size: 8pt;
}

#PST {
font-family: Verdana,Arial,H elvetica;
font-size: 8pt;
}

[Steve Pugh]

"Rickard Lindhé" <ri***********@ telia.com> wrote:

I'm experiencing a problem using a css stylesheet on my homepage
(http://w1.193.telia.com/~u19305515/test/testis.html). As you can see, the
link works according to the stylesheet when not visited. But when the link
is visited, the stylesheet has no effect on the link. Basically, what my
problem is all about, is that I want my visited links to be underlined in
hover, just like they are when not visited.
This is how my .css file looks like now:

A:active {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION:
underline
}
A:hover {
COLOR: #aa0050; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION:
underline
}
A:link {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION: none
}
A:visited {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION: none
}

The last style defined takes precedence when more than one style of
equal specificity applies. When a link is both visited and hovered the
last defined style will be used, which in your case is :visited.

The preferred order is :link :visited :hover :active

BTW, points are print media units and really aren't much good for use
in screen stylesheets. Google for the many threads explaining why.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>

[Neal]

On Tue, 17 Feb 2004 23:21:35 GMT, Rickard Lindhé <ri***********@ telia.com>
wrote:

A:active {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION:
underline
}
A:hover {
COLOR: #aa0050; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION:
underline
}
A:link {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION:
none
}
A:visited {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION:
none
}

In addition to Steve's points, I'm wondering whether it's wise to
eliminate the underlining on these links. Sure, you dd it when someone
hovers, but how do you know it's there to hover over it? Seems to me these
links will be followed through dumb luck.

Perhaps your context makes it absolutely and unambiguously clear where the
links are without underlining, in which case never mind.

[Beauregard T. Shagnasty]

Quoth the raven named Rickard Lindhé:

Hey.

I'm experiencing a problem using a css stylesheet on my homepage
(http://w1.193.telia.com/~u19305515/test/testis.html). As you can see, the
link works according to the stylesheet when not visited. But when the link
is visited, the stylesheet has no effect on the link. Basically, what my
problem is all about, is that I want my visited links to be underlined in
hover, just like they are when not visited.

I hope there is someone who can help me with this issue!
/Rickard

This is how my .css file looks like now:

A:active {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION:
underline
}
A:hover {
COLOR: #aa0050; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION:
underline
}
A:link {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION: none
}
A:visited {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION: none
}
Your sequence is wrong. It needs to be link, visited, hover, active.
"Las Vegas Has Animals."

BODY {
COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica; FONT-SIZE: 8pt;
}

#PCL {
font-family: Verdana,Arial,H elvetica;
font-style: none;
font-weight: normal;
text-decoration: none;
font-size: 8pt;
}

#PTT {
font-family: Verdana,Arial,H elvetica;
font-size: 8pt;
}

#PST {
font-family: Verdana,Arial,H elvetica;
font-size: 8pt;
}

Please read any of the other dozens of threads that tell you Verdana
is a Bad Idea™ and to assign font-size: 100%
http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

Oh, you do not need to repeat the font-family in every style. Just
place it once in the body {}. The C of CSS is Cascading.

--
-bts
-This space intentionally left blank.

[Stan Brown]

It seems "Steve Pugh" wrote in
comp.infosystem s.www.authoring.stylesheets:

The preferred order is :link :visited :hover :active

After which I put a[name] because some browsers (sorry, don't
remember which) styles <a name="...">...</a> the same as links, and
that cured it.

Seems strange that a browser smart enough to recognize an attribute
selector would be dumb enough to think that <a name> is a link, but
it happened.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Jukka K. Korpela]

Stan Brown <th************ @fastmail.fm> wrote:

The preferred order is :link :visited :hover :active
After which I put a[name] because some browsers (sorry, don't
remember which) styles <a name="...">...</a> the same as links, and
that cured it.

Mozilla?
Seems strange that a browser smart enough to recognize an attribute
selector would be dumb enough to think that <a name> is a link, but
it happened.

Actually, if you use the selector :hover as such, or the selector
a:hover, then I'd say there's nothing foolish in making it match any
<a> element when hovered. Whether an <a> without href can be in the
pseudo-class :active is more questionable, but there's nothing in the
specs that prevents it.

So the safe approach is
:link { ... }
:visited { ... }
:link:hover, :visited:hover { ... }
:link:active, :visited:active { ... }

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[David Dorward]

Stan Brown wrote:

After which I put a[name] because some browsers (sorry, don't
remember which) styles <a name="...">...</a> the same as links, and
that cured it.

Seems strange that a browser smart enough to recognize an attribute
selector would be dumb enough to think that <a name> is a link, but
it happened.

Such browsers don't think that <a name> is a link, and don't apply styles
using the a:link or a:visited selectors. They do apply the a:hover selector
because this says "An anchor that has the mouse over it" not "A link that
has the mouse over it".

--
David Dorward <http://dorward.me.uk/>

[Safalra]

"Rickard Lindhé" <ri***********@ telia.com> wrote in message news:<3m******* *************@n ewsb.telia.net> ...

[snip]
A:visited {
COLOR: #4040cc; FONT-FAMILY: Tahoma; FONT-SIZE: 9pt; TEXT-DECORATION: none
}

With a few exceptions, it's generally a bad idea to remove the
underline from links (even visited ones). See the second half ('Why
not to do it') of:

http://www.safalra.com/hypertext/htm...linelinks.html

--- Safalra (Stephen Morley) ---
http://www.safalra.com/hyerptext

[Nick Theodorakis]

On Wed, 18 Feb 2004 19:45:19 -0500, Stan Brown
<th************ @fastmail.fm> wrote:

It seems "Steve Pugh" wrote in
comp.infosyste ms.www.authoring.stylesheets:

The preferred order is :link :visited :hover :active

After which I put a[name] because some browsers (sorry, don't
remember which) styles <a name="...">...</a> the same as links, and
that cured it.

That would be Mozilla, as Jukka surmised. But you can also "cure" that
problem by keeping the attribute empty; e.g.:

<h2><a name="foo"></a>Bar</h2>

I've read several times that some (older?) browsers have trouble with
keeping the attribute empty, but it seems to work for me in every
browser I've tried, even NS4.

Nick

--
Nick Theodorakis
ni************* *@hotmail.com
nicholas_theodo rakis [at] urmc [dot] rochester [dot] edu

[Jukka K. Korpela]

ni************* *@hotmail.com (Nick Theodorakis) wrote:

<h2><a name="foo"></a>Bar</h2>

I've read several times that some (older?) browsers have trouble with
keeping the attribute empty, but it seems to work for me in every
browser I've tried, even NS4.

But this trick is not needed if you use suitable selectors, as
mentioned - and it is instructive to learn to use selectors properly.

Empty <a> elements used to confuse some rather early browsers (could
have been IE 2 or something), and much later some problems with quite
different browsers emerged. Instead of trying to trace back the history
and study the present and guess the future, I would just use the safe
and logical way.

Some people say that the logical way is to use just the id attribute,
and W3C policy says the same. And <h2 id="foo">Bar</h2> works fine on
most browsers, and avoids the problem discussed here. But
<h2><a name="foo">Bar</a></h2> is still somewhat safer.

There's a CSS-related reason to avoid empty <a> elements. Suppose an
author wishes to study a page (written by someone else, or maybe by
himself a year ago) to see the possible target anchors, in order to
know what locations inside the page can be "jumped into". Reading the
source code is one option, but it is more comfortable to authors who
use an advanced browser to set up a user style sheet that hightlights
a) all elements with id attributes
b) all a elements with name attributes
and what happens in b) when the element is empty?

(OK, this argument cheats a little. An advanced browser supports
:before and :after pseudoelements, too.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/