Problems with image swap CSS in IE6

[wmalex59]

I found some css somewhere for an image swap and it seems to work fine on Firefox but not on IE6. I can't seem to find a better CSS or JavaScript to make it do what I want so I'm hoping someone has an IE6 fix for this. It's located at []

Here are the contents of the external "picpop.css" CSS file that it references:

#pic {
background-color: #FFFFFF;
left: 0px;
position: relative;
top: 10px;
width: 135px;
}

#pic a .large {
border: 0px;
display: block;
height: 1px;
left: -1px;
position: absolute;
top: -1px;
width: 1px;
}

#pic a img {
border: 0;
}

#pic a.p1, #pic a.p1:visited {
background: #FFFFFF;
border: 0px solid #000000;
display: block;
height: 90px;
left: 0;
text-decoration: none;
top: 0;
width: 135px;
}

#pic a.p1:hover {
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
}

#pic a.p1:hover .large {
border: 0px solid #000000;
display: block;
height: 100px;
left: 15px;
position: absolute;
top: -5px;
width: 100px;
}

HTML sample added:

...
<tr>
<td><div align="center" id="pic"><a class="p1" href="#" title="thumbnail image"><img src="animation_rollover1.jpg" width="88" height="84" border="0" /><img src="images/animation_rollover.jpg" alt="Enlarged view of image" width="100" height="100" class="large" title="Enlarged view of image" /></a></div></td>
</tr>

<tr>
<td><div align="center" id="pic"><a class="p1" href="#" title="thumbnail image"><img src="military_rollover1.jpg" width="88" height="84" /><img src="military_rollover.jpg" alt="Enlarged view of image" width="100" height="100" class="large" title="Enlarged view of image" /></a></div></td>
</tr>
...

[edited by: SuzyUK at 10:27 am (utc) on Feb. 2, 2007]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[SuzyUK]

Yes, it's an IE6 bug.. it relates to the hover rule for the anchor

#pic a.p1:hover {
background-color: #FFFFFF;
color: #000000;
text-decoration: none;
}

in that rule you're not actually changing anything from the original anchor state, so IE6 thinks that there is no hover rule there and it requires a hover rule before it will apply a

:hover element

rule like your

#pic a.p1:hover .large 

it's a known bug and the fix is usually to apply something/anything in the hover rule that is not declared on, or is different from the <a> rule (Note: color doesn't work) and that won't affect the hover effect.. my favourite one is

text-indent: 0;

Also, though I realise it could be the test nature of the page, you shouldn't use the same id more than once on a page, if you want to re-use the same hook change it to a class.. (#pic?)

[wmalex59]

Thanks Suzy, that made it work! I'm just delving into CSS, so I really appreciate the help. Again, thank you VERY much!