Forum Moderators: not2easy

Message Too Old, No Replies

CSS Mouse-over problem with IE6

a:active{} state resumed upon return pending mouse event

         

jmf314159

3:15 pm on Feb 9, 2005 (gmt 0)

10+ Year Member



Below I show 4 debug modules: a style sheet and 3 web pages.

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">&nbsp; open &nbsp;</a> &nbsp &nbsp Dummy #1<br />
<a href="dummy2.htm">&nbsp; open &nbsp;</a> &nbsp &nbsp Dummy #2<br />
<a href="dummy1.htm">&nbsp; open &nbsp;</a> &nbsp &nbsp Dummy #1<br />
<a href="dummy2.htm">&nbsp; open &nbsp;</a> &nbsp &nbsp 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>

jmf314159

4:32 pm on Feb 9, 2005 (gmt 0)

10+ Year Member



Two points ...

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.

createErrorMsg

9:05 pm on Feb 9, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I seem to recall a similar discussion several months ago but can't put my finger on it. I believe this is default behavior for IE.

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]

jmf314159

9:22 pm on Feb 9, 2005 (gmt 0)

10+ Year Member



Thanks. It is exactly the same issue. The simple solution seems to be that of eliminating the a:active{} code.

GregK

1:41 am on Feb 10, 2005 (gmt 0)

10+ Year Member



Try them in this order, top to bottom...

a.link{
}
a:active{
}
a:visited{
}
a:hover{
}

cheers

jmf314159

2:41 am on Feb 10, 2005 (gmt 0)

10+ Year Member



I will. At the same time, ...
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...]

GregK

4:54 pm on Feb 10, 2005 (gmt 0)

10+ Year Member



Hey jmf, you're right on the placement of the active.
I usually don't use active & must have added it back in the wrong order?

Did the 'correct' :) ordering fix your problem?

That sounded like the problem to me?

cheers

jmf314159

6:47 pm on Feb 10, 2005 (gmt 0)

10+ Year Member



No, as I indicated the problem was 'fixed' by dropping the a:active{} declaration.

booberchi

12:00 am on Feb 16, 2008 (gmt 0)

10+ Year Member



I know that this is an old topic, but I figured that I would add my 2 cents because this topic is still relevant today and may benefit someone else.

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.

SuzyUK

11:10 pm on Feb 16, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi, booberchi & Welcome to WebmasterWorld

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 :)