Getting :hover to Work in IE7

Album Cover: Sea Change

"How could this love, ever changing, never change the way I feel?"
Beck / Lonesome Tears

Posted on November 16, 2006 10:25 AM in Web Design
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

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 :hover pseudo-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

wickedtribe on November 27, 2006 at 2:21 PM:

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

slartimitvar on December 09, 2006 at 11:07 PM:

Just when I was preparing to think about anger management your info here stepped in and saved my keyboard keys. Thank you heaps.

Permalink

DiverOfDark on December 29, 2006 at 1:31 PM:

BIG REAL THANKS FROM RUSSIA.
It is really helps. I spent around 4 hours to solve this problem.
BIG THX!!!

Permalink

Max Payne on February 19, 2007 at 2:06 AM:

Oh great!!!!
Thank you very much.

Cheers.

Permalink

Eric Groft on February 19, 2007 at 2:05 PM:

Thank you. This took me forever to find.

Permalink

FengShuo Yu on March 01, 2007 at 5:54 PM:

Thank you for pointing this out, it saves me a lot of time.

Permalink

Romeo P on March 02, 2007 at 4:18 PM:

Thank you very much. After looking for a fix for about 6 hours I found your solution. Kicks ass!!!!!!!!!!

Permalink

Greg on March 23, 2007 at 2:23 PM:

Thanks! Was about to toss the computer out the window...

Permalink

Mats on April 11, 2007 at 6:34 AM:

Thank you so very much !!

Permalink

Watters on June 07, 2007 at 11:13 PM:

Just found this, at the top of google and you've saved me a good few hours work. Thanks a lot!

Permalink

GabbaDude on June 10, 2007 at 4:47 AM:

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=-

Permalink

Richard Grant on June 11, 2007 at 2:45 PM:

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.

Permalink

Xollef on June 15, 2007 at 12:32 AM:

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">

Permalink

Richard Grant on June 16, 2007 at 7:43 PM:

Thanks Xolief. You've saved me a lot of trouble!

Permalink

candice on June 19, 2007 at 11:34 AM:

XHTML 1.0 Strict does not seem to work. Have others seen this as well?

Permalink

kevin on July 10, 2007 at 12:43 PM:

I'm also finding that XHTML 1.0 Strict doesn't seem to work.

Permalink

kevin on July 11, 2007 at 11:47 AM:

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.

Permalink

Michael on September 03, 2007 at 3:05 AM:

For some reason tr.hover works here http://www.mim.kiev.ua/ru/programs/ even in IE7. There is no DOCTYPE or js there.

Permalink

Bernie Zimmermann on September 03, 2007 at 9:53 AM:

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().

Permalink

Piopier on October 02, 2007 at 1:08 AM:

For IE6, people may look at this and adapt :
http://annevankesteren.nl/test/phover/

Permalink

Chris on November 04, 2007 at 11:24 AM:

Thank you! Thank you! A million times, thank you! I think you just saved my sanity.

Permalink

Rinicka on November 19, 2007 at 5:09 AM:

Thank you very much!!!!!

Permalink

Gagan on November 19, 2007 at 11:11 PM:

Thanks :)

Permalink

XTeam on November 22, 2007 at 7:08 AM:

Thanks a ton...

Permalink

Pepijn on December 26, 2007 at 5:04 AM:

Another thank you!!! :)

Permalink

Richard Niemand on January 09, 2008 at 11:03 PM:

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

Permalink

Erik Ickes on January 22, 2008 at 5:31 PM:

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" rel="nofollow" href="links.htm">Links</a></td>

Permalink

Martha on January 23, 2008 at 3:12 PM:

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.

Permalink

Vasan on February 06, 2008 at 7:13 PM:

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.

Permalink

Squeak on February 21, 2008 at 11:01 AM:

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!

Permalink

Happy css dude on March 01, 2008 at 10:51 AM:

THANKS MAN

Permalink

mike on March 19, 2008 at 1:50 AM:

Oh my god!, thank you very very much

Permalink

Neal on March 21, 2008 at 1:30 PM:

Thanks just like you I was going through same experience until I came across your site

Thanks

Permalink

Trevor Green on March 25, 2008 at 11:07 AM:

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.

Permalink

