browser hack syntax
I got stuck with using a svg file for a logo and it displays differently in different browsers. When I hack the svg code for one browser it ruins it for the next.
I decided to just use one version of the svg for Firefox and another for Chrome and Safari and a 3rd for IE9-10 and revert to a jpg for IE7 and 8.
I found some browser hack code and wrote this but I don't know if I have the syntax correct? Also will this work by itself or do I need a Javascript someplace for detecting the browser? How do I handle thoe one I have as 'Other?
This is for a WordPress site.
I decided to just use one version of the svg for Firefox and another for Chrome and Safari and a 3rd for IE9-10 and revert to a jpg for IE7 and 8.
I found some browser hack code and wrote this but I don't know if I have the syntax correct? Also will this work by itself or do I need a Javascript someplace for detecting the browser? How do I handle thoe one I have as 'Other?
This is for a WordPress site.
Code:
/*Firefox*/
*.shadowff{display:block;}
*.shadowie1{display:none;}
*.shadowie2{display:none;}
*.shadowchrome{display:none;}
/*Safari*/
*.shadowff{display:none;}
*.shadowie1{display:none;}
*.shadowie2{display:none;}
*.shadowchrome{display:block;}
/*Chrome*/
* .shadowff{display:none;}
*.shadowie1{display:none;}
*.shadowie2{display:none;}
*.shadowchrome{display:block;}
/*IE 7 and below*/
* .shadowff{display:none;}
*.shadowie1{display:block;}
*.shadowie2{display:none;}
*.shadowchrome{display:none;}
/*Other*/
* .shadowff{display:none;}
*.shadowie1{display:block;}
*.shadowie2{display:none;}
*.shadowchrome{display:none;}
*/ IE >7*/
* .shadowff{display:none;}
*.shadowie1{display:none;}
*.shadowie2{display:block;}
*.shadowchrome{display:none;}