Hover mouse on a link; page goes crazy 5

[Mike Lewis]

Well, "crazy" is an exaggeration. But it is slightly weird.

I've got a page with two navigation boxes, each containing several links.

The links across the top of the page are styled as follows:

.main-menu a { text-decoration:none; color:White; }
.main-menu a:active {background-color: Green;  }	
.main-menu a:hover {background-color: Green; }	
.main-menu a:focus {background-color: Green;  }

The links lower down, in a sidebar, are like this:

a { text-decoration:none; color:Blue;}
a:active {background-color:Silver;}
a:hover {background-color:Silver; }
a:focus {background-color:Silver;}

So, as you can see, the only differences are the colours.

I've tested this scheme with several different browsers, and it always behaves as expected.

Except for IE6. In that case, when I hover the mouse over one of the upper links, the whole of the lower part of the page jumps down about 10 pixels - and stays down after I un-hover the mouse.

When I hover over one of the lower links, it jumps up by 10 pixels.

The rest of the CSS and markup is completely straightforward. There's no Javascript or anything like that.

My question is: Has anyone else come across this behaviour? Is it a well-known feature of IE6?

To be honest, it's not a big worry for me. I don't want to go to a lot of trouble to debug or fix it. On the other hand, I don't want to show my ignorance if it's a well-known issue with an easy solution.

Mike



__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

 

[1DMF]

Do you have a link to the page ?

Need to see more than you are showing.

Also you say lower down the links are like

a { text-decoration:none; color:Blue;}
a:active {background-color:Silver;}
a:hover {background-color:Silver; }
a:focus {background-color:Silver;}

well if you have that lower down, then it overrides any previously defined CSS, as you are applying it to the root anchor tag.

any CSS is read from top to bottom so if you define a:hover {color:#FF0000;} then later define a:hover{color:#0000FF;}

the first defenition is ignored and overridden by the second.

the best way I find is to define root styling first, then other classes and ID styling...

a:hover{color:#FF0000;}

a.myClass:hover{color:#0000FF;}

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[Mike Lewis]

1DMF,

Thanks for your fast reply.

I understand your point about the lower-down styling overriding what comes before. But I don't think that's the case here. My styles are in the right order within the CSS file. It's just in the HTML where the .main-menu styles come after the root styles.

In any case, I'm not sure if that would explain the weirdness I'm seeing.

You can see the page in question here:

http://www.veg-world.com/underprep/abernethy.htm

As I mentioned, it's only happening with IE6 (and possibly earlier versions; I don't know). In all other browsers I've tested, it looks fine.

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

 

[traingamer]

I see it in IE6. I don't have a clear handle on it yet, but, weirdly, if I change this:

.masthead {
	MARGIN-TOP: 5px;
}

to this:

.masthead {
	MARGIN-TOP: 5px; background: white;
}

the problem disappears (but the pixels are added to the page).

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[Mike Lewis]

Greg,

You're right. I added that background style as you suggested, and the problem went away. Isn't that weird?

If you - or anyone - comes up with an explanation, I'd be interested to hear it. Meanwhile, I'll go with your solution. Many thanks for taking the time.

Mike


__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

 

[Vragabond]

I don't have IE6 to test this right now, but IE6 was full of bugs like this one. It had a very poor implementation of CSS and a lot of times hover effects would cause changes in rendering in other parts of the page. Very often, the solutions were arbitrary, like this one. Adding something to CSS that would force hasLayout in IE6 usually solves the issue. Learn more on hasLayout here.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Vragabond]

Additionally, you will not get the full effect of your pseudo classes as they appear in an incorrect order. Pseudo classes always need to appear in the following order:

:link
:visited
:focus
:hover
:active

If they're done differently, some of the effects will not be seen. I am sure it is of no help, but I managed to remember this through a mnemonic "Luther Vandross finds her attractive".

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[Mike Lewis]

Vragabond,

Yes, I know what you mean about IE6. I'm trying not to worry about these minor problems that only crop up in IE6, but I just wanted to make sure I wasn't missing something obvious. I'll read the article on hasLayout when I can grab a moment.

I didn't realise that the order of the pseudo classes was important. I'm still very much in learning mode in CSS.

Thanks for your help.

Mike
P.S. All I need to do know is figure out a mnemonic for Luther Vandross.

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

 

[1DMF]

nice spot Vragabond , forgot about the precedence rule on anchor psuedo classes


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[traingamer]

I missed the precedence as well - good one.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[BillyRayPreachersSon]

This looks like the old favourite, the IE6 Peekaboo bug. See here for more on this and many other IE6 issues:

http://www.positioniseverything.net/explorer/peekaboo.html

As the article says, if you give the float holder (.masthead) layout, then the problem goes away:

<div class="masthead" style="zoom:1;">

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[1DMF]

Trust Dan to find the solution

I also found this page which has info on the property.

http://www.bennadel.com/blog/1354-The-Power-Of-ZOOM-Fixing-CSS-Issues-In-Internet-Explorer.htm

What i find interesting is a little bit down the posts is this little nugget.

I found this little hack for IE based Issues or say FF based issues too related to the CSS.

In this statement:

width:20px;#width:23px:_width:20px;

FF applies the first width; IE7 applies the second one and IE6 applies the third one. This method works on all the CSS attributes too

Dan do you know if this method works?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts

 

[ChrisHunt]

I managed to remember this through a mnemonic "Luther Vandross finds her attractive".

A more geeky alternative:

Lord Vader's Former Handle Anakin

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Mike Lewis]

I'm going to show my ignorance here, but who or what is or was Luther Vandross?

Mike

__________________________________
Mike Lewis (Edinburgh, Scotland)

Visual FoxPro tips, advice, training, consultancy
Custom software for your business

 

[1DMF]

Luther Vandross was a massive 1980's soul singer.

What I guess you'd call R'n'B today.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

Google Rank Extractor -> Perl beta with FusionCharts