1 
div img:hover {
outline:2px solid #4d3326;
}

The above code is not working in ie , its working fine in firefox and chrome , may i know what is the problem or any alternative

Thanks

1
  • 1
    don't you want border: 2px solid #4d3326?
    – Shane Reustle
    Commented Oct 22, 2010 at 1:10

3 Answers 3

Reset to default
3

IE6/7 don't support outline, you can see which browser's support it on quirksmode here: http://www.quirksmode.org/css/contents.html#t26

Further, IE6 doesn't support :hover on an <img> either, so it's double-broken there :)

3
  • and IE6 doesn't support hover on the img element.
    – ScottE
    Commented Oct 22, 2010 at 1:18
  • @ScottE - yup, was already adding this, took me a bit to find the link id :)
    – Nick Craver
    Commented Oct 22, 2010 at 1:32
  • Then how can i add image border on mouseover , do i need to wrap around a div and add div border on mouseover??
    – kobe
    Commented Oct 22, 2010 at 2:24
0

From w3schools:

Internet Explorer 8 (and higher) supports the outline property if a !DOCTYPE is specified.

So either you're using IE6 or IE7, or you don't have a doctype specified.!DOCTYPE is specified.

0

As mentioned in other posts you can't use :hover for an image in IE, it works only on <a> tags, nor does it support outline in versions below 8.

An alternative would be to wrap your image in an anchor.

<a href="#" class="imagehover">
     <img src="bg_panel_corners.png" alt="" />
</a>

And then you can use a border on the anchor

.imagehover:hover{border:2px solid #4d3326}

I do realise this may not be ideal. If so you can use javascript to enable :hover on none <a> elements, take a look at this article

Not the answer you're looking for? Browse other questions tagged or ask your own question.