Fix CSS Pseudo Hover Class
Depending on how long you have been playing around with CSS you may or may not be familiar with the CSS pseudo:hover class. The pseudo: hover class is most commonly used to display content to a user based on user interaction with elements on a web site. A user would hover over a link and a drop down with more links would appear. This was done by declaring your css element rule and adding the pseudo:hover class to the elements rule for an alternative action to be preformed when that element was hovered over.
#div a {normal state}
#div a:hover {alternative state}
I strongly encouraged you to use the pseudo:hover class simply because it give us the developers a true and more effectively way of separating our documents styles an behaviors from structure an content by means of CSS alone.
The whole point of the pseudo:hover class was to make the hover behavior accessible to any site element. The Unfortunate thing is IE5 and IE6 never picked up on the whole pseudo part of this class and only allows the pseudo:hover class to be used in anchor tags . This really restricts us developers living in an era that has a good portion of web surfers still using IE5 and IE6, because we the developers are always having to write extra code and come up with unneeded solutions that make our correctly written code work on these two faulty browsers.
At the time this tutorial is written (Nov 12, 2008) www.w3cschool.com states that 20.2% of all internet users are browsing with IE6 and below. If your site navigation depended on the use the pseudo:hover class then you might be losing lots of visitors simply because they can’t use your navigation while browsing with IE5 or IE6.
Until we as a web community abandon these versions of IE then we as developers must always find a way to support them while trying to comply within reason to our W3C standards.
So how do we fix this issue using only pure css and W3C standards? Well to be completely honest, you don’t because this is not a completely pure css hover fix for IE5 and IE6. This fix uses JavaScript to write unavailable behaviors to our lackey browser versions to once and for all support the css pseudo:hover class for all elements. What makes this approach so unique is that fact that you don’t have JavaScript being referenced in any elements through the elements them self by means of “onclick” or “mouseover”, the JavaScript resides in a .htc and the file that gets linked to our document via CSS, so no JavaScript is in your nice clean code. It’s also unique because it’s as close to a true solution while also falling within reason of our W3C compliant standard.
The down side of this method is that currently there are about 9% of all web users who don’t have JavaScript turned on in there browser. However if you think about how many out of that 9% who are using browser that do support the CSS :hover method then that number becomes even small and almost insignificant.
Here is an example of how CSS pseudo hover methods won’t work with <li> elements is IE5.5 and IE6.
Pure CSS Horizontal Navigation Menu Example
(Note: See IETester desktop application to test across all IE versions. “IETester Home Page“)
Ok with all that out of the way let’s get down to how we fix the issue and make these two browsers work well with the pseudo:hover class. First I have to give credit where credit is due to Peter Nederlof, Arnoud Berendsen, Martin Reurings and Robert Hanson who developed this .htc JavaScript file that brings the CSS2 pseudo:hover class behavior to our two faulty browsers.
Once you have the .htc file we are going to want to reference to it in our document but we will call to it within our headers css style tags, not with the normal script tags used for JavaScript. Here is what the call to our .htc file would look like.
body{behavior:;}
Ok what we are doing here is telling our documents body tag that we would like to setup a style for our behaviors or lack there of simply by declaring a rule for the body and a behavior style. Next we need to point our behavior style to our .htc file so our hover behaviors become supported at last with our CSS2 methods.
Make your CSS body rule now look like the following.
body{behavior:url(cssHoverFix.htc);}
Hit save and believe it or not you’re done! Hover states behave as they should with all browser and we can still write pure CSS and comply with W3C all day leaving our proper and correct menu methods working as they should for all visitors.
Click below to see the same demo as above but now with the support of our .htc file and pseudo:hover behaviors working perfectly for IE5 and IE6 browsers.
Pure CSS Horizontal Navigation Menu Example (Fixed)
Devin R. Olsen
Thanks… It will be great when IE6 finally dies!
Thank you! Finally a simple straight-forward solution to this issue.
This does not work with me. i put the code ( body{behavior:url(cssHoverFix.htc);} ) in my css file. my css file and the htc file are in the same folder where my HTML Files are. What did i do wrong.
This is really AWESOME code. It’s easy to follow, well taught by you, and easy to modify. This has helped me tremendously. THANKYOU!!!
Hi,
Great tutorial… but I have one problem, which has me in knots:
I have the following in my webpage, displaying just below your menu code:
Occupation?
Secretary
Web Designer
Librarian
Forklift Operator
The menu items seem to not fully “cover” the drop-down. This only happens in IE.
Hi,
Great tutorial… but I have one problem, which has me in knots:
I have the following in my webpage, displaying just below your menu code:
Occupation?
Secretary
Web Designer
Librarian
Forklift Operator
The menu items seem to not fully “cover” the drop-down. This only happens in IE.
Awesome tutorial
only one question.. what if we want the items to display in that same order but on the right hand side??
keep in mind, when I float: right.. the items rearrange with the fourth item becoming the first in the list if you are reading the page from left to right
thanks for this great insight
Please try it again.
I can’t download your hover.htc file.
It keeps giving an Error 404 – page not found!
Can you send it to me via email or email me where I CAN download it. Thanks.
I always enjoy feedback from my readers.
Thanks!
Yay! thank you!
thanks!
Thanks
Thanks.
good
Great Tutorial…! I have been playing around with my own Pure CSS navigation bar and couldn’t get it working in IE. Your .htc file did the trick. Thanks
I modified your code to work in IE7, but it shifts the alignment of every other item in the sub menu. I will continue playing with this to see if I can get it working. In the mean time do you have any updates for IE7? Thanks
Fixed it…
It had to do with the width of the sub list and the margin I was using.
Hope this will help anyone with the same issue.
Thanks
Hi Metal_Man, glad you found a solution to your problem. I have never needed to use the .htc hover fix file for IE7 as IE7 is CSS2 compatible so the pseudo hover fix is native with this browser version. IE6 and IE5 however is another story and this is where the .htc file comes into play. Glad you liked the tutorial!
Thanks for the quick reply… I will be looking back to your site periodically. Thanks again
I can’t thank you enough. I have worked on this issue for months. Each time i ended up feeling like I failed. This was by far the easiest solution i have ever come across. Thanks!
Top job – a quick and easy fix for IE5
Is it possible to fix the :active pseudo class in the same way?
Hi Jean Valjean, I am sure it is possible if you are familiar with writing event handlers and .htc file parsing. I however have yet to dig into building them. I would like to start learning though to bring not only pseudo classed down to the lackey browsers but also CSS2 selectors. I feel however with the lack of do…entation out there on .htc files it might be a while. My outlook on all things though is that if there’s a will, there’s a way!
Thank You!
Hi Devin, Haven’t received the email yet. Email is lynne@nano2pico.com. I was wondering if this has something to do with the z-index or position relative?
Nice work dude. I’ve been looking for a tutorial like this for ages, not even a youtube video on this, which you think there would be.
Quick Question – Is this method still SEO friendly? Is it better then linking to a js?
Just to let people know because at first I didn’t understand you need to do all of the above and change css like below, all though for some reason it removes the underline?!?
#navigation li pseudo:hover
{color:#fff; text-decoration:underline;}
Hi Ross, great question, yes indeed this still leaves your site SEO friendly, more so than any other solution in fact. The last part, I was a bit confused about, you don’t declare the use of pseudo hover by actually adding \”pseudo\” into the CSS rule name. Rather simply apply :hover to any rule you want a alternative hover state too like this. #navigation li:hover {color:#fff; text-decoration:underline;}. Let me know if this helps you or if you have any other questions, people need to ask more questions in here as it is ;)
Hi Devin, Great solution – thanks so much. I am having a problem applying this with a 2 or 3 level submenu. Any thoughts on how I might be able to do this? Perhaps it only works for a one level dropdown or flyout?
Hi Lynne – The .htc file will allow you to hover over and display nested elements not matter how deep the nesting maybe. However with that said, I would never suggest you really try to go beyond a two level sub menu while using \”ul and li\” references only. Beyond this second sub level using \”ul and li\” reference only, browsers will become confused and perform incorrectly.
Solution, ditch the \”ul li\” reference to each sub nested level, and give each level a unique ID and begin to declare your hover conditions from there.
A) It will work.
B) You will thank me for saving you hours of headache.
Of course, what kind of site would this be if I didn’t provide you with some study materials.
Click here to view working example.
Ah, now I see what you mean. I will give it a try. I am actually doing a flyout but think the concept is probably the same. Thanks Devin.
Lynne – Yes, should still be the same concept, if for what ever reason you just cant get it to work shoot me your email here on the contact page. I will send you mine back and I will take a look at it together.
Hi Devin, I think I have the flyout working but wouldn’t mind if you took a look at what I have to see if it makes sense.
Hi Lynne, sorry I had to delete the CSS you provided in here cause this a learning center and I cant flood the comments with mics CSS. I did however get a chance to look at the code. Looks good the only thing I could suggest right now (at the office lol) is to cut your css colors down. Instead of #000000 or #FFFFFF you can simply state colors in this fashion #000 or #FFF.
it just works fine with me ,but i still got a trouble with postioning my banner elements and drop-down-menu under internet explorer 6 ,plz take a look at http://www.tribaly.com/projets/appma/. by the way the right side floats under the left side in that IE6 i’m really confused and don’t know how to fix those bugs
Hi Devin, I am having a rather strange thing happen on the flyout and wondered if you had any thoughts. Everything works fine except when I open the 3rd submenu – it opens when I hover over the 2nd submenu however when I then hover over the 3rd submenu and hover off the first item to go down the list of items the entire submenu will disappear. This does not happen with the 2nd submenu, just with the 3rd. If I stay hovered over the first item it seems fine but when I go down the list the whole 3rd submenu disappears. Any ideas? Appreciate your time. Regards
I just sent you an email Lynne.
Lynne and Tarek, all issues have been resolved no?
Cool!
Thanks a lot for this usefull HTC file.
I was suprised to see that IE has another bug while solving the path to the HTC file.
I put the body behavior rule in a special CSS file for IE6 only. As this CSS file isn’t next to the HTML file but in a subdirectory, I specified a relative path to the HTC file, using the CSS as base. But it wouldn’t work. With Fiddler, I realized that IE was doing a wrong hit while getting the HTC file.
To solve the problem, either :
- use an absolute path (which isn’t good practice)
- put your CSS file next to the HTML file (which isn’t always possible, for example if you’re using a CMS with URL aliases).
- put the body behaviour rule in the HTML header with a server side (PHP) generated URL to the HTC file.
Fantastic! I get to say a nice f*** you to IE 6. Thanks alot for this, you made my day.
Thanks so much! Wow. Worked like a charm
Thank you very much for the horizontal menu tutorial. When I open the site in IE8 on windows Vista, my sub menu items are not aligned downwards rather sub menu items are displayed side by side in pairs.(ie. 4 submenu items are displayed in two lines with 2 sub menu item in eahc line. Is this something to do with width of submenu item.?Any suggestion to fix will be appreciated.
Thank you for providing us with the solution. However, my web server doesn’t support java script, so I cann’t upload the .htc file and it won’t run on the webserver anyway (so I am told). Is there any other solution you can suggest for it to work with IEs? Thanks.
@Richard, well to be honest I have never worked with a web server that wont support or allow you to upload JS. How strange.. Who told you this? Also I am sorry but this is currently the only solution to being these pseudo hover behaviors to these two lack
Hi, Devin, A tech support told me so. In anyway, I cannot upload .htc file to my server. Is it possible to put the JS code directly in the html file and would it still work? Any suggestions on that? Thanks again.
Hi, I have got this working in ie5 but in ie6 it makes the screen flicker black for a split second when you scroll over the link. Im trying to have an image appear next to a text link. It works in everything but ie6
I dont know if I’m doing this wrong, but I’ve uploaded the htc file to my server, but still when I look at the site it loads with errors on the page that say access is denied to the htc file. Any Suggestions?
Thanks for your tutorials- very informative! I´ve followed your tutorial for Pure CSS Vertical Menu and also added this .htc file. I still can’t make it work in IE6 (sorry to say I still have some users on it). Any suggestions on what to look for?