Yes, I know I don’t update here as often as I should, but hey, I do this, I just don’t frequently write about it.
So, let’s say you’ve coded a beautiful site, and you’re really proud of it, and you check it in IE6 and it looks like someone wrapped the entire thing in marquee and blink tags and then had their dog recode it for you. The natural inclination is to scream and toss your monitor out the window, and then hire Tom Clancy to write you into a Rainbow Six novel where you take out Microsoft Headquarters. While that would be an exciting read, what’s really going to solve your problem is to simply write a new CSS file to compensate for IE6 not being a real browser and a large (but slowly shrinking) segment of the browsing population not understanding that.
So, here’s how you handle adding a new CSS file in the most painless way possible:
You’ll already have your css declaration, which should look like this:
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
So, all you do is create your new CSS file, name it something like ie6.css, and throw that in there too.
<link rel="stylesheet" type="text/css" media="screen" href="/css/ie6.css" />
But you don’t want Firefox (or Opera, or Safari, or even IE7) to see this web-based atrocity, so we’ve got to tell them to just move along, nothing to see here, folks:
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" /><![endif]-->
That’s right, that’s all there is to it! Now, only IE6 will see it that CSS file.
BUT WAIT THERE’S MORE! This little trick is actually a bit more powerful.
You can wrap whole sections of code in this block:
<!--[if...]> ... <[endif]-->
And, it’s not just for IE6. You can check for any IE version or even a range of versions with this syntax:
if IE 5.5 Single version specific
if gt IE 5.5 all versions greater than the specified version
if gte IE 6 all version greater than or equal to the specified version
if lt IE 7 all versions lower than
if lte IE 6 all versions lower than or equal to the specified version
So, if your problem exists in IE6 and IE7, but not IE 8, you’d just add
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" /><![endif]-->
to capture anything equal to or lower than IE7.
Now, a quick note on crafting your CSS files. In my IE .css files, I just take the line that’s not working in IE, copy it to my IE6 css, and beat it until it complies. The problem with this method is that you’ve now got two lines crashing into each other, fighting a bloody struggle for dominance (and submission!). How, you ask, do you get the desired line to be the one that works? Give it an inflated sense of importance.
Say you’ve got this line:
.page_content { background:#0CF; padding:10px 15px 10px 297px; }
but IE6 doesn’t understand pixels (or turquose), so you need to change it to:
.page_content { background:#FC0; padding:11px 16px 12px 15px; }
the way to make sure that the line from your IE css is to add !important to the end of every statement, before the semicolon:
.page_content { background:#FC0 !important; padding:11px 16px 12px 15px !important; }
That will guarantee that those declarations are the ones that are recognized when there’s the possibility for confusion.
It’s not enough! I need more! IE checking doesn’t seem to satisfy.
Do you need more advanced browser checking? Are you encountering a 1-pixel variance in Chrome? Do you want to have your website make fun of backwards Safari users? Well, simply checking for IE6 isn’t going to help you. You need more power (ah! ah! ah!):
<?
if(preg_match("|Opera/([0-9].[0-9]{1,2})|", $useragent, $matched)){
$browser_version = $matched[1];
$browser = "Opera";
}elseif(preg_match("|MSIE ([0-9].[0-9]{1,2})|", $useragent, $matched)){
$browser_version = $matched[1];
$browser = "IE";
}elseif(preg_match("|Firefox/([0-9\.]+)|", $useragent, $matched)){
$browser_version = $matched[1];
$browser = "Firefox";
}elseif(preg_match("|Chrome/([0-9\.]+)|", $useragent, $matched)){
$browser_version = $matched[1];
$browser = "Chrome";
}elseif(preg_match("|Safari/([0-9\.]+)|", $useragent, $matched)){
$browser_version = $matched[1];
$browser = "Safari";
}else{
$browser_version = 0;
$browser = "Other";
}
?>
The output of this will get you down to the very version number, so if you’ve got some philosophical disagreement with anyone running Firefox 3.0.12, you can pick that version out specifically (but why? WHY?!).
It’s a good idea to leave this whole code chunk intact an in order, because Opera can masquerade as IE if you’re just checking for IE, and Chrome will pretend it’s Safari if you’re just checking for Safari.
-pb