jdSpc on March 27, 2008 at 5:23 PM:

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

Permalink

Aaron on March 31, 2008 at 3:14 AM:

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.

Permalink

Kinao on March 31, 2008 at 5:57 AM:

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.

Permalink

jdSpc on April 11, 2008 at 6:46 PM:

One more question on the DOCTYPE, which doctype declaration is most appropriate to get the hover to work... transitional, loose, strict?

Permalink

Fredrik on April 18, 2008 at 1:15 AM:

Thank you very much, this helped me a lot!

Permalink

Shawn on April 18, 2008 at 12:10 PM:

Thank you!

Permalink

Jacob on April 23, 2008 at 11:43 AM:

THANK YOU!!!!! I looked all over until I found this. Spent hours. So simple!

Permalink

IranProgrammers on April 25, 2008 at 2:22 AM:

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

Permalink

Gemo on April 29, 2008 at 11:43 PM:

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

Permalink

Iulian on May 05, 2008 at 6:23 AM:

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!

Permalink

Nevyan on May 05, 2008 at 12:29 PM:

Nice method, I personally prefer the Javascript class addition on MouseOver and MouseOut events.

Permalink

Bernie Zimmermann on May 05, 2008 at 1:31 PM:

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.

Permalink

Matt on May 16, 2008 at 11:01 AM:

The doctype gives me problems in FireFox (3) though... That's why I put it in between conditionals for IE 7.

Permalink

Matt on May 16, 2008 at 11:03 AM:

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]-->

Permalink

andrew on May 20, 2008 at 7:02 AM:

great help thanks for this and thanks to google for listing it high

Permalink

Jirka Sedlak on May 23, 2008 at 6:56 AM:

Thank You,
good job, works great in Czech Republic too.

Permalink

YogiBear on May 24, 2008 at 5:40 PM:

HALLELUJAH !!!!!

A BIG THANK YOU FROM SYDNEY AUSTRALIA

Permalink

Sean on May 28, 2008 at 8:48 AM:

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...

Permalink

Robin on May 29, 2008 at 4:21 AM:

Wow, Screw Batman...YOU are my hero !!
Thanks

Permalink

Tnt on June 06, 2008 at 4:36 AM:

I love you

Permalink

Saad Padela on June 16, 2008 at 4:48 PM:

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.

Permalink

F-CK IE on July 19, 2008 at 7:59 PM:

F-CK IE!

Permalink

Guido on July 21, 2008 at 12:35 AM:

You made my day!
Many tanks' !!
Guido

Permalink

Dany on July 21, 2008 at 2:15 AM:

Yo thx man, that's what I've been looking for!!!

Permalink

KingPin on August 01, 2008 at 1:31 PM:

Thanks so much. Just what I needed to get it to work.

Permalink

Sami El Khawaga on August 12, 2008 at 9:07 AM:

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.

Permalink

emesz on August 28, 2008 at 7:41 AM:

Works great, thanks a lot

Permalink

DysprosiumDy on August 29, 2008 at 3:33 PM:

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. ;)

Permalink

kubyk on September 09, 2008 at 6:37 AM:

thanx you a lot

Permalink

Totha on September 10, 2008 at 5:28 AM:

This is Amazing! :)

Permalink

Twin Rex on September 10, 2008 at 10:57 AM:

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

Permalink

Schoaf on September 24, 2008 at 1:31 AM:

Really stupid thinks comming from MS part 2541

Thanks for posting it!

Permalink

Efren Valdez on October 08, 2008 at 6:37 PM:

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

Permalink

Shenka on November 06, 2008 at 3:26 AM:

Thank you so much!

Permalink

Christophe on November 06, 2008 at 4:18 PM:

Thanks!

Permalink

Luke on November 06, 2008 at 7:10 PM:

You're a legend, I also totally dig your site!!!

Permalink

Brian on November 21, 2008 at 11:04 AM:

hey, this information kicks!

just what i was looking for..

Permalink

McKlain on November 25, 2008 at 2:58 PM:

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).

Permalink

Rohit Nair on December 06, 2008 at 11:11 AM:

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!

Permalink

Ryan on December 07, 2008 at 6:06 AM:

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.

Permalink

