Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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?

share|improve this question

3 Answers 3

up vote 6 down vote accepted

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.

share|improve this answer

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.

share|improve this answer
    
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 '13 at 7:03

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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