css hover breaks page layout in IE WHY?

Question

I am using a CSS style hover on some image links on my page.

When a user hovers over an image, it's background position changes, providing a highlight effect.

When I hover over the image in i.e.6 my page gets pushed down by 40px.

Why is this?

Answer 1

Which version of IE are you using? You should provide example code here. However, you may try to add following dirty css trick to the image which is hovered upon.

<style type="text/css">
  img:hover
  {
      _margin-top:-40px;
  }
</style>

Above style will only target IE, other browsers will ignore it.

Answer 2

Using hover with Internet Explorer can cause strange style issues.

you can avoid Browser Issues by using Conditional Comments.

Stackoverflow Question regarding browser characteristics

Stackoverflow Question regarding why Conditional Comments always will be needed

Edit:

Internet Explorer 6 support the CSS ":hover" attribute only on "a" elements

ReEdit:

Just for documentation...if you really want or have to use "hover".

Try this example: Hover in Internet Explorer 6

But that is a really rough solution.

Answer 3

IE6 is a dog. Try:

a{zoom:1}

Answer 4

The ole' Box Model snafu! IE6 presents a different box model than what the W3C presents. The width of an IE6 Box (hope I get this right) is a total, including the padding and border. The W3C box model is width declared, period. The margin, padding, and border are in addition to the width of the object.

Examples of how the different box models work:
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug