Tuesday, March 4, 2008

CSS Hover and I.E. 7

I had a problem with cssHover. it was running fine in I.E.6 but with I.E. 7 it stopped hovering.
here is how to solve the problem.
Read the Article:
http://blogger.xs4all.nl/peterned/archive/2006/10/27/140300.aspx

To sum the Article you can use.

in csshover.htc, near line 34, change this :

if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
to this:

if(!/MSIE (5|6|7)/.test(navigator.userAgent)) return;

Also please update the stylesheet to



<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}
#menu ul li {
float: left; /* cure IE5.x "whitespace in lists" problem */
width: 100%;
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}
#menu a, #menu h2 {
font: 12px Trebuchet MS;
/* if required use em's for IE as it won't resize pixels */
}
</style>
<![endif]-->