Gundersson(dot)com

I am not a fan of Microsofts Internet Explorer browser, I find it twitchy, buggy, insecure and feature-less. Thusly I rearely use it, but many others unfortunately do and so one has to cope with the situations that arise when such a user enters your site. This is not news, this applies to all sites and all browsers and is a fact you have to live with. It doesn’t make it more fun though. So, what to do then?

Differences

Well, there are some different ways to handle different browsers depending on what needs to be altered. Sometimes all you need is a small change in a CSS tag, like for instance with the box-model hack, where you have to set different widths for IE and Firefox, as examples. The box-model hack doesn’t sit right with me though for two reasons, one it doesn’t validate, and two I don’t like hacks in my code :). Other times you may need a completely different structural layout, this however is becoming less of an issue with CSS progressing and being more flexible with positioning and such. I rarely ever use split layouts for different browsers anymore.

What I do

I am fortunate enough to have a web hoster that supplies me with more or less everything my sick and twisted mind can conjure up. So I use PHP to identify the browser(or user agent if you wish) and include the appropriate CSS file for that browser. The code is simple and short, so short infact that it doesn’t look as if it could do much of anything really.

< ?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
$style = "";
if(strstr($userAgent, "MSIE")){
$style = style-msie.css";
}
else{
$style = style.css";
}
?>


Then, in your header tag your put the line:

link rel="stylesheet" type="text/css" xhref="< ?php print $style; ?>"

and Bob’s your uncle.

If you feel that it is completely redundant to have two different stylesheets for such a small differencs as the box-model hack simply split your CSS file into smaller ones. I regularly use one file for layout and one for text, just apply the script to the one with your layout and you can use the text file on both.

There are lots of ways to dodge the different cross-browser problem, this is how I do it. It’s most certainly not the best one I’m sure but it gets the job done and it keeps your CSS validating. It requires PHP though, just in care you were wondering ;)