Custom CSS will not work on Internet Explorer 8

Question

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;
}

Answer 1

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.

Answer 2

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 */
}