[RESOLVED] image hover [Archive]

Click to See Complete Forum and Search --> : [RESOLVED] image hover

patuie

02-24-2010, 12:13 PM

I'm trying to make a small image larger by hovering. Works in FF but not in IE

(css )
a.picture {display:block; width:75px; height:75px; text-decoration:none; background:#fff; border:0; margin:20px 0 0 100px; float:left;}
a.picture img {display:block; border:0;}
a.picture:hover {text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500;}
a.picture b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;

(html)
<div class="picture">
<a class="small" href=".nogo"> <img src="images/charles_lillian_bernard_sm.jpg"style="position:absolute; top:300px; right:175px; width:"250"; height:"342"; border="0">
<img class="large" src="images/charles_lillian_bernard.jpg" width="400" height="527">
</a>
</div>

Kor

02-25-2010, 04:38 AM

You have written the classes up-side-down. Your <a> element is nested inside the div with class "picture". Try this:

.picture a{display:block; width:75px; height:75px; text-decoration:none; background:#fff; border:0; margin:20px 0 0 100px; float:left;}
.picture a img {display:block; border:0;}
.picture a img:hover {text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500;}
.picture a .large {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;

About class selectors:
http://www.w3.org/TR/CSS2/selector.html#class-html

patuie

02-25-2010, 11:21 AM

Thanks I try your code but still no go in Ie. Do I need to change my <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">