|
|
Cross Browser Stylesheets |
If you are working on a site which uses stylesheets extensively for very fine-tuned placement on screen, you will likely have noticed that IE does not quite interpret some stylesheet properties (such as those used for placement, borders, and sizes) in exactly the same way as the rest of the browsers. This can make designing a site that looks good in all browsers very difficult and frustrating. The best solution for this is to provide two stylesheets for your site - one that works in all browsers, and one that provides minor "adjustments" to make your site work properly in Internet Explorer.
To allow you to send out a second stylesheet to correct for Internet Explorer's problems with stylesheets, a special type of tag called a "Conditional Comment" was added to Internet Explorer - other browsers will ignore this tag as a regular comment, but IE interprets them as special instructions for the browser. In this way, you can write code that still follows the XHTML specification, and works well in non-IE browsers, but also provides the small alterations needed to make IE also display your page properly.
To do this, in the head of your document, after the link tag that loads your stylesheet, you can include a the conditional comment tag to load adjustments to your stylesheet if the browser is Internet Explorer. The conditional comment to do this would look something like this:
Internet Explorer would then interpret this as meaning that it should also use the link tag inside of the conditional comment. All other browsers, including the Validator, will instead see everything from the <!-- to the --> as an XHTML comment, and will ignore it completely.
Alternatively, you can also make your patch-up stylesheets specific to one version or another of IE, by specifying a version in the if statement, like this:
Or, you can even do both at once:
The most important thing here, is to always put the most specific stylesheets (in this case, the one for IE 6) last, so that the cascading properties of stylesheets will use those files when needed.