Question

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?

Answer 1

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