CSS reset and Fonts + CSS and Internet Explorer
A couple of questions came up in our users group get together last night and I thought I should probably post the answers here again for everyone to see.
Resetting to clean CSS values and cross-browser, re-sizable fonts
If you include two of the CSS stylesheets so kindly provided by the
The IE conditional comment
I'm hoping this next one will begin to go away with the death of IE 6:
"Internet Explorer 6 is messing up my layout, what can I do?"
... While building countless extra billing hours into IE over the years, and causing premature baldness among website themers (due to tearing out of hair) ... that is, making a browser with its own, very non-standard ideas about the box model, font sizes, and so on ... the IE team did a really smart thing! You can tell any version of IE from 5 onwards to either pay attention to code that no other browsers can see OR ignore code that all other browsers will see and execute.
IE from version 5 onwards will look inside standard HTML comment tags: <!-- comment here --> for a couple of its own special codes. If it finds them it will act upon them while all other browsers will ignore the contents of the comment.
Here are the ones I find most useful:
<!--[if IE]-->
internet explorer will execute this code
<!--[endif]-->
<!--[if IE 6]-->
internet explorer 6 will execute this code
<!--[endif]-->
<!--[if IE 7]-->
internet explorer 7 will execute this code
<!--[endif]-->
This will work with any specific version of IE from 5 onwards (5.5 and other decimals also allowed)
lt = less than operator
<!--[if lt IE 7]-->
internet explorer lower than version 7 will execute this code
<!--[endif]-->
gt = greater than operator
<!--[if gt IE 5.5]-->
internet explorer 6 or higher will execute this code-->
<!--[endif]-->
There are also the gte (greater than or equal to) and the lte (less than or equal to) operators available.
The other very interesting operator to me is the NOT operator: !
<!--[if !IE]>-->
internet explorer will ignore this code
<!--<[endif]-->
This discussion on Drupal.org also discusses this issue: http://drupal.org/node/134569
In the end, my Drupal template header looks something like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "
<?php print $base_path.$directory;?>/reset.css";</style>
<?php print $base_path.$directory;?>/fonts.css";</style>
<?php print $styles ?>
<!--[if IE 7]>
<style type="text/css" media="all">@import "<?php print base_path.$directory;?>/ie-7.css";</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css" media="all">@import "<?php print $base_path.$directory;?>/ie-6.css";</style>
<![endif]-->
<?php print $scripts ?>
<?php print $head ?>
<title><?php print $head_title ?></title>
</head>
Comments
Post new comment