After adding button styling to a div, I encountered an issue where the background-color only applied in the active state but not in the normal state. Despite trying various solutions, including using !important, I could not get the background-color to display as intended. Here is the CSS code I used:
.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;
}
Upon further investigation, I discovered that the issue stemmed from a later part of my stylesheet:
.red {
background:url(status-red.png) no-repeat center center;
}
I realized that applying the .red class to the button was causing the background image to override the background-color attribute. To resolve this, I added the background-color property to the .red class like so:
.red {
background:url(status-red.png) no-repeat center center;
background-color:#fbfbfb;
}