background-color not working in IE7

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.

DeveloperTool Tab

@Dhaval: why not? A lot of people (unfortunately, I admit) still use it. — David Thomas, May 17 '13 at 12:59
possible duplicate of [IE7 background color issue](http://stackoverflow.com/questions/13311826/ie7-background-color-issue) — dsgriffin, May 17 '13 at 12:59
I also tried adding `height` as mentioned in link pointed by @Zenith. It didn't work. — Vikas V, May 17 '13 at 13:00
Why I can't see `background-color` attribute in Developer tool? — Vikas V, May 17 '13 at 13:01
Problem is not because of [IE7 bacground issue](http://stackoverflow.com/questions/13311826/ie7-background-color-issue). But because of `!background` — Vikas V, May 17 '13 at 13:29

James Donnelly · Accepted Answer · 2013-05-17T13:08:53.413

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;

background-color not working in IE7

1 Answers1