Apefassewilla
New Member
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:\[code\].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;}\[/code\]EDIT: I realized the issue came from a later part of my stylesheet:\[code\].red {background:url(status-red.png) no-repeat center center;}\[/code\]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:\[code\].red {background:url(status-red.png) no-repeat center center;background-color:#fbfbfb;}\[/code\]