Re: CSS link mystery

Karen,

After reading everyone else's replies that I've gotten thus far, I concur
that when initially visiting the page in IE (v6 for me), the top two links
are yellow. When I hover the mouse over them, they turn red. Clicking one or
the other and then going back to the page, the link is the default visited
and underlined purple.

Your code follows:
<!--
    a:link {  font-family: Arial, Helvetica, sans-serif; font-size: x-small;
font-style: normal; line-height: normal; font-weight: bold; font-variant:
normal; color: #FFFF00; text-decoration: none}
    a:hover {  font-family: Arial, Helvetica, sans-serif; font-size:
x-small; font-style: normal; font-weight: bold; font-variant: normal; color:
#FF0000; text-decoration: none}
-->

Now for me, I would set the common parts of the fonts in the BODY tag, if
possible with your design, to simplify the code a bit, leaving the unique
part of the code in the declarations. You question about why the active link
won't work can be answered simply: you don't have a:active defined, no do
you have a:visited defined, which is why when the mousedown event happens,
nothing changes (a:active) and when returning after visiting, the link is
the default style (a:visited). Set values for these two events as well, and
all should be fine.

Be aware that in my experience, the four a: events need to be in a certain
order to function properly. My default sequence for them is:
    a:active {definition}
    a:link {definition}
    a:visited {definition}
    a:hover {definition}

For the most part, my links remain in the same font as the rest of the site,
so as I mentioned above, I set the generic font decalrations in
    body {definition}
and then if I want a different font style used for my links, I add it
separately, such as
    .menutext {definition}
and then call the menulink class in the A tag.

If I want multiple styles for links, I add additional a: classes to my
stylesheet. One such example of this would be where I have three linking
sets: default, menubar one, and menbar two (where the two menubars are of
different background colors, thus requiring different font colors, and the
default body links are yet another color). An example of this setup, along
with what I've described above would be this:

    a:active {color: #990099; text-decoration: none;}
    a:link {color: #ffffaf; text-decoration: none;}
    a:visited {color: #ffffaf; text-decoration: none;}
    a:hover {background: #ffffaf; color: #f94833; text-decoration: none;}
    body {background-color: #4e75ab; background-repeat: repeat-x;
background-position: top; background-image:
url(../images/menubackground.gif); azimuth: center; font: 13px verdana,
arial, geneva, helvetica, sans-serif; color: #ffffff;}
    p {color: #ffffff; margin: 0px 0px 5px 0px; text-indent: 25px; font:
bold 13px verdana, arial, geneva, helvetica, sans-serif;}
    .menulink:active {color: #0000cc; text-decoration: none;}
    .menulink:link {color: #880000; text-decoration: none;}
    .menulink:visited {color: #880000; text-decoration: none;}
    .menulink:hover {background: transparent; color: #0000cc;
text-decoration: none;}
    .menulink2:active {color: #cc0000; text-decoration: none;}
    .menulink2:link {color: #000088; text-decoration: none;}
    .menulink2:visited {color: #000088; text-decoration: none;}
    .menulink2:hover {background: transparent; color: #cc0000;
text-decoration: none;}
    .menutext {margin-left: 0px; margin-top: 3px; color: #333366; font: bold
10px verdana, geneva, arial, helvetica, sans-serif; width: 640px;}

The above style sheet has had additional declaration removed, but shows the
default linking styles (a: classes), the body class, the p class (which
makes for indented paragraphs), the two additional menubar link classes
(.menulink and .menulink2) and the declaration for the font style used on
the menus (.menutext).

I hope these examples shed some light on your problem, and help you to solve
it! :-)

Kehvan

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:: NORTON ANTI-VIRUS 2002 scanned this email prior to sending. It is free
:: of any known embedded or attached viruses, trojans, or internet worms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


----- Original Message -----
From: "Noteworthy Web Designs" <webmaster(at)noteworthydesigns.com>
To: "HWG Techniques" <hwg-techniques(at)hwg.org>
Sent: Saturday, January 12, 2002 13:41
Subject: CSS link mystery


> OK, gang, you've been such a super help to me in catching the little
> tiny things that I'm overlooking........I sure appreciate it!
> I have another one. I'm trial-running it here:
> http://www.noteworthydesigns.com/waxing2.htm
> I cannot figure out why my active link CSS will not work. The hover
> does. What dumb thing am I missing? I only have two pages linked to the
> side so far. Thanks!!!
>
> --
> Karen Stafford
> Noteworthy Web Designs
> "Websites Composed with Jazz"
> Web Design,Hosting,Search Promotion
> http://www.noteworthydesigns.com
>
>
>
>

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA