Forum Moderators: not2easy
Rollover is implemented by changing both text color and border style. All works as expected using Firefox. With IE6, however, the hover/active effect works and I am linked to the appropriate page, but upon return the link still appears in th ehover/active state until the system detects a mouse event.
A comparable operation can be seen by changing the a:active{} operation such that it is the same as a:link{}. In this case, and upon returning to the parent web page, hover is 'disabled' until the mouse is clicked somewhere on the page.
No doubt I'm doing something wrong, but I haven't a clue as to what it might be. Hopefully it's obvious to some of you.
Thanks for your help ...
/* Document: dbg1.css */body {
margin : 100px 100px 100px 100px;
padding : 0px 0px 0px 0px;
background-color : #548B54;
font-family : Arial, sans-serif;
font-weight : bold;
font-size : 12pt;
line-height : 180%;
}a:link {
text-decoration : none;
background-color : #2f4f4f;
color : #eee8aa;
border : 3px outset #006400;
}
a:visited {
text-decoration : none;
background-color : #2f4f4f;
color : #eee8aa;
border : 3px outset #006400;
}a:hover {
text-decoration : none;
background-color : #2f4f4f;
color : #ffff00;
border : 3px inset #006400;
}
a:active {
text-decoration : none;
background-color : #2f4f4f;
color : #ffff00;
border : 3px inset #006400;
}
<!-- Document: dbg1.htm --><html>
<head>
<title>debug</title>
<link href="dbg1.css" rel="stylesheet" type="text/css" />
<head>
<body>
<a href="dummy1.htm"> open </a>     Dummy #1<br />
<a href="dummy2.htm"> open </a>     Dummy #2<br />
<a href="dummy1.htm"> open </a>     Dummy #1<br />
<a href="dummy2.htm"> open </a>     Dummy #2<br /></body>
</html>
<!-- Document: dummy1.htm --><html>
<head>
<title>dummy1</title>
<head><body>
<h1 align="center">Dummy 1</h1>
</body>
</html>
<!-- Document: dummy2.htm --><html>
<head>
<title>dummy2</title>
<head><body>
<h1 align="center">Dummy 2</h1>
</body>
</html>
I noticed that, in my zeal to kludge together some debug code, I failed to properly close out the head tags. Doing so neither corretd the problem nor changes the symptoms.
I read on another site that my problem could be solved by eliminating the a:active{} specification in the stylesheet. This does, indeed, correct the problem, but I'm still curious to know if there might be other solutions.
cEM
[ADDED]
Found one here [webmasterworld.com]. It's not an exact match to your problem, but it's similar. Check out message #12 by Lance. He provides a simple javascript solution to clear out the active state when the page loads.
[/ADDED]
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!Note: a:active MUST come after a:hover in the CSS definition in order to be effective!
Note: Pseudo-class names are not case-sensitive.
Note: IE 4 and higher supports the anchor pseudo-class. NN 4.5 and Netscape 6 support the anchor pseudo-class only partially.
- see [w3schools.com...]
I had a similar issue with IE6 not returning to an active state [it remained stuck in the hover state]. The exception was that I was using images. I didn't need an image for the active or visited state since the background to the div contained the image I wanted for those states. So, to be clear, the only image that I needed was the one for the hover state.
After reviewing my code, I realized that I didn't specify anything/nothing for the active and visited states. I solved this problem by simply adding the following to the active and visited states:
background: transparent;
Just a simple solution for an annoying and stupid problem/bug.
it's often IE's way that we need to help it out by spelling out rules that we would assume it to know.. it's an important reminder that simply by declaring rules for defaults it can help IE past and present
background hover effects (redraws) and hasLayout errors are closely related so perhaps that's why specifying those rules worked in your case.. many thanks for adding your observations in this thread :)