Khaled on December 24, 2008 at 5:02 PM:

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

Permalink

Katsuke on January 16, 2009 at 1:12 PM:

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 ^^

Permalink

MarkusW on January 21, 2009 at 5:09 AM:

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.

Permalink

pavan on February 05, 2009 at 11:25 PM:

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

Permalink

Sheila on February 07, 2009 at 11:40 AM:

Could someone tell what I have wrong on this website for the information to load so far down? www.edenymca.org

Permalink

Tim on February 21, 2009 at 8:21 AM:

Thanks for hte info...it's old, but still very useful!

Permalink

Gary on March 07, 2009 at 9:13 AM:

Thanks - even with info from two years ago, you've probably just saved me a frustrating hour or so.

Permalink

NIck on March 13, 2009 at 5:28 PM:

Great to know, I was going mad trying to figure out why IE looked terrible while my website was great in FF

Permalink

Andrew on March 14, 2009 at 8:36 AM:

Awesome post!

Permalink

oscommerce on March 30, 2009 at 4:34 AM:

there might be problems with the strict thing if you develop all your pages under xhtml transitional..so let's take down IE:)

Permalink

Joe on April 11, 2009 at 3:01 AM:

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.

Permalink

Ram L on April 20, 2009 at 10:25 AM:

One of the most useful posts I have ever come across!

Permalink

Stacy Vicknair on April 22, 2009 at 7:02 AM:

You truly rock. Thanks for such a simple solution that would have taken me days to figure out (if even then).

Permalink

Keith on May 08, 2009 at 8:15 PM:

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

Permalink

Peter Schuh on May 08, 2009 at 9:35 PM:

Un-f$%ing-believable.

I've been trying to hunt this bug for two weeks (off and on).

This did it.

Thank you.

Permalink

Bernie Zimmermann on May 09, 2009 at 9:12 AM:

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.

Permalink

John Middlemas on May 14, 2009 at 8:39 AM:

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).





Permalink

Ash on June 05, 2009 at 1:46 PM:

Thank you for this fix, I have been looking for the answer to this problem for hours. Much appreciated.

Permalink

joy on June 19, 2009 at 12:37 PM:

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:

Permalink

Biju on July 12, 2009 at 11:00 PM:

Thanks a lot man.. I've been trying this for the last couple of days.. thanks a ton!!

Permalink

Nathan on July 20, 2009 at 12:43 PM:

FINALLY! (FUCK!!!1)

THANK YOU!!!!

Permalink

Rain on July 22, 2009 at 12:49 PM:

I just spent two days on this problem.
Thank you for your input.

Permalink

Mukesh on July 27, 2009 at 3:10 AM:

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.

Permalink

Will on July 31, 2009 at 4:39 AM:

You legend! Thank you!

Permalink

TheDixieFlatline on August 04, 2009 at 6:39 PM:

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

Permalink

tomaz perkovic on August 19, 2009 at 1:14 PM:

THANK YOU!
I am a beginner with CSS and this pot saved a lot of my nerves, i was gong mad.

Thnx again!

Permalink

Manish on October 14, 2009 at 5:14 AM:

Thanx dear

Permalink

BP on October 21, 2009 at 6:51 AM:

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.

Permalink

Aram on November 11, 2009 at 3:25 AM:

Hey!! Thanks. This works on IE 8.

Permalink

Buddy on December 16, 2009 at 2:19 AM:

Thanks.. for the information, however I've made a XHTML 1.0 strict mode script, and it doesn't work.

Permalink

jj on February 10, 2010 at 9:35 AM:

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..

Permalink

Javier Constanzo on February 16, 2010 at 7:01 AM:

The post maybe old, but the recipe still works like a charm. Thanks for your help!

Permalink

anonymous on February 28, 2010 at 9:49 AM:

worked for me too.

thanks for a great article

Permalink

Zloi on March 04, 2010 at 10:45 PM:

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.

Permalink

Maki on March 22, 2010 at 4:00 AM:

Worked like a charm after 4 hours of debugging and googling. IE8. Much appreciated!

Permalink

Kiran on April 01, 2010 at 4:54 AM:

Thank You VERY MUCH for this blog. Really appreciated !

Permalink

ervin on April 02, 2010 at 9:45 PM:

