IE Conditional Comments
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 its 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 its 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 its 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 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() ?>/screen.css";</style>
style type="text/css" media="handheld">@import "<?php print base_path() . path_to_theme() ?>/handheld.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 font percentage hacks.
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
The original forum post on this subject can still be viewed at http://drupal.org/node/16173
NOTE: Using internal, or inline stylesheets can lead to problems with some browsers (notably Opera and Safari), since they don't always ignore the CSS inside the comments. Using external stylesheets, as described above, seems to resolve this issue.
Not for IE!
You can also include markup for every browser except IE , with this slightly different construction:
<!--[if !IE]>-->...
<!--<[endif]-->
Reset Your Theme
I was just working on an ie6 specific stylesheet but could not seem to get it to register. I would put the conditional comment in but no matter what I did it would not show up once i uploaded the page.tpl.php file. I then tried by putting on another theme then turning mine back on and then it worked. It seems to take a theme reset for drupal to recognize the conditional comments so try that if our stuck.
http://inletmedia.com