/    Sign up×
Community /Pin to ProfileBookmark

:link,:visited question

Copy linkTweet thisAlerts:
Dec 10.2002

I’m experiencing something strange…
Here is what I have going on:
-page1.html that links to page2.html (target is same window, no frames)
-for page1.html I have defined a:link, a:visited, a:hover, and a:active (in that order)
-the links on page1.html are grouped in a <table>
-I click on a link and page2.html comes up…when I link back to page1.html, all the links within the table are colored as a:visited.

-Ideally, when I return to page1.html, I’d like to see the unvisited links remain as the a:link color.

Anyone have an idea what is happening? Fixes?
Thanks!
..Andy

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@StefanDec 11.2002 — For starters, which browsers did you test with? This sounds like a possible browserbug.

You have an URL to the page?
Copy linkTweet thisAlerts:
@Zach_ElfersDec 11.2002 — put: <body vlink="color">
Copy linkTweet thisAlerts:
@StefanDec 11.2002 — [i]Originally posted by Dave Clark [/i]

[B]I heard once that order was important (I'd call that a bug, really).

[/QUOTE]



It's not a "bug", it's an very central and important part of the CSS language. Infact it's so important that the C in CSS actually stands for this feature, called Cascading.

The Cascading concept means that a later rule always overrides a previous rule (of the same specificy/importance).

Without this feature CSS would only be a fraction as powerfull as a language as it is with this feature.



I take advantage of the cascading heavily on basicly every webpage I make, especially to work around browserbugs in an effective manner.





I have a page that uses them in this order:

<i>
</i>a:link { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: line-through; }
a:visited { text-decoration: none; }

[/QUOTE]
That is the wrong order for how most people would want it to work.

If you have it like that, once a link has been visited it will NEVER get the underline or line-though rules applied (in a nonbuggy browser).

This is becuse the last rule that applies to the link is a:visited { text-decoration: none; }

Most times you probably want this order (that amui stated at the top)

a:link

a:visited

a:hover

a:active
Copy linkTweet thisAlerts:
@amuiauthorDec 11.2002 — I don't have it public just yet...heheh, for obvious reason that I have a problem. :-)

Yeah, I messed with the ordering of the a: styles, but like the docs and stefan said, the latter does supercede the formers.

I'm testing the page with IE6.0, which is why I'm confused why I'm getting this type of behavior. Checked out cnn.com and yahoo.com and they seem to have the right idea...

I'm probably going to fiddle with a simple test page to see if I can repeat the phenomenon. Stay tuned, and if anyone has any input, much appreciated!!!
Copy linkTweet thisAlerts:
@amuiauthorDec 11.2002 — Silly mistake on my part. So the CSS does not seem to distinguish <a href="page2.html#article1"> from <a href="page2.html#article2">. Since both links point to page2.html, all the links are considered visited.

Anyone know a way to increase granularity to the anchor?

Thanks,

..Andy
Copy linkTweet thisAlerts:
@StefanDec 11.2002 — [i]Originally posted by amui [/i]

[B] Since both links point to page2.html, all the links are considered visited.



Anyone know a way to increase granularity to the anchor?

[/B][/QUOTE]

Sadly the implementation of the visisted state is up to each browser AFAIK, and the defacto standard is that if you visited the page, all links to the same page show up as visited.
Copy linkTweet thisAlerts:
@StefanDec 11.2002 — [i]Originally posted by Dave Clark [/i]

I changed the order, as recommended, and it does work even better now. Thanks.
[/QUOTE]

There is other states and combinations one can use too with links that are quite nice, however IE is buggy with anything but the simplest of codes. On one site I use eg this (all rules with html>body is stuff IE doesn't implement correctly)

.nav a:link,

.nav a:visited { color:#53533C; background:#dda; }

.nav a:hover { color:#000; background:#ffc; }

html>body .nav a:focus { color:#FFF; background:#636347; }

html>body .nav a:hover:focus { color:#222; background:#85b7fe; }

.nav a:active { color:#FFF; background:#636347; }

html>body .nav a:hover:active { color:#222; background:#9cf; }
Copy linkTweet thisAlerts:
@CharlesDec 12.2002 — [font=georgia]Neither, read the specification: http://www.w3.org/TR/REC-CSS1#color-units.[/font]
Copy linkTweet thisAlerts:
@King_PellinoreDec 12.2002 — I only know two correct ways to write hex colours:
[list]
  • [*]#XXXXXX

    Ie. six hex chars. This is the normal representation for 24bit colour.

  • [*]#XXX

    Three hex chars. This is a shorthand and the "safe" way to define a colour.

    • [/list]

    The three hex chars format is expanded in the following fashion:

    #ABC becomes #AABBCC

    #FFF becomes #FFFFFF

    #000 becomes #000000

    #13D becomes #1133DD

    Why? well, as you might notice, now you have only 16^3 colours to work with, instead of 16^6

    To the human's eye colours, such as #AAA and #AAB will look only slightly different, while we probably would not notice a colour change at all when we are writing #AAAAAA and #AAAAAB. So the second notation takes more time for the brain to figure out. The main reason: to ensure that older monitors produce the same colour as you intended.

    [COLOR=firebrick][SIZE=3]Note: this is for CSS only, the same doesn't work for HTML[/SIZE][/COLOR]
    ×

    Success!

    Help @amui spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.24,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...