tnx so much

you save me lot's of time..

Permalink

JJ on April 05, 2010 at 8:42 AM:

Thank you thank you thank you thank you! I was pulling out my hair...

Permalink

Upasana Sharma on April 07, 2010 at 1:59 AM:

Thanks a lot...

Permalink

fred on April 14, 2010 at 7:19 AM:

--- 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 !!!

Permalink

Bruno on April 22, 2010 at 8:55 AM:

Thank you!

Permalink

edward on April 28, 2010 at 4:17 AM:

thanks man!

Permalink

andrew on April 29, 2010 at 9:08 AM:

thank you very much. It's works perfect.

Permalink

harik on April 29, 2010 at 12:38 PM:

Thanks a lot..But strict doctype is messing up whole page any work around for that?

Permalink

tot2ivn on May 09, 2010 at 6:58 PM:

Your IE finding works like a charm. Thank you !

Permalink

alvaro on May 18, 2010 at 9:07 AM:

Tons of thanks from Chile! You helped me to find out why it was not working for me...

Take care!

Permalink

Thanks Abunch on May 19, 2010 at 1:39 PM:

Dude. thanks. a billion.

Permalink

Marc Winn on May 28, 2010 at 4:45 AM:

Thank you so much for this, iv been looking all morning and feel so relieved. it has made my weekend

Marc

Permalink

senselocke on June 07, 2010 at 1:23 PM:

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.

Permalink

Ammu on June 09, 2010 at 1:31 AM:

Good work!!!!............Thank you very much

Permalink

Sharon on July 08, 2010 at 5:52 AM:

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);
}

Permalink

zeally on July 15, 2010 at 10:56 AM:

@Sharon let's try

#monthlyCal td.select:hover
{
background-color: #eee;
background-image: none;
}

I think it should work.

Permalink

Narayana on August 02, 2010 at 7:25 AM:

Thanks buddy... really helpful..

Permalink

shelly on August 05, 2010 at 5:30 AM:

Thanks so much for this! I had this issue in IE8. This saved my butt in a serious time crunch. Was working on an iframe that was in a tiled structure and was going crazy.

Permalink

Nir on August 07, 2010 at 11:00 AM:

Wow, you just saved me a lot of work and frustration.
Thank you!

Permalink

Chorobnicka on August 17, 2010 at 6:06 PM:

I love you. Seriously.

Permalink

Luke on August 27, 2010 at 5:30 PM:

I'm not normally one to comment on blogs - but I'll make a rare exception for you. THANK YOU SO MUCH.

Permalink

Sumanth on September 07, 2010 at 1:23 PM:

Thanks very much. We are using transitional and not strict, so I was a little disappointed seeing the solution. But fortunately I read some of the comments and I will say, the important point is that you specify the link to the dtd irrespective of whether it is transitional or strict.

Permalink

Sumanth on September 07, 2010 at 1:24 PM:

Just to add to my previous comment, this blog item is still relevant after more than 2 years and on IE8 which is interesting.

Permalink

projectpete78 on September 23, 2010 at 2:57 PM:

Thank you - you have saved my laptop from being launched out of the window!

I just wish I'd found this post 3 hours ago....

Permalink

curt™ on October 06, 2010 at 4:45 PM:

Thanks a lot! This is exactly what I was looking for, and apparently you are the ONLY person on the entire Internet who has figured this out (at least according to a Google search!)
Thanks!!!

Permalink

Rüdiger Plantiko on October 08, 2010 at 12:33 PM:

Four years later, the interest for this blog is unbroken, as the comments show. Your observation saved me an hour of work, thank you!

Permalink

alex on October 10, 2010 at 2:34 AM:

thank you very much . :)

Permalink

Darren Labey on October 13, 2010 at 3:52 PM:

Doesn't work with XHTML. Trying to get a td to use :hover.

Permalink

DimasTheDriver on November 06, 2010 at 8:24 PM:

Thanks! It worked like a charm!

Permalink

senior netizen on November 11, 2010 at 5:17 AM:

Often thought DOCTYPE tags were put in there to make pages feel important. Who new they yielded so much power?

You rock dude.

Permalink

Anonymous on November 11, 2010 at 6:33 AM:

