Question

I have added a button styling to a div. The background-color does not apply to the normal state. However, as soon as I click down on the button and turn it into an active state, the background-color applies correctly. I cannot figure out why the background-color only appears in one stage and not the other. I have resorted to using !important to make it work. Below is the CSS:

.statusbutton {
    -moz-box-shadow:inset 0 1px 0 0 #ffffff;
    -webkit-box-shadow:inset 0 1px 0 0 #ffffff;
    box-shadow:inset 0 1px 0 0 #ffffff;
    height:43px;
    width:40px;
    border:1px solid #ccc;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    display:inline-block;
    background-color:#fbfbfb !important;
}


.statusbutton:active {
    position:relative;
    background-color:#fbfbfb;
    top:1px;
}

EDIT: I realized the issue came from a later part of my stylesheet:

.red {
background:url(status-red.png) no-repeat center center;
}

I applied .red to the button afterwards, which caused the background image to override the background-color. The code below ended up fixing the issue:

.red {
background:url(status-red.png) no-repeat center center;
background-color:#fbfbfb;
}

Answer 1

Using !important is usually a bad idea. Is this your entire css file or is there more? There may be another css style with higher priority that is overriding your attempts to set the background color here. I would suggest setting up a jsfiddle if you’re still having trouble