IE 6 and lower versions of IE only implemented :hover for tag a. As per CSS 2.1 specification, all HTML tags / elements have :hover state so that when mouse pointer hovers over, different styles can be applied to them.
li:hover is one of the frequent reasons why you need this hack. First, you have to download the .htc file.
and implement it in your CSS file like this:
body {
behavior:url("/styles/csshover3.htc");
}supposing you have put it in styles directory which is under the document root of your site.
Now you can freely select li:hover and other elements’ hover state and style ’em!
Pingback: HTML CSS Drop Down Menu Made Easy – SuckerFish Enhanced | Make A Website
Thanks dude that was what I searched for to bring my vertical CSS navigation to live in IE6. Hope that IE6 will be death soon lol :-(.
@freepuke – I believe it is, almost. 😉
thx
Thanks. This worked great – super easy.
@Yang Yang
Hum I don’t know… when I’am looking to my stats tool more than 20% of all visitors are using IE 6 🙁 I think IE 6 will die (hopefully) after the new Windows release. God hope it is better then Vista and beats XP (with IE 6 Standard) from the market!
Cool stuff. This is definitely more elegant than using js to create .hover classes.
Thanks for the file, now ie6 work fine.
Not working for me at all – it takes no efect.. Have checked file paths, it definately is seeing the htc file.. any ideas?
@Michelle,
One of my friends was trying this out and also saw no effect, at last we were able to trouble shoot the problem as the behavior URL must be relative to the HTML file you are serving rater than the CSS. So, if you are not using an absolute path, make sure the path to the HTC file is relatively correct against the HTML file, not the CSS file where this line of code is contained.
Hope it helps. Let me know.
I’m glad I read down to the comments about this – it wasn’t working until I pointed it relative to the HTML files. I suggest including this direction in the original tutorial. And thank you so much for the solution!
thx my friend u have made it easier for us…thx alot
well. IE6 is bad but many large firms are still using it so no way to skip it… thanks for your css hack.
Pingback: IE6 Hacks And Fixes | Morgan Web Design
Thanks man, saved me a lot of trouble.
Simple & fast fix, works 100%!
Thank You! My client won’t upgrade to ie 8 so I have to deel with this #!?*
Glad it works for you guys!
Hi Yang
It’s not working for me in IE 6………..
I’m pretty sure it does work. Make sure you have given the correct path to the htc file in your CSS file.
Pingback: Relatively Fixed » The Ultimate List of IE6 Hacks, Fixes, & Resources
Pingback: The Ultimate List of IE6 Fixes & Hacks « blog.mattsparks.com
Cool trick.
BTW – as of August, 2010, the marketshare using IE6 on my web site is 5.7% and SHRINKING. The marketshare with JavaScript DISABLED is 7.1% and GROWING.
Depending on what you are using the :hover for, you may wish to consider abandoning the IE6 support (following Google, YouTube, and several other companys’ leads). If you are only creating hover effects for buttons, don’t bother with this solution. But if your site’s usability depends on the :hover this solution may be necessary.
I too am having problems.
I have created a file called demo.htm which has a hover state over a series of LIs. The purpose is for a dropdown menu I am working on.
I also have a demo.css which contains the behavior:url line.
Finally, I have the csshover3.htc file
All files reside in the sam directory, and the css file refers simply to:
behavior:url(“csshover3.htc”);
As I said, all these files are in a single folder on my computer. If I access demo.htm using a browser, it works fine.
However, if I upload the folder to my server, and try to access the demo.htm file, then the hover doesn’t work.
Any ideas?
Thanks a lot for the file..It works fine 🙂 🙂
Gr8 stuff. You make my work lot easier…
Thanks a lot….
thank you, great solution…
Pingback: The Ultimate List of IE6 Fixes & Hacks | Matt Sparks Blog
@yang:
i have one query regarding the usage of the CSS property –
behavior:url(“csshover3.htcâ€);
can we use this property in a CSS file following CSS2 standards and not CSS3?
If not then, is there any ways to solve the same issue using a CSS file with CSS2 standards??
Scrolling down and reading the previous comments I am envious, for the most part, of those who have been able to get this solution working 🙁
@Yang – As some who have mentioned before me, I have also downloaded the .htc and referenced it in my css with the correct path (relative to the html) and still an unable to hover over any of my sub menu elements. Any insights would be greatly appreciated.
yea, im also not having luck enabling this hack. i am correctly linking to the file (relative to the HTML, not the stylesheet), but no hover action is going on 🙁