And even after 4 years the information written here is correct (even for IE8).

I read this doctype-hover thingy problem with IE somewhere and ignored it since it didn't explain the reason why doctype is needed. Thanks a lot.

Permalink

Rolle on November 23, 2010 at 4:11 AM:

Gah! Thank alot! And thanks Google! :-)
Yeah, it's 2010 and we still need this?

Permalink

Leslie on November 23, 2010 at 11:01 AM:

I know you posted this a while ago but I just wanted to say "THANK YOU!!!" I was trying to figure out why in the world IE would not recognize my :hover on a form but FF would... uggg... one of my many issues with IE (but that's another story). Anyways.... thank you again and as Rolle mentioned I know it is 2010 but we still do need this :-)

Permalink

don on December 07, 2010 at 6:54 PM:

thank you and thank you google :p

Permalink

markos on December 17, 2010 at 6:31 PM:

this is a very very old post (2006), but it's so useful! thanks!

Permalink

Qlidnaque on January 08, 2011 at 9:25 PM:

Wow, didn't know the solution was so simple. I had left out the doctype declaration for the sake of simplicity in my online tutorial I was compiling. I think that mistake cost me almost 2 hours of my life, until I stumbled upon your blog here and found the solution to my previously unencountered css problem. Thanks!! A LOT!!!!!!!!!!!!!!!

Permalink

kitloong on January 14, 2011 at 1:12 AM:

thanks a lot!!!

Permalink

ThanksSoMuch on January 15, 2011 at 1:53 AM:

Even four years on this info is still saving time and energy - thank you so much!!!

Permalink

maciuk on February 18, 2011 at 2:46 AM:

internet explorer must DIE.
I noticed that
THIS WORKS ALSO:

DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

but not this:

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Permalink

Manthan on February 23, 2011 at 11:01 PM:

Thank u so much...!!!

Permalink

Roger Jones on March 07, 2011 at 12:10 PM:

Thank you for posting this.
Big help :-)

Permalink

Omar Al-Lahham on March 10, 2011 at 3:48 PM:

Thanks :)
I was trying to figure out the solution for this ...
like what Roger said: "Big help :-)" cuz u've saved me a lot of time :)

... Best Regards

Permalink

Kevin on March 22, 2011 at 11:08 AM:

Thanks! you saved me lots of time as well!!

Permalink

sammy on March 25, 2011 at 7:00 PM:

THANK YOU VERY MUCH!!!!!!!

this has been a very big help to me! ... (especially my thesis :) hehehe)

Permalink

Anthony on April 12, 2011 at 7:01 AM:

This is exactly what was wrong. Thanks so much!

Permalink

Steven on April 24, 2011 at 2:46 AM:

Wow THANK! :)

this blog is years old, but IE still has the same "problem"...

Just unbelievable :D

Permalink

Rawiri on May 02, 2011 at 11:45 AM:

This is still helping people out!!!

Permalink

Jack Duan on May 12, 2011 at 8:57 AM:

Very helpful tips, did bridge the gap!

Permalink

osmumos on June 02, 2011 at 6:57 PM:

Thank you very much!
You have saved me a million frustrations!!!!!

Permalink

Marco van Pelt on June 08, 2011 at 5:33 AM:

Thank you .
So fucking mutch i searched for this a long time.

Permalink

Amir on June 13, 2011 at 7:27 PM:

Good solutions like wine, just get better.
Thanks!
Amir

Permalink

Cozza on June 18, 2011 at 9:04 AM:

Five years since you posted this and it's still proved to benefit many! Myself included. :D Thank you!

Permalink

Paul on July 06, 2011 at 2:08 PM:

Thx a lot !!! Took me 7 hours to solve this problem.

Permalink

Sumedh on July 08, 2011 at 11:23 AM:

simply awesome! thanks...
this is required on IE8 & FF as well.

Permalink

Sumedh on July 08, 2011 at 11:23 AM:

simply awesome! thanks...
this is required on IE8 & FF as well.

Permalink

Gutschein on July 18, 2011 at 6:49 AM:

Great post - It works fine for me!

Thanks a lot!

Permalink

abhirav on August 01, 2011 at 7:56 AM:

Even after 5 year(like a decade in internet era) this post is helpful. It saved my day!

