CSS reset and Fonts + CSS and Internet Explorer

Posted 3 April, 2008 - 13:34 by jam

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 Yahoo YUI project: the reset CSS and fonts CSS, you will have a clean slate to execute your design wishes. The YUI site has good documentation, and you need to read it to be in control of font sizes well in your layout work. NB - These two stylesheets need to be the first two in your HTML/php template header!

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:  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:

internet explorer will execute this code


internet explorer 6 will execute this code


internet explorer 7 will execute this code

This will work with any specific version of IE from 5 onwards (5.5 and other decimals also allowed)

lt = less than operator

internet explorer lower than version 7 will execute this code

gt = greater than operator

internet explorer 6 or higher will execute this code-->

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: !

internet explorer will ignore this code

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 ?>
  
  
  <?php print $scripts ?>
  <?php print $head ?>
   <title><?php print $head_title ?></title>
</head>