CODEWITHSUNDEEP
htmlcssbuttonfirefox4
Ilia Draznin
Ilia Draznin

Reputation: 1046

Abs. positioned element inside Button is not positioned correctly

I'm trying to put an icon inside a button element and I'm getting strange positioning but in Firefox 4. Check out this demo http://jsfiddle.net/j6q2e/3/

It works as expected in Chrome and IE but in Firefox the icon is completely off the reservation. Is that a known bug? Is there a way to fix that?

(I don't want to use <a> because it's a submit button for a form and I want to keep it that way. I also would like to avoid using background-image style because the icon is in a CSS sprite image and to use as background-image I'd have to save it as a separate PNG.)

Upvotes: 1

Views: 104

Answers (2)

Ilia Draznin
Ilia Draznin

Reputation: 1046

Just a quick update to get this thing "answered"...

So yeah, this is a bug in Firefox, and still is as of version 5. Chrome, IE9 and Opera all correctly position the icon inside the button.

There is another SO thread dealing with it and here's the Mozilla bug.

Upvotes: 1

Shauna
Shauna

Reputation: 9596

You should be able to keep it as a sprite and use it as a background image, just adjust the space around that image to allow for the size of your button. You might want to also consider diagonal sprites to help solve your problem.

Upvotes: 0

Related Questions