On this page

Targeting specific CSS style rules at different browsers

The need

The support for CSS varies from browser to browser. Some browsers do not support some properties or values; in such cases the unknowns should be ignored and not acted on. Most browsers respect this, unfortunately Microsoft Internet Explorer (MSIE or IE) often fails to do so and responds incorrectly. With other browsers, although some differences do occur they are almost always within the range permitted by the specification so there is nothing to be done.

The opportunity

In order for a web author to be able to cater for differences between browsers there must be some mechanism for determining which browser is in use. Various methods are available using scripts, but they are complex and the methods that browsers use to declare their identity are far from unambiguous. Also the use of scripts will fail when scripting is switched off.

Fortunately the problem is greatly simplified by the fact that Microsoft provide a proprietary method (described in ) for determining which version of their browser is in use and the code required for this can be contained in an html comment which other browsers correctly ignore but MSIE probing inside the comment detects!

Overview

The overall approach to this design is to create a normal stylesheet which works correctly with standards compliant browsers and then load an additional stylesheet which adds or alters rules as required for a version of MSIE. If different versions of MSIE require different rules then several additional stylesheets may be employed.

This approach relies on the simple fact that style rules are read in the order encountered in stylesheets and any rule encountered later will override an earlier rule if it conflicts with it.

One corollary to this is that since inline styles are always read last it is not possible to override them using another stylesheet. Avoid inline styles to obviate this issue.

The mechanics

Syntax of IF expression

IE  6 — IE version 6
lt  6 — Version lower than 6
gt  6 — Version greater than 6
lte 6 — Version lower than or equal to 6
gte 6 — Version greater than or equal to 6

The version can be 5, 5.5, 6, 7 or 8

This may be achieved by

  • burying a stylesheet specific to MSIE in a Microsoft proprietary IF expression
  • inserting these into a HTML comment which standards compliant browsers ignore
  • inserting the resulting code into the head of the page after any other stylesheets.

The stylesheet involved may be externally linked using code like that in sample 1 or imported as per sample 2, effectively becoming an internal stylesheet. Both methods is equally applicable.

Note: The line breaks shown in the samples are optional and may be omitted BUT make sure that no spurious characters, including spaces, appear in the code instead of line breaks.

This code contains a perfectly normal link to the stylesheet msie6.css but this is contained in an IF statement. This statement will be read and interpreted by MSIE only. The whole of this is contained in a HTML comment of which other browsers will ignore the content and carry on as if it didn't exist.

Thus a special stylesheet may be targeted at MSIE.

The process is completely reliable in that the IF expressions are Microsoft proprietary and will be respected by their browsers versions 5.0 to 7. Version 8 may well use a different mechanism but the company will be committed to maintaining the integrity of files on earlier versions. It is also reliable in that being buried in a HTML comment the proprietary code will be ignored by standards compliant browsers.

Scope of fixes

The method can of course only be effective where change to a CSS file is capable of correcting or alleviating a problem. There are thousands of defects in early versions of IE along with many published fixes. You should not attempt any any fix unless your page is actually experiencing a problem. If you need advice Craig Buckler [Ref 2] and Bruce Lawson [Ref 3] have written useful articles but you should double check any fixes you use. If you want support for fixed positioning consider using ie7 script.

Using ie7 script

An alternative approach to correcting IE defects is to use Dean Edwards script as described in another Lab Note [Ref 4]. Which approach is more appropriate depends in the situation and, if necessary, both script and targeted stylesheet may be used. An advantage of the script is that it can fix problems impossible with as stylesheet, but it may leave problems that still need a stylesheet. A small disadvantage is that it requires scripts to be enabled.

It is important to realise that, irrespective of where it is located in the code for the page, the script will run after the page is loaded. It is therefore possible to apply limited corrections using a stylesheet, e.g. changing a fixed position element to relative position, so as to gain an advantage if scripts are disabled, but still have the fixed position corrected by the script when scripts are enabled.