Forum Moderators: not2easy
This is my first post and I'm sure that it's been covered before, but I haven't been able to find the solution.
My problem is that the color and decoration properties that I set for my links is only working with HOVER and VISITED.
Thoughts?
<style type="text/css">
<!--
body {
background-color: #ffffff;
background-image: url(bg.jpg); background-attachment: fixed; background-repeat: repeat-x; background-position: 50% 0}
h3 {background-color: #ffffff;}
.blueback {background-color: #ffffff;}
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
a:link {text-decoration: none; color: #EEAA3B;}
a:visited {text-decoration: none; color: #EEAA3B;}
a:active {text-decoration: none; color: #EEAA3B;}
a:hover {text-decoration: underline; color: #EE9400;}
}
-->
</style>
DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Is the above an exact copy of your CSS? If so, there's a few things out of place. If I am assuming your intent correctly, then it should read:
<style type="text/css">
<!--
body { background-color: #ffffff; /* Not needed - default */
background-image: url(bg.jpg); background-attachment: fixed; background-repeat: repeat-x; background-position: 50% 0;
margin: 0px; /* All 4 side snot needed. Also, other shortcut is margin: 0 0 0 0 with the first digit being the top and then proceeding clockwise right, bottom, right */
}
h3 {background-color: #ffffff;}
.blueback {background-color: #ffffff;}
a:link {text-decoration: none; color: #EEAA3B;}
a:visited {text-decoration: none; color: #EEAA3B;}
a:active {text-decoration: none; color: #EEAA3B;}
a:hover {text-decoration: underline; color: #EE9400;}
-->
</style>
Marshall
Anyways, the most likely reason for the anchor styling not working right is because whenever you do them, it's very important that you list the styles in the right order.
active must come after hover, and hover must come after link or visited. Swapping the line hover with active should fix the problem.
Also notice how your link, visited, and active styles are all the same? (I'm not sure if this is intentional, or just for example purposes). All you really need to do is go a{most common style) then a:hover{the different style}, which will save you coding. This can be done on other elements as well. It's always good to have a base, and then if something is different from the base, then specify it's differences.
Lastly, your anchors have their text decoration removed. Realize that this is an accessibility feature browsers implement so that it's easier for people to tell what are links and what aren't. It doesn't mean you need it, but you should have something to replace it if you don't want the underline. Having it a different color isn't always good enough, because other text on the page can also be a different color, and the person woudlnt' be able to tell at a glace which color is an anchor. Setting borders, outlines (not universally supported), and/or background colors are other ways to point out anchors.
[edited by: Xapti at 4:18 pm (utc) on July 24, 2007]
i'm fairly new at the CSS thing
We all have to start some place. Me, I think I need typing classes or not post when I am tired
All 4 side snot needed;)
And Xapti is right about the order. Sorry I didn't catch that.
Marshall
[edited by: Marshall at 4:20 pm (utc) on July 24, 2007]
CSS:
@charset "utf-8";
/* CSS Document */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#000000;
color:#FFFFFF;
}
a {
color: AF772B;
text-decoration:none;
}
a:hover {
color: 63B12B;
text-decoration:underline;
}
.main_image {
padding:5px;
border:1px solid #333333;
margin:5px;
}
-------------------
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test page</title>
<link href="/teststyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p><a href="http://www.yahoo.com">Yahoo.com</a></p>
<p> </p>
<p><img class="main_image" src="/images/20070722042726_img_4322c.jpg" width="700" height="401" /></p>
</body>
</html>
