1

See http://jsfiddle.net/e5tsL/
In chrome the button renders as it should, only in FireFox it the ::before and ::after renders a bit to the right because of the padding.

Is there a way to fix this?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Jayne Mast
  • 1,427
  • 1
  • 16
  • 32
  • I created a bug in bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=681596 – Jayne Mast Aug 24 '11 at 11:07
  • I ended up using an anchor instead of a button and mimic the function with JavaScript. – Jayne Mast Aug 25 '11 at 13:22
  • Here's an extra-reduced test case, which I'll add to the Mozilla bug tracker too: http://jsfiddle.net/chriscoyier/e5tsL/8/ – Chris Coyier Sep 16 '11 at 22:51
  • I ran across this QA looking for a solution to the same problem, I hate to resort to an anchor tag for a submit button, but it does fix the issue in this case. Every other browser I have tried is fine, FF 8 adds all sorts of extra padding. – Scottux Jan 15 '12 at 22:15
  • Also, adding an element in the button to handle the padding/margin works if that is acceptable or if you already have a span in the button. – Scottux Jan 15 '12 at 22:27

1 Answers1

2

As far as I can tell, you've found a FIrefox bug. I say it's a bug, because I recreated (as close as possible) the actual node structure if they weren't pseudo-elements. Now, you might need to know about the Firefox magical padding bug, which I corrected, but even with that, I still get different results:

http://jsfiddle.net/Dba8h/7/

That fiddle has two buttons that look identical in Chrome, Safari, and Opera, but broken in Firefox.

One solution is to serve up a stylesheet just for Firefox (some how, might require jQuery), with this rules:

button::before, button::after { left: -12px; }

That will shift it back over and align the inner elements. Of course, if Mozilla ever fixes the bug, they will suddenly be shifted the wrong way.

Alternatively, you may just want to find some other way to recreate the effect, without using a complex mixture of pseudo-nodes, positioning, etc. (For example, you can get a very similar effect [minus the curve] by using CSS3 Gradients. This would be far less taxing on the browser, and be 99% the same to most end users.)

Update: Here's an example using just gradients: http://jsfiddle.net/cXHCH/1/

It's almost the same to the naked eye (excluding the active state), and it's a lot less complicated to maintain. Gradients selected using Ultimate CSS Gradient Generator

Community
  • 1
  • 1
OverZealous
  • 39,252
  • 15
  • 98
  • 100