CSS acting weird

Question

i have the following css code:

.tag {
    display: inline;
    font-size: 10px;
    padding: 5px;
    color: #FFF;
    background-color: #444;
}

.tag:hover {
    font-size: 10px;
    padding: 5px;
    color: #FFF;
    background-color: #666;
}

aside from the background color, and one having the display:inline, there is no difference, correct? Well when the .tag div comes into existance, it has white text but no background color. it also has a 12pt font size and no padding. however, it looks perfectly the way its supposed to when I hover over it. Can anyone tell me why its doing this?

Answer 1

there will be no different if you only have these 2 classes in your css file/scriptlet. but it will be different if you have more than 2 and mixed with other classes as well.

your .tag might be overidden by other class I'd debug it using firefox + firebug. This tool will show you which css class/properties is voeridden

Answer 2

Use !important