CODEWITHSUNDEEP
firefoxcss
Leo Jiang
Leo Jiang

Reputation: 26095

CSS3: Why isn't this working in FireFox?

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

Upvotes: 1

Views: 192

Answers (3)

albert
albert

Reputation: 8153

firefox's user agent stylesheet places an !important on the button element's line-height. i got it to even out in firefox using floats....which makes no sense to me bc i thought generated content required absolute positioning...anyways. you can see it here:

http://jsfiddle.net/jalbertbowdenii/aFZTf/1/

just serve up the firefox styles by placing them in "@-moz-document url-prefix() { }"

but i gotta say that @Dennis and @derekerdmann have really great points (and solutions!!!!) in regards to your question. however if you don't have the option(s) or you don't care, there's your solution.

i only tested it in ff7.1 and chrome 17.0.942.0 dev-m

Upvotes: 0

Dennis
Dennis

Reputation: 32598

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/

Upvotes: 2

derekerdmann
derekerdmann

Reputation: 18252

You're over-complicating the solution to a common problem. You can do this with only a few simple rules, and even simpler HTML:

<button type="button">test</button>

Add the following CSS:

button {
    padding: 0.3em 0.8em;
    border: 1px solid #FFAA22;
    background-image: linear-gradient( top, #FFF07E, #FFAA22 );
    background-image: -webkit-linear-gradient( top, #FFF07E, #FFAA22 );
    background-image: -moz-linear-gradient( top, #FFF07E, #FFAA22 );
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    font-size: 1.8em;
}


button:hover {
    background-image: linear-gradient( top, #FFF07E, #FFAA22 70% );
    background-image: -webkit-linear-gradient( top, #FFF07E, #FFAA22 70% );
    background-image: -moz-linear-gradient( top, #FFF07E, #FFAA22 70% );
}

And you get the same result with no images or pseudo-elements. You can add a simple background color change as well as a fallback for older browsers.

Here it is action: http://jsfiddle.net/t9ryJ/1/

Upvotes: 0

Related Questions