1

I have created a custom CSS file under my (site content --> style library) and I added a reference to this CSS on my master page. I test the layout on chrome, Firefox and IE version10 and it is working well.

But users how are using IE version 8 , complaints from some layout issues, and after checking this I realized that these layout issues are related to the fact that the custom CSS did not apply on IE version8, while if the same users access the SharePoint using chrome there will not be any layout issue

So can anyone advice please?

My current custom CSS after adding \9 looks as follow:-

div#suiteBarLeft{
background-color: #008CD2;
color: #FFFFFF;
}

div#suiteBarLeft{
background-color: #008CD2\9;
color: #FFFFFF\9;
}

div#siteIcon{ 
display: none;
}


div#suiteBarRight{
background-color: #008CD2;
color: #FFFFFF;
}
div#suiteBarRight{
background-color: #008CD2\9;
color: #FFFFFF\9;
}

div#zz4_Menu_t{

color: #FFFFFF;
}

div#zz4_Menu{

color: #FFFFFF;
}


#s4-titlerow{ 
    display: none !important;
}
#pageTitle {position: absolute; left: 400px; top: 40px;color:white;}

#uppersearch{ 
    background-color:white;background:white;color:white !important;
    }



div#welcomeMenuBox span.ms-core-menu-root { background-color: white; color: white !important; }

#SearchBox { background-color: white; }

.s4-title h1 a, .s4-title h2, .s4-title h2 a{color:white !important;}


/* Change the color of the usernames*/
#welcomeMenuBox a
{
        Color:#FFFFFF;
}
.ms-core-menu-box {
        background-color:#008CD2}

#zz5_Menu_t{
 background-color:#008CD2;   
        }
#zz5_Menu{
 background-color:#008CD2;
        }

#zz1_ID_PersonalActionMenu
{
 background-color:#008CD2; }



/* Change the color of the App page tittle*/
#pageTitle a
{
        Color:#FFFFFF;
}










div#suiteBarLeft{
background-color: #008CD2\9;
color: #FFFFFF\9;
}

div#siteIcon{ 
display: none\9;
}


div#suiteBarRight{
background-color: #008CD2\9;
color: #FFFFFF\9;
}

div#zz4_Menu_t{

color: #FFFFFF\9;
}

div#zz4_Menu{

color: #FFFFFF\9;
}


#s4-titlerow{ 
    display: none !important\9;
}
#pageTitle {position: absolute\9; left: 400px\9; top: 40px\9;color:white\9;}

#uppersearch{ 
    background-color:white\9;background:white\9;color:white !important\9;
    }



div#welcomeMenuBox span.ms-core-menu-root { background-color: white\9; color: white !important\9; }

#SearchBox { background-color: white\9; }

.s4-title h1 a, .s4-title h2, .s4-title h2 a{color:white !important\9;}


/* Change the color of the usernames*/
#welcomeMenuBox a
{
        Color:#FFFFFF\9;
}
.ms-core-menu-box {
        background-color:#008CD2\9;}

#zz5_Menu_t{
 background-color:#008CD2\9;   
        }
#zz5_Menu{
 background-color:#008CD2\9;
        }

#zz1_ID_PersonalActionMenu
{
 background-color:#008CD2\9; }



/* Change the color of the App page tittle*/
#pageTitle a
{
        Color:#FFFFFF\9;
}
9
  • 1
    Ask users to upgrade to IE 9/10 at least :) Sep 12, 2013 at 12:00
  • why i should ask them to upgrade ?, users might have IE version 8 which is a supported version for SharePoint 2013 as mentioned on this link msdn link technet.microsoft.com/en-us/library/cc263526.aspx
    – John John
    Sep 12, 2013 at 12:03
  • Try validating your custom css in visual studio using the Web Essentials tool
    – Remko
    Sep 12, 2013 at 12:13
  • 1
    It's really strange because I can display in IE8 all my custom css without any problems. Do all the css rules in this file not work or only CSS3?
    – banana
    Sep 12, 2013 at 14:33
  • 1
    Try to test the hack, put \9 on the end of the line like so: div#suiteBarLeft{ background-color: #008CD2\9; color: #FFFFFF\9; }
    – dzookatz
    Sep 12, 2013 at 16:41

2 Answers 2

2

This thread might provide some clarity. Masterpage and CSS are not applied in IE 8 If IE8 is indeed loading CSS in a different order than more modern browsers, you might have to be more specific in your CSS as outlined in the thread.

4
  • i have added "!important;" to the background-color and i have also added "filter: none !important;". and the customCSS worked well. but not sure if adding these two chnages will affect other working CSS . till now i did not observe any side effects.what do u think ?
    – John John
    Sep 12, 2013 at 23:56
  • 1
    Here is a list of CSS and its compatibility by version of IE. msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx important should not be a problem but there is an issue with filter. See this StackOverflow thread for more information. stackoverflow.com/questions/6593873/… Sep 13, 2013 at 16:25
  • thanks for the rely. but as long as adding important and filter have fix my problem in IE8 , i will keep them for now. what risks i might face if i keep these two CSS components ??
    – John John
    Sep 13, 2013 at 16:36
  • The only issue I could anticipate would be the slight incompatibility of filter outlined in the Stack Overflow article I posted above. Best of Luck! Sep 13, 2013 at 22:14
1

Try these CSS hacks for various versions of Internet Explorer.

body { 
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
10
  • but what will this help in my situation, can you advice ?
    – John John
    Sep 12, 2013 at 12:11
  • If you add the '\9' to your CSS lines, it should display it in a correct manner. Other option would be to manually add the classes to your HTML, but in SharePoint, if you mess with the master page HTML, you`d probably brake the entire site layout.
    – dzookatz
    Sep 12, 2013 at 12:14
  • where i should add the \9 inside the custom CSS ?
    – John John
    Sep 12, 2013 at 12:15
  • 1
    See the example from the answer.
    – dzookatz
    Sep 12, 2013 at 12:16
  • 1
    Like the example says, you should place it inside your custom CSS file, in every class/id you wrote the CSS for :)
    – dzookatz
    Sep 12, 2013 at 12:47

Your Answer

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

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