Creating a Secondary CSS Stylesheet for Internet Explorer
Don’t ask me why, but for some reason one of the biggest headaches in regards to web programming is cross browser compatibility. Who knows what goes on behind the scenes at Microsoft and Mozilla and why they can’t just agree on a certain standard to make it easier for the rest of us to work around their browsers.
I program and design everything on a Mac using Firefox as my testing browser. Some say I’m crazy for working this way but I came in from a design standpoint and Macs are better machines for creativity and design. But now every time I code something I need to make sure it looks good in Explorer 6 & 7, which makes up over 40% of the users in the world (according to these guys).
Here is a small piece of code you can add to your website to create a secondary CSS stylesheet for Explorer so that you can add a few more styles to make sure your site is looking good all over.
Place the following code anywhere between the<head></head> tags.
<!--[if IE]> <link rel="stylesheet" type="text/css" href="YOUR-SITE/iestyles.css" /> <![endif]--> |
Don’t forget to change “YOUR-SITE” to your domain, and add a directory location if the stylesheet isn’t in your main directory.
For WordPress users, place this code in your header.php files between the <head></head> tags.
<!--[if IE]> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/iestyles.css" /> <![endif]--> |
Now all you need to do is create a file called iestyles.css and add the CSS style changes you need to make it all look good in Explorer.
thanks for the great post.
this is very basic but a must know for web developers..
Great work.thanks
is there a plugin that fixed all ie css issues? ive been here:
http://code.google.com/p/ie7-js/
but doesn’t do all that much to solve some of the problems.
I wish. There are too many stupid incompatibilities with IE that make it so lame.
Thx, helpfull thing. Simple and easy.