Thank you very much.

Permalink

Jack on August 03, 2011 at 1:20 AM:

Thanks, You saved me a lot of time.

Permalink

Maitreyee on August 04, 2011 at 4:14 AM:

Thanxx a lotzzzzzzzzzzz..
Its Working perfectly.........

Permalink

paiseh on August 12, 2011 at 10:37 AM:

LOL just add at the beginning? awww...love uuu

Permalink

Gutscheine on August 18, 2011 at 3:41 PM:

Thanks a lot! Great Post :-) I love you. Seriously.

Permalink

Kaushik on August 26, 2011 at 7:43 AM:

It works like a charms in IE8. Thanks a lot. I used it in a JSP also and it works too..

Permalink

Martin Cordova on September 01, 2011 at 8:39 PM:

Zimmermann... 5 years later you still are the man! Thank you. BTW, IE9 also needs this trick to support the :hover thing.

Permalink

Grid on September 02, 2011 at 6:52 PM:

Thanks a lot!

Permalink

Kamrul Hasan on September 03, 2011 at 9:38 PM:

Hey, is there anyother way to achieve this without going strict mood?

Permalink

Maxim Shulyak on September 14, 2011 at 5:02 AM:

Thanks very much.

Permalink

Tristan Slater on September 19, 2011 at 11:01 AM:

I just wanted to say, thank you so much for the warning about the date at the top. What a great idea! You don't know how many times, I have been reading a wed dev article and realized part way through it is from 2003 or something. What a pain.

Permalink

Troy Ferrence on September 22, 2011 at 2:28 PM:

Thanks for the info. I am forced to still use IE 7 for certain projects and after a good amount of investigating this resolved my problem.

Permalink

Alexandre on September 24, 2011 at 6:20 PM:

Thank you!
Apparently the problem with IE and :hover has not been solved since I'm using IE9.
It's unbelievable, but your solution seems the only solution to the problem.

Permalink

Ravindra Kittad on October 20, 2011 at 11:03 PM:

Thanks you very much , my friend, god bless you

Ravindra

Permalink

Cedric Sandars on October 21, 2011 at 12:36 AM:

I have no words to say..but u saved my time a LOT!!!! :)

Permalink

Jeff on November 03, 2011 at 8:21 AM:

Almost 5 years old and this post is still helping people!! Thanks so much!

Permalink

Emmanuel Jimenez on November 03, 2011 at 3:29 PM:

Para que funcione en explorer es necesario tener esta etiqueta dentro del Head..



Con esto funciona!!..

Permalink

osiname on November 11, 2011 at 4:08 AM:

Yep it works. It also fixed the IE7/8 not obeying Margin:auto

Permalink

Loft conversions on November 18, 2011 at 2:40 AM:

Thanks a lot. That does work for me.

Permalink

Norm on December 13, 2011 at 7:15 PM:

Bravo!.

As they say, the answer is out there. It's just a matter of finding it. And here I did.

Permalink

Jari Kuokka on December 15, 2011 at 4:01 AM:

Thank you, that really saved my day! It also solved some other problems!!!

Permalink

Andy on December 23, 2011 at 2:30 AM:

Many thanks for this! I was wasting time looking at the CSS!

Permalink

Ethan on December 28, 2011 at 2:15 AM:

Thanks for this tip!
Why must IE suck so bad?!

Permalink

David van der Sluis on December 28, 2011 at 6:11 AM:

Thank you very much!
Even in IE9 the quirks-mode ruins everything.
Doctype decleration is mandatory I guess....

Permalink

Jeffy Davis on December 28, 2011 at 11:50 AM:

Thanks a lot my friend! I normally don't reply on sites, but this is worth a very big 'Thank you!'.

Permalink

DMC on January 04, 2012 at 7:45 AM:

I gave my site a strict doctype and IE7 still didn't support the :hover pseudo class...

Permalink

Adam on January 23, 2012 at 1:55 PM:

So does anyone know how the HTML5 doc type behaves in IE7?

Permalink

Ali Awwad on January 25, 2012 at 6:43 AM:

thank you very much ... you saved my day.... really thank you.

Permalink

Rajeev Menon on February 07, 2012 at 11:13 AM:

