Home/ Questions/Q 8869781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T17:33:48+00:00

There’s this odd IE issue that has been twisting my mind. It works correct

  • 0

There’s this odd IE issue that has been twisting my mind. It works correct in other browsers (Chrome / Firefox).

For those that want to dive directly in the code, here’s a Fiddle. Important parts:

HTML:

<a href="#" class="btn">MyButton</a>

CSS:

.btn {
    display:block; width:135px; height:58px; text-indent: -9999px;
    background-image:url("http://i47.tinypic.com/e7f4w6.png");
}

.btn:hover { background-position:bottom; }

In the Fiddle I’ve added an arrow to display the correct “center” of the image. As you can see, this is just a simple image sprite for navigation. The height of the image is double the height of the actual button, so we can apply the background-position:bottom .

But for some reason, when hovering, IE doesn’t display the image correctly. Somehow the arrow (black line) and the center line (red line in the hover state) don’t align anymore:

Normal state:
Normal state

Hover state:
Hover state

Because the line “jumps”, the text also jumps (hardly noticeable in my example, but on my project you see it pretty good). Tested & occurs with IE9 and below on Win7.

I hope you might have a solution for this little brain teaser!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The comments from jQuerybeast, Miguel-F & Billy Moat above pushed me to another direction (thanks folks!), and I tried to open my Fiddle on another machine. Same browser, same OS & it was working fine.

    After some further investigation, I found out it was my screen resolution and/or video display and/or taskbar that caused the strange effect. This would mean my code is correct, but somehow IE draws some pixels wrong on the screen (where other browsers do this correct). But this might be a whole new question.

    Once again, thanks for the help!

    • 0