0

I have css called action1 and i trying to remove outline property from it just for firefox browser. Here is the class

a.action1,a.action1:link,a.action1:visited {
    display: block;
    height: 27px;
    width: 200px;
    color: #FFFFFF;
    background-color: #666633;
    font-family: Century Gothic, sans-serif;
    font-size: 13px;
    text-align: center;
    vertical-align:middle;
    padding: 1px 2px;
    border: 1px solid #FFFFFF;
    outline: 1px solid #666633;
    text-decoration: none;
    margin: 1px;
    cursor: pointer;
    -moz-box-shadow: 0px 0px 6px 0px #888;
    -webkit-box-shadow: 0px 0px 6px 0px #888;
    box-shadow: 0px 0px 6px 0px #888;
}

and here is the code i am using in my jsp to remove the outline property

<style>
@-moz-document url-prefix() {
    a.action1 {
        outline: 0px;
    }
}
</style>

This is not working for. 

<a class="action1" onclick="dosomething()" href="gosomewhere">somename</a>

Although moz-document is working perfectly fine for input type button.

user1241438
  • 1,533
  • 4
  • 17
  • 24
  • Possible duplicate of [@-moz-document not working](https://stackoverflow.com/questions/29803319/moz-document-not-working) – Dan Sep 19 '18 at 15:08

1 Answers1

1

Use Firebug to check whether the css is applied, whether it has lower priority level than others.

Try

<style>
@-moz-document url-prefix() {
    a.action1 {
        outline: 0 none !important;
    }
}
</style>
muzuiget
  • 1,057
  • 1
  • 10
  • 11
  • This worked. I had the outline defined in a common css file which gets included first in jsp page and then i had the firefox override defined in the jsp page. SO i thought the one in the JSP page should get applied. I dont know on what basis browsers apply CSS styles. Thanks muzuiget. – user1241438 Apr 18 '13 at 14:37
  • 1
    Unfortunately, I fear, as of Firefox 59 this won't work anymore: https://bugzilla.mozilla.org/show_bug.cgi?id=1035091 – Fencer Mar 20 '18 at 10:08