- Impact
- 0
I'm coding my site in XHTML with CSS.
A class I made has a background image with no repeat and aligned right, but only when the mouse hovers over it:
.w3type{color: black; background-color: #FFCE6B;}
.w3type:hover{color: white; background-color: red;background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right; cursor: pointer;}
This code was applied to a <td> tag, so that you could hover over the table cell and the color of the text and cell would remained changed:
<td width="12.5%" class="w3type">Text here</td>
I use Firefox 0.9.2 as my main browser, and the above CSS code works correctly. However, when i view the page in IE 6 and hover over the text, only the text changes color. The background remains the non-hover color, and the background-image doesn't appear. I have validated both the XHTML and CSS with validators, and they come out perfect. Here's my site, if you want to check it out.
What am I doing wrong? Or is it an IE problem? Thanks for your help
A class I made has a background image with no repeat and aligned right, but only when the mouse hovers over it:
.w3type{color: black; background-color: #FFCE6B;}
.w3type:hover{color: white; background-color: red;background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right; cursor: pointer;}
This code was applied to a <td> tag, so that you could hover over the table cell and the color of the text and cell would remained changed:
<td width="12.5%" class="w3type">Text here</td>
I use Firefox 0.9.2 as my main browser, and the above CSS code works correctly. However, when i view the page in IE 6 and hover over the text, only the text changes color. The background remains the non-hover color, and the background-image doesn't appear. I have validated both the XHTML and CSS with validators, and they come out perfect. Here's my site, if you want to check it out.
What am I doing wrong? Or is it an IE problem? Thanks for your help
