CODEWITHSUNDEEP
cssinternet-explorerlayouthover
Mazatec
Mazatec

Reputation: 11649

css hover breaks page layout in IE WHY?

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?

Upvotes: 0

Views: 981

Answers (4)

tahdhaze09
tahdhaze09

Reputation: 2213

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

Upvotes: 0

graphicdivine
graphicdivine

Reputation: 11211

IE6 is a dog. Try:

a{zoom:1}

Upvotes: 1

bastianneu
bastianneu

Reputation: 2069

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.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382816

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.

Upvotes: 0

Related Questions