css link coding

JulieAsking · 20-Aug-2007, 03:04 AM #1

My understanding is that coding links in a CSS stylesheet happens in a certain order. My links are shown below in that order:

a:link {
color: #1C3467;
text-decoration: underline;
}

a:visited {
color: #594B29;
text-decoration: underline;
}

a:hover {
color:#3076B6;
text-decoration: underline;
}
This works fine in Internet Explorer. Using Firefox and Mozilla Seamonkey I am unable to get the visited link colour to show up and have no idea why.

Can someone please make a suggestion?

Thanks
Julie

AnotherCoder · 20-Aug-2007, 04:40 AM #2

CSS Applies in the following order:

1. Any CSS styles applied directly to an element.

Ex. <a style="color:green;" href="">My Link</a>

2. Any CSS styles applied in the HTML HEADER section of your document.

Ex. (Snippet)

<html>
<head>
<style>
body{background-color:red; }

</style>
</head>

3. Any CSS styles Applied from a seperate stylesheet with the link tag in your HTML HEADER SECTION

Ex.
<html>
<Head>
<link href="style.css" rel="stylesheet" type="text/css" />

In regards to your incompatibility issue with Mozilla, you may want to create a container for your "a" element and assign it an "ID"

#navigation a:visited {
color: #594B29;
text-decoration: underline;
}

tomdkat · 21-Aug-2007, 07:51 PM #3

Quote:

Originally Posted by AnotherCoder

CSS Applies in the following order:

Thanks! I didn't know that.

Quote:

In regards to your incompatibility issue with Mozilla, you may want to create a container for your "a" element and assign it an "ID"

I got the same link color results in Firefox 2.0.0.6 on Windows and Maxthon2 (with IE 6 rendering engine) using the CSS she posted above untouched.

Julie, what are you seeing? Can you post the rest of your HTML (or a link to the page in question) to see if there is something else going on? Here is the test HTML I used that worked fine:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>link</title>
  <style type="text/css"> a:link {
color: #1C3467;
text-decoration: underline;
}
a:visited {
color: #594B29;
text-decoration: underline;
}
a:hover {
color:#3076B6;
text-decoration: underline;
}
  </style>
</head>
<body>
This is a <a target="_blank" href="http://www.thx.com/">link</a><br>
</body>
</html>

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)