Forum Moderators: not2easy
A link is displayed with this code:
<a id="a" href="index.htm">CNB HOME</a>
I get inconsistent behavior between IE7 and FF.
In both IE7 and FF in the display mode the background color disappears (it is white). "Active" is not active at all. And there are other problems.
Can anyone suggest how to fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
<style type="text/css">
#a {display: block; text-decoration: none; padding: 5px 10px;}
#a:visited {background-color: #fff; color: #003980;}
#a:hover {background-color: inherit; color: red; text-decoration: underline;}
#a:active {background-color: #cc0033; color: #fff;}
</style>
</head>
<body>
<a id="a" href="index.htm">CNB HOME</a>
</div>
</body>
</html>
When I click on the link, the background changes to red with white text. What exactly is it that you think is wrong?
From my testing though... everything seems to work as the code says...
Do you not want the background color to be removed when you hover over it?
If so then you shouldn't have background-color:inherit there! What else do you think it's for?
Xapti
You're right about the id. I have changed that to class. However, the links are working exactly the same?
The background of the div is green.
The background for the links is not set, so they are colored with my browser default (blue text), no underline, on green background.
If I hover over a link, it becomes red, underlined text over a blue background.
If I click on a link and hold the mouse button down (to view the active style), it has white, underlined text on a red background.
After following the link and returning (the link is now visited), I see a darker blue text on a white background.
All of these are exactly as defined in the styles. I'm wondering if perhaps you're thinking that :active means something different than it does? In case you're wondering, :active means a link that is in the process of being followed. It does not mean "the current page" link, as some people seem to think.
Here's my updated test case:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
<style type="text/css">
div { background-color: #bfddbf; }
.a {display: block; text-decoration: none; padding: 5px 10px;}
.a:visited {background-color: #fff; color: #003980;}
.a:hover {background-color: inherit; color: red; text-decoration: underline;}
.a:active {background-color: #cc0033; color: #fff;}
</style>
</head>
<body>
<div>
<a class="a" href="index.htm">CNB HOME</a>
<a class="a" href="page2.htm">Another link</a>
<a class="a" href="page3.htm">Another link</a>
<a class="a" href="page4.htm">Another link</a>
</div>
</body>
</html>
[edited by: Fotiman at 2:40 pm (utc) on April 26, 2007]
My opinion is currently that you probably have your browser set to ignore style colors give by pages for links, and use the color settings set in browser. I kinda doubt this though, but It's the only thign i can suggest at this point.
And a simple way of describing ":active"... "while mouse down" (or "onmousedown" in JS, but that is a one time trigger, so doesn't compare very well), I, as well as the other guy (sorry I'm writing the post and can't see) are probably aware of that.
Meantime using inline styling I've got the browsers to do what I want. And both IE7 & FF are doing the same thing. I couldn't seem to get it done through the external or embedded style sheets.
The change was easy using a CMS find & replace function.
Now I will revisit my alma mater "The self-study, trial & error School"
