0

I want to set some css just for Mozilla. I wrote these css:

 @-moz-document url-prefix() {
    .button{
        background-color: red;
        border: 1px solid red;
        border-radius: 3px;
     }
 }

My problem is these aren't work! How can i fix this? Thank you for help.

Elham Gdz
  • 1,015
  • 3
  • 15
  • 31
  • CHECK you are mentioning `.button` class – Sam1604 Sep 20 '14 at 05:37
  • Append this code after every other css code and check if you need an !important – GramThanos Sep 20 '14 at 05:39
  • @Sam1604: My class name is '.meh-btn' , i wrote '.button' here for example. – Elham Gdz Sep 20 '14 at 05:44
  • @ThanasisGrammatopoulos: I add !important but it doesn't change! – Elham Gdz Sep 20 '14 at 05:46
  • 2
    "Doesn't work" meaning, the styles are applied in no browsers, or all browsers, or...? Also, where did you see that an empty url will work? You may need to try `regexp("*")`. In any case, why do you want to limit this rule to Mozilla? –  Sep 20 '14 at 05:54
  • @torazaburo: I mean that these styles doesn't apply in mozilla. I wrote an example here for say what is my problem but my styles are another things. in url what i need to write? I search and all examples that i see are wrote like this! – Elham Gdz Sep 20 '14 at 06:03
  • Related: http://stackoverflow.com/questions/3123063/what-does-moz-document-url-prefix-do –  Sep 20 '14 at 06:25
  • Related: http://stackoverflow.com/questions/23668783/firefox-ver-29-css-hack-moz-document-url-prefix-not-working –  Sep 20 '14 at 06:28
  • 1
    There's nothing fundamentally wrong with what you are doing. Try some tests. First, make sure `@-moz-document` is working, by trying a rule such as `@-moz-document url-prefix() { body: { background: yellow; } }` (which works for me). Then, as other commenters have alluded to, examine the element with class `button` in the style inspector, and see what styles are betting applied; perhaps the properties you are specifying are being overridden by a rule of greater specificity. –  Sep 20 '14 at 06:42
  • Also, lint your entire CSS file. Check to make sure there is not an error in the preceding rule which might be swallowing this one. –  Sep 20 '14 at 06:52
  • @torazaburo: Every thing is ok but i don't understand why if i move css from html file to css file, it doesn't work!!! – Elham Gdz Sep 20 '14 at 07:10
  • 1
    @ElhamGdz Most likely because (1) your CSS file is not being found/read in (2) there's some error elsewhere in your CSS file that is swallowing this rule (3) the ordering implied by where you put this rule in your CSS file vs. where it falls when included directly in HTML is causing cascade problems which are causing your rule to get overridden. –  Sep 20 '14 at 07:14

0 Answers0