I spent about an hour this morning trying to figure out how in the world to get IE7 to apply my :hover styling to a non-anchor (<a>) element. Amazingly enough, numerous searches on Google turned up absolutely nothing. I found one forum post that looked promising, but it was one of those depressing forum posts that states the exact same problem you're having, but doesn't have any replies.
What made things more frustrating was that there are blog posts galore touting IE7's addition of support for :hover on all elements, yet no matter what I tried I couldn't get it to work!
Eventually, I recalled reading something on the IEBlog about how a web page's DOCTYPE would dictate the CSS support in IE7. The gist of it is, if you want support for :hover on all elements and not just the <a> tag, make sure you're using a strict DOCTYPE so IE7 doesn't kick in to quirks mode.
Whereas the following HTML resulted in my :hover effects working in Firefox but not IE7:
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
table { background-color: #DDD; }
tr:hover { background-color: #000; color: #FFF; }
p { background-color: #EEE; }
p:hover { background-color: #CCC; }
//-->
</style>
</head>
<body>
<p>
This is just one of those paragraph things.
</p>
<table cellpadding="0" cellspacing="0">
<tr>
<td>This here is a table row.</td>
</tr>
<tr>
<td>This is a table row too.</td>
</tr>
</table>
</body>
</html>
...simply adding the HTML 4.01 Strict DOCTYPE to the top of the HTML document made IE7 obey my :hover rules as well:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
table { background-color: #DDD; }
tr:hover { background-color: #000; color: #FFF; }
p { background-color: #EEE; }
p:hover { background-color: #CCC; }
//-->
</style>
</head>
<body>
<p>
This is just one of those paragraph things.
</p>
<table cellpadding="0" cellspacing="0">
<tr>
<td>This here is a table row.</td>
</tr>
<tr>
<td>This is a table row too.</td>
</tr>
</table>
</body>
</html>
The sad things is, once you know the answer, it becomes a lot easier to find it. After coming to my realization, I found the following tidbit over at MSDN:
Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the
:hoverpseudo-class to any element, not merely links.
Hopefully this post will help others bridge the gap without having to jump through all the mental hoops I had to.
Comments
Just when I was preparing to think about anger management your info here stepped in and saved my keyboard keys. Thank you heaps.
BIG REAL THANKS FROM RUSSIA.
It is really helps. I spent around 4 hours to solve this problem.
BIG THX!!!
Oh great!!!!
Thank you very much.
Cheers.
Thank you. This took me forever to find.
Thank you for pointing this out, it saves me a lot of time.
Thank you very much. After looking for a fix for about 6 hours I found your solution. Kicks ass!!!!!!!!!!
Thanks! Was about to toss the computer out the window...
Thank you so very much !!
Just found this, at the top of google and you've saved me a good few hours work. Thanks a lot!
This is very much appreciated!! I was ripping out my hair!!!!
Why oh WHY does Microsoft have to make it so freaking complicated!?!
Why not just make it a standard to apply hovers on all elements that you apply the property to.
:P
Thanks again
-=G~D=-
With a limited resource of Windows systems to test on myself, could somebody please confirm that this works with the XHTML 1.1 DocType too? Unlike previous declarations, 1.1 doesn't state any reference of 'Strict' in its string, which I fear may throw IE off track.
Thanks.
Thank you for refreshing my memory, always forget to check the doctype to the correct one!
Just a note the following doctypes works also:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Thanks Xolief. You've saved me a lot of trouble!
XHTML 1.0 Strict does not seem to work. Have others seen this as well?
I'm also finding that XHTML 1.0 Strict doesn't seem to work.
take that back. What I was actually finding was that @import of styles doesn't work. You need to add a "#anything a:hover {}" either directly in the file or in a linked file to make @import hover styles work.
For some reason tr.hover works here http://www.mim.kiev.ua/ru/programs/ even in IE7. There is no DOCTYPE or js there.
Michael, if you look in the source code of that site, you'll see a reference to main.js, which contains a function called makeTableRowsHiglightableInMSIE().
For IE6, people may look at this and adapt :
http://annevankesteren.nl/test/phover/
Thank you! Thank you! A million times, thank you! I think you just saved my sanity.
Thank you very much!!!!!
Thanks :)
Thanks a ton...
Another thank you!!! :)
Why must IE 7 be the only browser to have such bad issues. I really dislike it, It is the scum of the earth, and as far as I am concerned FireFox, Opera or Safari ( All windows, and some other platforms ) are free and need less hacks to get them working. I rate we all boycott IE's bullshit :P
There is a little bit of a sneaky way to do this too. If you have a nav bar with links in it, you can just set some padding around the <a> elements. Since :hover works in <A> in IE7, you can just put a nice big padding around the links. Then constrain the padding inside a TD.
For example;
.cell {background-color: #FFFFB3; padding: 12px; color:Blue; align: center;}
.cell:hover {background-color: #D6E7DE; padding: 12px; color:White; align: center;}
<td><a class="cell" href="links.htm">Links</a></td>
Hey, thanks for the input... however I am looking for something more specific and I do not know if it is going to work. We have several webs created in Frontpage 2003, using the antiquated frames and hover buttons, we are going to be upgrading to IE7 and I tested at home with IE7 and the marquee and the hover buttons did not show... could anyone give me an insight if this is something that has to be handle defining the doctype? or we have to do some major changes in the pages before we move to IE7... I don't care much of the style but at least to make them work, this is online documentation for our people. the other part is that my team is not technically oriented so really I need a quick easy fix. Any suggestion are appreciated.
One downside is using this doctype in IE7:
The CSS float does not work correctly (i.e. I am using a image floating to the right of the text. If the doctype is not used, the text wraps properly to the left of the image. If the doctype is used, then the image is pushed off the screen area to the right).
So I guess 'back' to the ridiculous IE hacks.
Bless your little pea-pickin' heart! I've been beating myself up over this for a month now! And wouldn't you know it? It is something completely simple! Thank you SOOOOOOOOO much! You have officially earned a spot on my list of heroes!
THANKS MAN
Oh my god!, thank you very very much
Thanks just like you I was going through same experience until I came across your site
Thanks
I'm attempting to implement this fancy css stuff.
http://www.azuregreenconsultants.com/default_css.asp
My document was doing pretty well until I got to hover and inserted the doctype.
Then my centerd page layout shot back to the left side of the browser. I've been trying to emulate this very page to solve the problem with no luck as of yet.
Can anyone tell me why this hover thingy will work on one computer system but not another? I am testing my website before I go live & was testing it on another computer. It works great on my system but not on the other one. I verified that both systems have the same version of IE7 & the DOCTYPE declaration is on both also.
The website setup is identical on both systems
Thanks in advance for any advise.
JDsPC
This solution leaves a bit to be desired. True it does give you hover, but you lose proper formatting in float and the :before command even ceases to work in Firefox. So I'm just going to continue to promote the total replacement of all IE with something that actually works.
Just one related note : IE (IE7 at least) seems to require the doctype declaration to be placed on the very first line of your document.
Those using templating systems might run into this issue, which will (obviously among many other things) prevent the :hover pseudo-class for working.
One more question on the DOCTYPE, which doctype declaration is most appropriate to get the hover to work... transitional, loose, strict?
Thank you very much, this helped me a lot!
Thank you!
THANK YOU!!!!! I looked all over until I found this. Spent hours. So simple!
Great job , man
I love such a programmers solving problems in different way by thinking different to others.
All the searched pages redirecting you to each other and yielding no solution ...
WOOOWOWOWOOW job
Heavy Computing Association Moderator
Thanx a lot!!!!
I've been under stress for this simple problem for past two days..
Now i feel really good n happy in fixing this issue with the help of this blog post.
Thanx a million!!!!
Luv u all
-Gemo
Many thanks from Romania.
After half an hour of searching the reason why it doesn't work, I finally got the answer from your article!
Nice method, I personally prefer the Javascript class addition on MouseOver and MouseOut events.
Nevyan, keep in mind that the JavaScript method doesn't hold water if a user has elected to turn JavaScript support off in their web browser. Using the built-in CSS support for :hover, however, does.
The doctype gives me problems in FireFox (3) though... That's why I put it in between conditionals for IE 7.
Blast, used wrong symbols... Like this (hope it comes through now...)
<!--[if IE 7]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<![endif]-->
great help thanks for this and thanks to google for listing it high
Thank You,
good job, works great in Czech Republic too.
HALLELUJAH !!!!!
A BIG THANK YOU FROM SYDNEY AUSTRALIA
This isn't working for me. I have been trying this, the Holly Hack, the csshover.htc fix and all kids of other things, and it simply will not work. I have a sidebar navigation menu with hover elements on the top 2 sections in certain places on the website I am working on. With this doctype fix (without the conditional statement), it kills how things look in Firefox (where it otherwise works properly) and in some cases even kills the formatting in IE as well. If you go to http://www.ccaf-fcvi.com/new-structure/english/about/board.html you will see the sidebar menu as it SHOULD look, but with the hover function not working. Then go to http://www.ccaf-fcvi.com/new-structure/english/about/committees.html where the hover function works (using this doctype), but the menu is wrong - it should look identical to the previous one. At this point, with the solution posted by Matt with the conditional statement, it works in Firefox, IE7 can hover, but the setup of the menu is messed up. Can anyone take a look at what's there and give me a hint as to what is going on, or how it can be fixed? I've been messing with this for over a month now...
Thanks in advance...
Wow, Screw Batman...YOU are my hero !!
Thanks
I love you
Thanks man!
I develop on Ubuntu so I only have Firefox. I got the csshover hack for IE 5 & 6, but then when IE 7 started acting up...well, like you said, my first dozen Google searches yielded nothing.
F-CK IE!
You made my day!
Many tanks' !!
Guido
Yo thx man, that's what I've been looking for!!!
Thanks so much. Just what I needed to get it to work.
Ladies and gentle men for
users , the final solution for a:hover properties to IE7 WORKS ONLY WITH PNG-FORMAT. Forget about jpegs, and gifs. Please try png instead and u will remember me for the rest of the day hihi :p wiz zide.
Works great, thanks a lot
Thanks a lot, man! You helped me out a damn lot!
And dammit... if only people would let go of IE. Sigh, I'm dreaming of a better world. ;)
thanx you a lot
This is Amazing! :)
Just a note,
Output from the server side may also cause this behavior. For example a PRINT or ECHO statement that "inserts" itself BEFORE the DOCTYPE may cause IE7 to fail to render the CSS rule.
Thanks Bernie! and sorry if I've double posted...
--TwinRex
Really stupid thinks comming from MS part 2541
Thanks for posting it!
Hi there,
Got a headache here though i put the doctype still not working
css
#list tr:hover {
background: lightblue;
cursor: pointer;
cursor: hand;
}
html
| Date | Queue Number | Name | ID Number | Status |
Thank you so much!
Thanks!
You're a legend, I also totally dig your site!!!
hey, this information kicks!
just what i was looking for..
I was trying to find out why the tr:hover wasn't working on IE7. I'm using this doctype declaration:
the funny thing is that "tr:hover td" does work, but, obviously, it changes the td background instead of the tr (in my case it doesn't matter and works perfectly).
Two years on, this post still helps people like me! Thank you very much, had been banging my head on this issue for quite some time now!
Your post is wrong.
IE7 does not require a strict Doctype for it recognise the :hover pseudo class.
Any poorly formed Doctype will cause problems for IE7. If you don't form the Doctype correctly, then the :hover pseudo class won't work. This includes making sure there is no white space before the Doctype declaration. This isn't a bug in IE7 and is likely intentional by the IE development team to make sure that websites designed to run in quirks mode do in fact run in quirks mode.
Thank you very much.
I've been trying to find a solution for this problem and I nearly gave up and thought that IE7 STILL does not support hover effects on elements other than links, but when I read somewhere that IE7 does support it I got confused. But thanks to your post the problem is solved.
Thanks again,
Khaled
Simply beautiful, million thanks, i got this info on the 2 item of google saved me about 20 mins of nonsense, simple straight to the point, u the best ^^
Thank you very much for your valuable hint, it still holds true in 2009. I hope times will come when clients realize that, as soon as they demand a web application to work on Internet Explorer, that this application will become more expensive than necessary.
thank u.. i was wondering how come it was not working.. the same code works in other browser but it was not working in IE.. Thanks for the solution
Could someone tell what I have wrong on this website for the information to load so far down? www.edenymca.org
Thanks for hte info...it's old, but still very useful!
Thanks - even with info from two years ago, you've probably just saved me a frustrating hour or so.
Great to know, I was going mad trying to figure out why IE looked terrible while my website was great in FF
Awesome post!
there might be problems with the strict thing if you develop all your pages under xhtml transitional..so let's take down IE:)
IE is still very popular among the non techie users so it makes sense to check your changes for IE. Otherwise firefox is far better than IE.
One of the most useful posts I have ever come across!
You truly rock. Thanks for such a simple solution that would have taken me days to figure out (if even then).
This did not work for me. I am using :hover on a li element to change the background-position. Switching from Transitional to Strict made no difference. Has anyone else experienced this?
keith at creativia.com
Un-f$%ing-believable.
I've been trying to hunt this bug for two weeks (off and on).
This did it.
Thank you.
Keith, it's likely that IE just doesn't support :hover on li elements. There appears to be a third party workaround for this, but I haven't verified it myself.
If you are writing code for a page component you may not have control of the DOCTYPE. So the following button code with hover should work on IE7 IE6, IE8 (not tested) and Firefox with or without any DOCTYPE declaration. For other elements just change the element (not tested).
Thank you for this fix, I have been looking for the answer to this problem for hours. Much appreciated.
keith, i found that if you don't include the system uri in the doctype, it actually renders page in quirks mode, even though you are telling it transitional...so this works with hover:
"http://www.w3.org/TR/html4/loose.dtd">
and this doesn't:
Thanks a lot man.. I've been trying this for the last couple of days.. thanks a ton!!
FINALLY! (FUCK!!!1)
THANK YOU!!!!
I just spent two days on this problem.
Thank you for your input.
This is not working in my case .... !!! :(
The situation is like this : -
In jsp page
<td class="MainHeader"><a><img></a></td>
In css file
td.MainHeader a:hover {
background-color: rgb(230, 230, 230);
}
Its working fine in FF but not in IE7.
plz let me know if i am doing something wrong.
You legend! Thank you!
THANK YOU! I've been trying to work this out for days. I applied it to a whole table not just a cell, but it still works fine.
Muckesh: I think you maybe want to make that
td.MainHeader:hover {etc
in the css
THANK YOU!
I am a beginner with CSS and this pot saved a lot of my nerves, i was gong mad.
Thnx again!
Thanx dear
Hi, I read thru all the comments on this post. I am experiencing the same problem for li. The hover doesnt work. Can someone help me if there is a solution for this in IE 7.
thanks.
Hey!! Thanks. This works on IE 8.
Thanks.. for the information, however I've made a XHTML 1.0 strict mode script, and it doesn't work.
THANKS A LOT!!! I wasted the last 2 hours with this stupid thing.
Now my problem is that after applying strict doctype, some things I fixed today in IE with transitional doctype are now failing. Damn IE..
The post maybe old, but the recipe still works like a charm. Thanks for your help!
worked for me too.
thanks for a great article
I fond interesting solution for Rows image background, the rows highlighting on mouse over, without JS.
tr { background-image: IMG_SRC;}
tr:hover { background-image: IMG_SRC2;}
here is a full article:
http://www.sopov.com/joomla-wordpress-tips-and-tricks/70-how-highlight-table-row-background.html
Works in all browsers. For IE6/7/8 FIX: add to tr{ position: relative; } and for td{ background-image: none } and for Safari i use negative background position for each TD.
Worked like a charm after 4 hours of debugging and googling. IE8. Much appreciated!
Thank You VERY MUCH for this blog. Really appreciated !
tnx so much
you save me lot's of time..
Thank you thank you thank you thank you! I was pulling out my hair...
Thanks a lot...
--- Thank you ---
Trying to fix this for 2 days now.
I just see this working in phpBB and i was not able to reproduce until i saw your blog !
Thank you !!!
Thank you!
thanks man!
thank you very much. It's works perfect.
Thanks a lot..But strict doctype is messing up whole page any work around for that?
Your IE finding works like a charm. Thank you !
Tons of thanks from Chile! You helped me to find out why it was not working for me...
Take care!
Dude. thanks. a billion.
Thank you so much for this, iv been looking all morning and feel so relieved. it has made my weekend
Marc
Thank you, thank you, thank you. I know this article is old, but you just saved me a migraine and maybe an aneurysm--I'm trying to make my rollover menus compatible with no images/no css/neither, and IE was being a pain in the rear.
Even though this post is old, it must be groovy to know you're still helping people. Thank you, thank you, a thousand times, thank you.
Good work!!!!............Thank you very much
I have a table that has a background image in all cells. I want my cells to ignore the background image and replace with a solid color on hover. I am working in IE7 with the doctype suggested above and it isn't working.
My CSS rule is this:
#monthlyCal td.select:hover
{
background-color: #eee;
}
which is supposed to change the original:
td.select
{
background-image: url(c:/calendarImages/bkgd.jpg);
}
@Sharon let's try
#monthlyCal td.select:hover
{
background-color: #eee;
background-image: none;
}
I think it should work.
Post Comments
If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.
Thank you so very much. I have been looking for this for a little while now now. Well, I guess it is finally time to leave the Transitional behind. This is a better solution than the hacks I have had to use before. Very good news for people like me who are Mac/Linux designers in the future.
Permalink