Forums

dave

hey chris i have a question for you are anyone familar with the issue,
basicly im having an issue with using hover in ie6 (excluding anchor links). after extensive searching, i found and article where chris mentions a fix using csshover.htc, and gives a link to the arthors page.
after following the link and following the arthor instructions, after a few hours i finally got the fix to work in ie6 (im a newbie). basicly what i did was added the

body {behavior: url(csshover.htc);}

to my css and saved the csshover.htc file in my root folder. this is what is kinda working for me now. the reason i was having so much trouble before was because i was insistant on saving the file in my theme folder with the actual css file.

which leads me to my problem. i am using wordpress and it seem that this hack is working in ie6 but only on the home page of my site (rollover is in the header). when i click on any of the pages, then try to click my rollover header, it doesnt work.

any suggestions, anyone.

dave

Is there not any one familar with this issue? I've been searching all over and have even contacted the author of the fix.
Again I'm just trying to get a hover image I'm in my header to work on pages other than my home page, and in ie6. I'm using wordpress.

daGUY

I've had trouble getting csshover.htc to work in the past. Here's an alternative method I recently used:

First, create an IE6-only stylesheet and link to it in your <head>:

<!--[if lte IE 6]>
<link rel=\"stylehsheet\" type=\"text/css\" href=\"css/ie6.css\" />
<![endif]-->

In that stylesheet, add a selector like this, which contains any non-anchor element that you want to use the hover effect on:

li, div.box {
	behavior: expression(
	this.onmouseover = new Function(\"this.className += ' hover'\"),
	this.onmouseout = new Function(\"this.className = this.className.replace(' hover','')\"),
	this.style.behavior = null
	);
}

So in the above example, any time the user hovers over a list item or a div with the class "box", a class "hover" will be applied to that element.

Now just style your hover however you want, only using .hover (the class) instead of :hover:

li {color: #000;}
li.hover {color: #666}

This is essentially what csshover.htc does anyway, but I've had this method work for me when csshover.htc hasn't in the past (I don't know why). Give it a try.

dave

daguy, thanks for replying,

Im wondering if i can use the method that you described to target my #header id (instead of the class box or a list). The background of the header id is where i have my image located at, that im trying to use as a rollover (sprite).
is this possible? i tried to make a few changes to the ie6.css file, but im afraid that there is still much im learning.
if your familar with how this might work, i would appreciate any instructions and will surely try it.

thanks again.

chriscoyier

One thing you should look into using is Dean Edwards IE7 script:
http://dean.edwards.name/IE7/

Forces IE6 to behave a lot smarter, allowing for :hover's on elements that it normally wouldn't work on (among many many other fixes).

dave

thanks chris,
that dean edwards code did it with ease.

treehouse : what would you like to learn today?

Forums

csshover in ie6 (solved)