CODEWITHSUNDEEP
cssinternet-explorer-8
Satheesh Kumar
Satheesh Kumar

Reputation: 101

IE8 - image position changes by 1px when clicking a button

In IE8, when I click on a button with class="down", image position changes by 1px. How to resolve this?

.listdown .down {
  background-color: transparent;
  background-image: url("../images/listdown_active.png");
  background-position: right center;
  background-repeat: no-repeat;
  border: 0 none;
  cursor: pointer;
  float: left;
  height: 32px;
  padding: 8px 0;
  width: 30px;
}

Upvotes: 1

Views: 982

Answers (1)

Tom Chantler
Tom Chantler

Reputation: 14931

As I was using a single sprite with a number of button images on it and the shift was causing some image tearing with bits of other buttons appearing, I spent a little time trying to fix this problem. This is a good resource: http://labs.findsubstance.com/2009/05/21/ie8-form-button-with-background-image-on-click-css-bug/

HOWEVER... after showing the page in question to my wife she complained that it didn't do that thing where it looks like you are actually pressing the button, so I resolved the issue by simply spacing my buttons further apart in my single image file!

Upvotes: 1

Related Questions