2

In SharePoint 2013, I have my custom masterpage. Masterpage uses custom CSS. Inside of my custom CSS I have:

#suiteBarLeft, 
#suiteBarRight { 
    background-color:#004250;
    vertical-align:middle;
}

This piece of code changes color of top bar (this one with Newsfeed, SkyDrive and Sites - suiteBarLeft - and user name, cog wheel - suiteBarRight).

This works perfctly in all modern browsers. Unfortunatelly, my client uses IE8. In this browser, top bar is still blue and gray, just like in standard CSS.

I'm not sure, if this is IE problem with CSS only, or is this something with SharePoint. Does someone have an idea, how can I make my site look the same in all browsers?

3 Answers 3

7

After long investigation I found solution. It is both SharePoint and IE 8 specific problem.

IE 8 loads styles in different order, than IE 10. In IE 8, after my custom css, class .ms-core-needIEFilter was loaded. The class has gradient inside.
I added to my custom CSS following code:

.ms-core-needIEFilter #suiteBarLeft
{
background-color:transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#004250,endColorstr=#004250)";
}

.ms-core-needIEFilter #suiteBarRight
{
background-color:transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#004250,endColorstr=#004250)";
}

where startColorstr and endColorstr were set to same value as my background-color.

1
  • You could also use an !important tag in your custom css to override any other element's style no matter when it was loaded.
    – bgmCoder
    Feb 23, 2015 at 4:49
1

Check this out:

CSS background-color Property

According to the page:

IE8 requires a !DOCTYPE.

So yes, the problem is a very specific thing between IE8 and CSS. You may still get it to work in your customer's jurassic browser by making a small change to your master page, though.

1
  • Masterpage has following doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    – Tschareck
    Jul 8, 2013 at 7:03
0

While the CSS updates above will work around the issue, another option as mentioned in this MSDN question, if you set the IE zoom to 100% the top bar will render correctly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.