Web Designing: Getting CSS pseudo-classes to work with Internet Explorer

26 June, 2010 | Posted by Hardik Shah [Guru] at 11:39 PM | 0 comments | Labels: ,

Share |
One of the best advent in CSS 2.0 (check my post on it here) are pseudo-classes. These classes come into act on mouse hover/focus/active events on any HTML elements including links, images and text. Mind you, this isn’t similar to Javascript events but does the same thing. Some of the scenarios where you can use it:

  • Getting a mouse hover effect on an image
  • Getting a <div> or say a HTML region to be highlighted on mouse hover
  • Getting a text link to depict a particular color when it has been visited or active

Using CSS pseudo-classes for the above named scenarios is very apt for a designer coz it is not only easy to use it but also easy to maintain the code from maintenance and readability point-of-view. As fate might have it, different browsers react in a different way to CSS pseudo-classes. Fortunately, since Firefox, Chrome, Opera and Safari are Webkit based browsers, they don’t have any issues working with it. This leaves behind – Internet Explorer, which behaves awkwardly to CSS pseudo-classes. Following are some scenarios which I’ve personally witnessed in which CSS pseudo-classes cease to work in IE:

  • If applied the :hover class to an image, it doesn’t work sometimes.
  • If applied the :link, :visited, :hover and :active class to a text anchor, it behaves awkwardly.

Taking the above issues into consideration and knowing the fact that Internet Explorer runs on more than 65% on computers worldwide, designers have taken back to using special JavaScripts and jQuery to get their effects running on all browsers. But truth be told, this isn’t fair afterall! Not using pseudo-classes for the sake of a browser’s exceptional behavior isn't justified.


So enter – whatever:hover, an open-source project to fix up this quirk with Internet Explorer. It uses the behavior attribute in CSS (works only in IE) to refer a '.htc' file which is a script defining a special behavior to perform. This behavior attribute has to be declared for the <body> tag so that it runs for the entire web-page.


A short example you can try for a Horizontal Menu using CSS pseudo-classes Here.


CODE Snippet:


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html>
  3.  
  4. <head>
  5.     <title>Sample Web-Page</title>
  6.     
  7.     <style type="text/css">
  8.         body
  9.         {
  10.             behavior:url('./csshover3.htc');
  11.         }
  12.         
  13.         /* --- Your CSS pseudo-classes come Here --- */
  14.         
  15.     </style>
  16.     
  17. </head>
  18.  
  19. <body>
  20.  
  21. <!-- Your HTML CODE comes Here -->
  22.  
  23.  
  24. </body>
  25. </html>


  • You can download the .htc file (behavior file) Here.
  • Read more on CSS 'behavior' attribute Here.
  • More on the whatever:hover project and its progress Here.



0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)