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
on the end of the line like so:div#suiteBarLeft{ background-color: #008CD2\9; color: #FFFFFF\9; }