ansaurus

Question

How can I fix an issue in IE where borders don't show up when the mouse isn't hovered over an image.

Answer 1

+1 A:

Try using a different colour. I'm not sure IE understands 'grey' (instead, use 'gray').

hjdivad 2008-09-15 15:37:13

Answer 2

A:

IE has problems with the :hover pseudo-class on anything other than anchor elements so you need to change the element the hover is affecting to the anchor itself. So, if you added a class like "image" to your anchor and altered your markup to something like this:

<div class="myImage"><a href="..." class="image"><img .../></a></div>

You could then alter your CSS to look like this:

.myImage a.image
{
    border: 1px solid grey;
    padding: 3px;
}
.myImage a.image:hover
{
    border: 3px solid blue;
    padding: 1px;
}

Which should mimic the desired effect by placing the border on the anchor instead of the image. Just as a note, you may need something like the following in your CSS to eliminate the image's default border:

.myImage a img {
    border: none;
}

Eric DeLabar 2008-09-15 15:45:54

Answer 3

+1 A:

The following works in IE7, IE6, and FF3. The key was to use a:link:hover. IE6 turned the A element into a block element which is why I added the float stuff to shrink-wrap the contents.

Note that it's in Standards mode. Dont' know what would happen in quirks mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
  <head>
    <title></title>
    <style type="text/css">
      a, a:visited, a:link, a *, a:visited *, a:link * { border: 0; }
      .myImage a
      {
          float: left;
          clear: both;
          border: 0;
          margin: 3px;
          padding: 1px;
      }
      .myImage a:link:hover
      {
          float: left;
          clear: both;
          border: 3px solid blue;
          padding: 1px;
          margin: 0;
          display:block;
      }
    </style>
  </head>
  <body>
    <div class="myImage"><a href="#"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"&gt;&lt;/a&gt;&lt;/div&gt;
    <div class="myImage"><a href="#"><img src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png"&gt;&lt;/a&gt;&lt;/div&gt;
  </body>
</html>

Mr. Shiny and New 2008-09-15 15:50:22

Answer 4

A:

Try using the background instead of the border.

It is not the same but it works in IE (take a look at the menu on my site: www.monex-finance.net).

Drejc 2008-09-15 15:52:43

This is a great suggestion and doing this (which works) helped me figure out the real issue (my color name).

Ken Wootton 2008-09-15 18:30:05

Answer 5

A:

In my experience IE doesn't work well with pseudo-classes. I think the most universal way to handle this is to use Javascript to apply the CSS class to the element.

CSS:

.standard_border
{
    border: 1px solid grey;
    padding: 3px;
}
.hover_border
{
    border: 3px solid blue;
    padding: 1px;
}

Inline Javascript:

<img src="image.jpg" alt="" class="standard_border" onmouseover="this.className='hover_border'" onmouseout="this.className='standard_border'" />

Jamie 2008-09-15 15:52:50

Answer 6

A:

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

put that in your header, should fix some of the ie bugs.

2008-09-15 15:56:47

ansaurus

tags:

views:

answers:

How can I fix an issue in IE where borders don't show up when the mouse isn't hovered over an image.

related questions