the color of the upper blue horizontal bar does not change in IE8

Question

I followed the instructions in this other theard and I am having a problem with IE8. It works fine with Chrome and Firefox. I have cleaned the cache.

Here's what I have done: myTest.css

div#suiteBarLeft{
background-color: red;
}

Registration in master page:

  <SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/css/myTest.css %>" After="corev15.css" runat="server"/>

Does javascript interfer here? Any idea how to resolve this?

Thank you.

Answer 1

try changing it to

div#suiteBarLeft{
background-color: red !important;
 }

Answer 2

you need to use !important to force that css to the control.

In your case it looks like it overwritten! you could put the css registration within the masterpage to be the last one to register, dont forget it procedural!

also like to note that you should inspect the element using f12 deverloper tools, when you inspect as its changing the element you should see your css on the right but it would have a red strikethrough as its overwritten.... look for other css class that is overwriting it, it should be shown underneath it! it will also state which .css file its comming from and what its using.

You could have some JS file after the dom is loaded that is overwriting the css or a css class that is called later in the tree that also has important or more explicit call!

the only way to find out is by inspecting the element on developer tools!