I have a basic CSS rollover effect on my homepage, it works in FF, Safari and Opera. but not in IE, what am I doing wrong or is it just IE being stupid. And what can I do to get it to work?

 

The code:

HTML

<html>
<head>
 <link  rel="stylesheet" title="text" type="text/css" href="style.css">
</head>

<body>

 <div id="links">
  <table width="100%" align="center">
   <tr>
    <td width="33%" align="center"><a id="a" href="#"><div id="links-div">#</div></a></td>
   </tr>
  </table>
 </div>

 <img src="womm.png" alt="Works On My Machine (using my browser and creator)">
 </body>
</html>

 

CSS

#links-div {width:300px;height:150px; background-color:009933; font-family:"papyrus" Serif; font-size:40px; font-weight:bold}
#links-div:hover{background-color:006600}	    
#header {background-color:white; width:100%; height:230px; position:reative;}
#links   {background-color:9CD1BA ;}

The :hover pseudo-class only works on the anchor tag in IE. That's why.

Is there a way of adapting the code to work with IE then?

Are you talking about IE6 or IE7? That code will work in IE7, its just 6 or lower that doesnt support pseudo classes on non anchor tags.

 

You are forgetting the '#' in front of your colours btw.

 

Another option is a simple bit of Javascript as long as the rollover is purely decorative and isnt used for functionality.

 

Im not sure what the barebones javascript would be but it will be very simple. I can write you a mootools bit of script but a quick Googler would give you the pure javascript solution.

Is there a way of adapting the code to work with IE then?

In this line of code 

 

<td width="33%" align="center"><a id="a" href="#"><div id="links-div">#</div></a></td>

 

 

you have a div nested inside an anchor.

 

Apart from not validating (you can't nest a block level element inside an inline element), why not remove the #links-div and just style the anchor instead?

Are you talking about IE6 or IE7? That code will work in IE7, its just 6 or lower that doesnt support pseudo classes on non anchor tags.

 

I am using IE7, but it still doesn't work, so either IE7 is still stupid or I'm doing something else wrong.

have you definately put '#' infront of the colours?

Is there a way of adapting the code to work with IE then?

 

Yes. Use the a-element to place the image.

 

Html:

<a href="#" id="img-hover">Link</a>

 

CSS:

#img-hover a { 
  display: block; 
  width: Xpx;
  height: Xpx;
  background: url('image-you-want.png') no-repeat top left;
  text-indent: -9999; /* hides the link text, but when images is de-activated, it will show the link */
}

#img-hover a:hover {
  background-position: bottom left; 
}

 

That will do what you are looking for. Smash the two images together in ONE file. Use the normal image in the top of the image-file and the hover at the bottom. If the image-file of both the normal image and the hover image is 200px, then set #img-hover a's height to 100px. That will just display the upper half of the image-file, (And that means the normal image) but it will change to the hover image when it's hover.

 

It's a horrible explanation, I know, but English is not my native language.