background-color not working in IE7 - css

Question

Below is my HTML code
<UL>
<LI>
<LI>
..
<LI>
<a class="upload_menu" href="someLink" ><span>Your Recipes</span></a>
</LI>
<LI>
</UL>
Below is the CSS class
.ie7 #navigation .upload_menu {
background-color: #bb3f3f;
color: #FFF;
float: left;
font-size: 12px;
font-weight: bold;
padding: 9px 4px 10px 6px;
text-decoration: none;
!background: url(../../../static-files/images/common/nav-divider.gif) no-repeat right;
border-right: 1px solid #BCDAEE;
}
.ie7 #navigation .upload_menu:hover {
background-color: #bb3f3f;
}
Also gave a try for below CSS
*:first-child +html #navigation .upload_menu {
background-color: #bb3f3f;
color: #FFF;
float: left;
font-size: 12px;
font-weight: bold;
padding: 9px 4px 10px 6px;
text-decoration: none;
!background: url(../../../static-files/images/common/nav-divider.gif) no-repeat right;
border-right: 1px solid #BCDAEE;
}
*:first-child +html #navigation .upload_menu:hover {
background-color: #bb3f3f;
}
But background-color attrtibute itself is not being taken as can be seen in Developer tool.

Answer 1

I think the problem here is the hacky:
!background: url(../../../static-files/images/common/nav-divider.gif) no-repeat right;
It appears to be overriding your background-color attribute (going by the background-image property in the "Current Style" list) - unless you're giving it a background-image elsewhere - if so that code hasn't been provided.
What you can do is add the colour to that declaration:
!background:#bb3f3f url(../../../static-files/images/common/nav-divider.gif) no-repeat right;
Or alternatively separate those background parts out a little to prevent it overriding the background-color attribute:
!background-image:url(../../../static-files/images/common/nav-divider.gif);
!background-repeat:no-repeat;
!background-position-x:right;