Custom css changes (which work in Chrome) dont work in IE

Org Chart SharePoint 2013/2016 version
1


Here is the custom css code.
Problem is that IE does not apply the custom css that gets spit out in the style tag in header, whereas chrome does so. Any ideas how to solve it. I have tried ‘Content editor webpart’ for css changes in page footer, and external css file as well, nothing seems to work.

.detailsTooltipLink{
color:#22bcb9 !important;
}

.middleContentArea .field-container > a{
color:#22bcb9 !important;
}

.pl-item .pl-item-template{
background-color: #E9EAEA !important;
border-color: #E9EAEA !important;
}

.poch-content{
background-color: #fff !important;
}

.PochSkin_MetroTouch{
font-family:Arial, Helvetica, sans-serif !important;

}

.PochSkin_MetroTouch .pl-item-card a, .PochSkin_MetroTouch .pl-item-card a:visited, .PochSkin_MetroTouch .pl-item-card a:hover{
color:#22bcb9 !important;
}

.PochSkin_MetroTouch .rocItemContent, .PochSkin_MetroTouch .rocItemTemplate{
color:#4d4d4f !important;
}

2

Found a work around.
Fix it using javascript…no so ideal, but cant find any css way to solve it for IE.

renderer.onLoadingFinished(function(){

$(".PochSkin_MetroTouch .pl-item-card a, .PochSkin_MetroTouch .pl-item-card a:visited, .PochSkin_MetroTouch .pl-item-card a:hover, .PochSkin_Black .pl-item-card a, .PochSkin_Black .pl-item-card a:visited, .PochSkin_Black .pl-item-card a:hover, .PochSkin_BlackMetroTouch .pl-item-card a, .PochSkin_BlackMetroTouch .pl-item-card a:visited, .PochSkin_BlackMetroTouch .pl-item-card a:hover, .PochSkin_Forest .pl-item-card a, .PochSkin_Forest .pl-item-card a:visited, .PochSkin_Forest .pl-item-card a:hover, .PochSkin_Glow .pl-item-card a, .PochSkin_Glow .pl-item-card a:visited, .PochSkin_Glow .pl-item-card a:hover, .PochSkin_Metro .pl-item-card a, .PochSkin_Metro .pl-item-card a:visited, .PochSkin_Metro .pl-item-card a:hover, .PochSkin_OfficeBlack .pl-item-card a, .PochSkin_OfficeBlack .pl-item-card a:visited, .PochSkin_OfficeBlack .pl-item-card a:hover, .PochSkin_Sunset .pl-item-card a, .PochSkin_Sunset .pl-item-card a:visited, .PochSkin_Sunset .pl-item-card a:hover, .PochSkin_Web20 .pl-item-card a, .PochSkin_Web20 .pl-item-card a:visited, .PochSkin_Web20 .pl-item-card a:hover, .PochSkin_WebBlue .pl-item-card a, .PochSkin_WebBlue .pl-item-card a:visited, .PochSkin_WebBlue .pl-item-card a:hover").attr(“style”, “color:#22bcb9 !important”);

});

3

Hello,

Thank you for your question.

Try to use more specific CSS selectors like this:

.PochSkin_MetroTouch .pl-item-card a.detailsTooltipLink{ color:#22bcb9 !important; }

Instead of this:

.detailsTooltipLink{ color:#22bcb9 !important; }

Best regards
Anton Khritonenkov
Plumsail Team