Question

http://jsfiddle.net/tNg2B/

If you view it in both Chrome and FF, the difference is obvious. In Firefox, the “:before” and “:after” pseudo classes aren’t working properly. How can I fix this?

Edit: I need it to be cross-browser compatible. This version works in IE, but not FF: http://jsfiddle.net/tNg2B/13/
I basically removed the :before and :after, and added two more <span>‘s

Answer 1

If you are going to use CSS3, do it right. You can use gradients and rounded corners like this:

background-image: -webkit-linear-gradient(top, #FFFF00, #FF8000);
background-image: -moz-linear-gradient(top, #FFFF00, #FF8000);
border-radius:15px;

JSFiddle: http://jsfiddle.net/tNg2B/11/