Thank you very much. Six years past you posted this article, it helped me fix this IE 7 issue, Yes, we are still using IE 7 :(

Permalink

CB on February 09, 2012 at 3:20 AM:

thanks for the important info

Permalink

shpyo on February 09, 2012 at 6:24 AM:

Thanks for info, but this not solve problem with hover and elements with position: relative/absolute. They still dissapearing ;(

Permalink

Jason on February 14, 2012 at 1:08 PM:

I wish there was another solution besides this. Can't always just through in this doctype into legacy pages without causing a rewrite which is what we are trying to avoid. :(

Permalink

Max on February 15, 2012 at 7:44 AM:

Thanks a lot, saved time for me

Permalink

Thanks! on March 06, 2012 at 7:29 AM:

Thank you!

Permalink

Paul on March 13, 2012 at 8:57 AM:

If only I found this before I finished! I will start setting my doctype to strict from the start from now on.

Changing to strict this late would mean I need to fix a 'few' small css issues which I just dont have time for right now...

Great info though so thanks for that!

Permalink

Chandu on April 05, 2012 at 1:42 PM:

Thanks a lot. The tip helped me get hover working in IE. So bad I found your blog after 2 days of frustration.

Permalink

Mike on April 13, 2012 at 1:34 PM:

in response to Adam (January 23, 2012 at 1:55 PM) about HTML 5 - I just found out the hard way that :hover does not work on all elements when using HTML 5 on IE7. I used IETester to test, and I had a hover event on an li element. Worked correctly in IE 8+ but not in 7-

Permalink

Ramen on May 22, 2012 at 4:10 AM:

As many others already said:
Thank you very much!

After 5 years, this post is still usefull, unbelievable :D

Permalink

Ban IE on May 29, 2012 at 1:25 PM:

Make that 7 years and for IE8. Thanks.

Permalink

fussballsocken on June 11, 2012 at 4:06 AM:

Working in IE 7 now . This is good program.

Permalink

MickusTheDutch on June 21, 2012 at 4:16 PM:

Thank you so much for this! It worked like a charm.

Permalink

Ravencrt on June 28, 2012 at 2:05 AM:

Thank you very much for this. I have been looking for a solution for this problem for a while now and I was starting to get desperate.

For this help I would gladly give a free beer :)

Permalink

luiz on July 03, 2012 at 7:03 AM:

thanks so much for sharing your knowledge with the world

Permalink

Leo on September 07, 2012 at 9:37 AM:

Increible, seis años después este artículo ayuda a los diseñadores. Agregar el DOCTYPE solucionó mi problema de HOVER en IE. ¡Gracias!

Permalink

klaoo on September 26, 2012 at 5:44 AM:

I just wanted to thank you for this useful post... It saved me probably some good hours of google-ing, since I found this page early in my attempt to fix a webpage in IE... Cheers !!

Permalink

Adam on October 22, 2012 at 10:51 AM:

Ubelievably you made me hate IE a little bit less

Permalink

priyabrata on January 05, 2013 at 10:11 PM:

thanks buddy, it worked like a magic.

Permalink

Vaseech on January 24, 2013 at 4:35 AM:

It's done its job. Thanks a lot

Permalink

Jacques on January 26, 2013 at 7:13 PM:

Wow! Thanks a million times! What helped me here is the "no space before the DOCTYPE". I spent more time then I can admit trying to implement the :hover on IE.
Great job!

Permalink

bober on June 27, 2013 at 3:23 PM:

xD i love you , thx :D great job

Permalink

Ramya on July 07, 2013 at 8:15 AM:

Wow!! Thanks a lot for the solutions, even i have been trying for the solution. This is really helpful for me. By the way nice website!!

Permalink

matt on July 20, 2013 at 2:11 AM:

thaaaaaanks!

Permalink

CJ on November 22, 2013 at 1:23 AM:

Thanks a lot! i did have the (same situation on IE9 and up for HTML 5), but removed it after using PHP as the base for the site. I just echo'ed the string with PHP at the top of each generated page and voilá :).

Post from 2006 and still helping out people!
Thumbs up for that!

Permalink

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.

Name:

Email Address:

Website:

Comments:

Check this box if you hate spam.