My code:
<td width="70" height="60">
<a href="images/Gallery1/6.jpg" rel="lightbox" title="my title" >
<img src="images/Gallery1/thumbs/6.jpg" width="65" height="40" border="0" class="gallery-img">
</a>
</td>
And CSS:
.gallery-img{
border:4px solid #FFFFFF;
}
.gallery-img:hover{
border:4px solid #D4D5D8;
}
The above code runs fine using Firefox, but not when using IE 8. How can I fix this?
That will work in IE8 if you are in Standards Mode.
It won't work if you're in Quirks Mode:
:hover doesn't work for non-a elements in IE6 and IE7/8 in Quirks Mode.The fact that you're using tables for layout suggests to me that of all the possible causes, being in Quirks Mode is the answer here.
Read this long and detailed article:
http://hsivonen.iki.fi/doctype/
In short, you need to ensure you have a proper doctype as the very first line in your HTML, such as:
<!DOCTYPE html>
You can verify what I'm saying by opening the page in question in IE, and hitting F12 to open the Developer Tools. If for the "Document Mode" it says Quirks Mode, your CSS snippet will never work. After adding the doctype, it should say "IE8 Standards", and it should all work.
If it still doesn't work, then you have some other problem preventing IE using Standards Mode.
Try removing border="0" from your img HTML tag.
Which version of IE are you testing this on?
Early (version 6) versions of IE ONLY supported the hover selector on a (link) elements and nothing else. Newer versions should support this, but I have no firsthand experience to prove this.
The following was written about IE6: http://www.howtocreate.co.uk/wrongWithIE/?chapter=%3Ahover
works for me. I tried it in Chrome, IE 8 and 9:
http://jsfiddle.net/EmmrW/1/
even with your updated code, it still works:
http://jsfiddle.net/EmmrW/2/
but it is true -- try moving all the width and height, border attributes into CSS -- that's where they belong.
Also, you may have other definitions, any IE specific CSS file or rules? Check those as well.
Check this out:
a .gallery-img{
border:4px solid #FFFFFF;
}
a:hover .gallery-img{
border:4px solid #D4D5D8;
}
I think it will work. thanks
