Browser detection using JavaScript is a touchy subject these days.
Setting IE's font size to match the rest of the world's browsers is no easy task. Or is it? Many themers feel a need to adjust the naturally gargantuan tendency of IE's fonts, or use a CSS hack to force IE to comply with a proper box model. Unfortunately for Palm Pilot users, Blackberries, screen readers, and even older versions of Opera, turning to JavaScript browser detection is a failed proposition. There are so many different browsers and screen sizes out there that it becomes impossible to feed each one it's own unique style sheet.
The savvy themer will no doubt be asking, "Why not use one style sheet for all browsers, and then use JavaScript to feed IE it's own settings?" Good point, but there's a better way than scripting to get this done.
Microsoft has enabled the Drupal themer to send Internet Explorer it's very own set of CSS rules using a modified HTML comment tag. This comment is not a valid tag according to HTML standards, it's just a comment. All browsers should simply ignore it and move on. IE, however, will read this unique tag and follow every instruction inside it. The Conditional Comment is wrapped around a <link> tag that contains IE's very own stylesheet. Here's how it looks:
<!--[if IE]>
<link href="screenStyle4IE.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->Place this tag only within the <head> of the page. Once the <link> tag is parsed by IE, any CSS in the screenStyle4IE stylesheet will take over. Remember that CSS is a cascading ruleset, so any overrides to previous rules must necessarily come after the normal CSS include link. Add a Conditional Comment to Garland's page.tpl.php file like this:
<head>
<title>php print $head_title</title>
php print $head
php print $styles
php print $scripts
<style type="text/css" media="print">@import "php print base_path() . path_to_theme() /print.css";</style>
style type="text/css" media="screen">@import "php print base_path() . path_to_theme() /views.css";</style>
style type="text/css" media="screen">@import "php print base_path() . path_to_theme() /views.css";</style>
<!--[if lt IE 7]>
<style type="text/css" media="all">@import "php print base_path() . path_to_theme() /fix-ie-layout.css";</style>
<![endif]-->
<!--[if IE ]>
<style type="text/css" media="all">@import "php print base_path() . path_to_theme() /fix-ie-font-sizes.css";</style>
<![endif]-->
</head>This flexibility is astounding! It is now possible to feed a class for layout divs to all browsers, and then override the size, z-index, float, or margins of that div specifically for IE.
Font sizes, you say? But of course! IE's fonts are always one size larger than other browsers. Tame them by specifying style rules in fix-ie-font-sizes.css that are one size smaller that the corresponding rule in your regular stylesheet. For instance, if p{font-size:normal}, then fix-ie-font-sizes would spec p{font-size:small}. This keeps all browsers in somewhat of a uniformity without having to rely on hacks such as font percentages.
Oh, and if you want to hone in on specific versions of IE, refer to the previous code block for an example. <!--[if lt IE 7]> means "All instances of IE that are less than IE7". For more info on "lt IE6", "lte IE7" and so on, refer to Microsoft's Conditional Comments workshop
