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;
}
  • 1
    Ask users to upgrade to IE 9/10 at least :) – Arsalan Adam Khatri Sep 12 '13 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 Gu Sep 12 '13 at 12:03
  • Try validating your custom css in visual studio using the Web Essentials tool – Remko Sep 12 '13 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 '13 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 '13 at 16:41
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.

  • 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 Gu Sep 12 '13 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/… – MonkeyWrench Sep 13 '13 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 Gu Sep 13 '13 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! – MonkeyWrench Sep 13 '13 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 */
}
  • but what will this help in my situation, can you advice ? – john Gu Sep 12 '13 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 '13 at 12:14
  • where i should add the \9 inside the custom CSS ? – john Gu Sep 12 '13 at 12:15
  • 1
    See the example from the answer. – dzookatz Sep 12 '13 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 '13 at 12:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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