img hover state in IE

@NulrickNov 07.2010

Hi!

How can I get the CSS style for img:hover to work in IE? I’ve added the attribute of a border when the user hovers over the image, but it doesn’t work in IE..

#portfolio_screenshot_thumbs {
margin:5px 10px 5px 10px;
border:1px solid #f9fbfc;
}

#portfolio_screenshot_thumbs img {
margin:5px 10px 5px 10px;
border:1px solid #f9fbfc;
}

#portfolio_screenshot_thumbs img:hover {
margin:5px 10px 5px 10px;
border:1px solid #26adff;
}

to post a comment

CSS

@pauledeeNov 08.2010 — #Hi

I think you mean it doesn't work in IE6? - seems to display fine for me in IE7 and IE8.

I have no idea WHY... but IE6 has problems rendering styles applied when a selector is used with a tag... eg:
[CODE]img:hover[/CODE]

However, IE6 does render this ok:

[CODE]<style type="text/css">
 
 #portfolio_screenshot_thumbs {
 margin:5px 10px 5px 10px;
 border:1px solid #f9fbfc;
 }
 
 #portfolio_screenshot_thumbs [COLOR="Red"]a.imgRollover[/COLOR] {
 margin:5px 10px 5px 10px;
 border:1px solid #f9fbfc;
 }
 
 #portfolio_screenshot_thumbs [COLOR="Red"]a.imgRollover:hover[/COLOR] {
 margin:5px 10px 5px 10px;
 border:1px solid #26adff;
 } 
 
 </style>[/CODE]

- as long as you rework the structure a little:

[code=html]<div id="portfolio_screenshot_thumbs">
 <a href="http://aurl" target="_blank" class="imgRollover">
 <img src="animage.jpg" border="0" />
 </a>
 </div>[/code]

Beware though: the above option is IE6 only - you'll need to apply it as a conditional CSS because it breaks in the other browsers.

@NulrickauthorNov 08.2010 — #Hi!

Hm, well I should mention that I'm on a mac and checking my working using parallels (virtual PC) which has IE 8 installed, not IE 6, and I'm still experiencing the problem.

I went ahead and implemented your code and all that happens is it adds the default blue border around the images, not the CSS border, nor does anything change in the hover state..

but you said that it appears to work correctly for you in IE 7 and 8? Please see the link below and rollover the large thumbnails to the right of the iPhone:

http://www.nicnackproductions.com/nicnacks/mobiddy/portfolio.html

Thanks!

@pauledeeNov 09.2010 — #I went ahead and implemented your code and all that happens is it adds the default blue border around the images, not the CSS border, nor does anything change in the hover state..

but you said that it appears to work correctly for you in IE 7 and 8? Please see the link below...[/QUOTE]

Your link doesn't work for some reason ?

However, I am testing on a real PC and your original code works on IE7 and IE8 ?

Incidentally, you should definitely not be seeing a default blue border on the image link - the border is removed with the code attribute 'border="0"'. Either way, the code I posted was explicitly for IE6 anyways.

img hover state in IE

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

img hover state in IE

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