CODEWITHSUNDEEP
htmlcssfirefoxjetty
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

@-moz-document url-prefix () not getting rendered in firefox

I've got the following CSS specified for firefox.

.bill-tab-button {
    width: 33.3%;
    height: 100%;
    float: left;
    border-left: 1px solid rgb(197, 196, 196);
    border-bottom: 1px solid rgb(197, 196, 196);
    box-sizing: border-box;
    font-family: MyriadProReg;
    cursor: pointer;
}

.bill-tab-fixed-width {
    width: 105px;
}

.bill-tab-button-selected {
    border-bottom: 2px solid red;
    box-sizing: border-box;
    color: #b83709;
    border-left: none;
}

.bill-tab-button span {
    padding: 3px;
    vertical-align: -3px;
}

/* Firefox Specific CSS Styling */

@-moz-document url-prefix (){
    .bill-tab-button { 
        width:33.2%;
        height: 90%;
        float: left;
        border-left: 1px solid rgb(197, 196, 196);
        border-bottom: 1px solid rgb(197, 196, 196);
        box-sizing: border-box;
        font-family: MyriadProReg;
    }

    .bill-tab-fixed-width {
        width: 104.0px;!important
    }

    .bill-tab-button-selected {
        border-bottom: 2px solid red;
        box-sizing: border-box;
        color: #b83709;
        border-left: none;
    }
}

When I test these without a server ( jetty ) the CSS get's rendered perfectly! I'm using this CSS for a spring web app and I use jetty as the server. When I run the application, the browser renders the default CSS instead of the firefox specific ones.

Is there anything that conflicts with the URL-prefix. please help me!

Upvotes: 2

Views: 1711

Answers (1)

BoltClock
BoltClock

Reputation: 723729

The CSS should never render at all, because there's a space between url-prefix and () that isn't supposed to be there. You need to remove it, or at least move it outside the (). I also see a misplaced !important that seems like it can safely be omitted altogether, or if not, it should come before the ;:

@-moz-document url-prefix() {
    .bill-tab-button { 
        width:33.2%;
        height: 90%;
        float: left;
        border-left: 1px solid rgb(197, 196, 196);
        border-bottom: 1px solid rgb(197, 196, 196);
        box-sizing: border-box;
        font-family: MyriadProReg;
    }

    .bill-tab-fixed-width {
        width: 104.0px !important;
    }

    .bill-tab-button-selected {
        border-bottom: 2px solid red;
        box-sizing: border-box;
        color: #b83709;
        border-left: none;
    }
}

If this still does not fix the issue, something else is wrong. You'll want to provide more information based on what's asked in the comments.

Upvotes: 2

Related Questions