They say you learn something new everyday.  Yesterday was no different for me.  As many of you know I work at VH1.  While working on the new sitewide navigation yesterday I came across an interesting HTML 4.01 transitional bug in Firefox.  Special thanks to Tom Raab for help sorting this out.

Bug Description

As the title of this post implies, the :hover psuedo-class cannot be bound to a class name on pages rendered with a DTD of HTML 4.01 Transitional.  For instance:

Broken Example

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HTML 4.01 Transitional test case</title>

     <style type="text/css">
          .class { background:#ccc; }
          .class:hover { background:#ff0000; }
     </style>

</head>
<body>

     <div class="class">Hover over this to watch nothing happen.</div> 

</body>
</html>

Working Example

Then simply change the DTD to XHMTL or the class to an id and watch the hover magic!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HTML 4.01 Transitional test case</title>

     <style type="text/css">
          #id { background:#ccc; }
          #id:hover { background:#ff0000; }
     </style>

</head>
<body>

     <div id="id">Hover over this to watch the magic happen.</div> 

</body>
</html>

Broken Demo (Obviously this is only broken in Firefox)

Working Demo

Conclussion

I should probably file a bug with Mozilla, but after spending all this time on this post now its time to go eat.  :P  (I’ll file it later don’t freak out.)

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Fark
  • Reddit
  • TwitThis