CSS Code

Tweak CSS styles for IE only

So right now I'm debugging a site I developed that looks fine in all browsers except IE. When run in Explorer, the main heading was shifted down about 20 pixels from where it should be. So i'm doing some digging on how to modify the CSS for IE only and leave the others intact, and I stumbled across IE conditional statements. Basically, these are HTML comments with an 'if' in them, and only IE (5 and above) recognizes and processes them. (Ahh leave it to M$ to overstep the HTML boundaries).

The they look like this:


<!--&#91;if "condition" IE "version number"&#93;> 
  <p>Only display in IE if the condition is met</p>
<!&#91;endif&#93;-->

There are 6 conditions that can be applied (there's a "logical not" case too):

1. [if IE] – if above or equal to version 5
2. [if IE 6] – if equal to version 6
3. [if lt IE 6] – if less than version 6
4. [if lte IE 6] – if less than or equal to version 6
5. [if gt IE 6] – if greater than version 6
6. [if gte IE 6] – if greater than or equal to version 6

Valid version numbers are 5, 5.5, 6, and 7. There is alco support for specific version numbers, such as 5.0453.

So here's where it comes in handy; you can add styles and stylesheets for IE only, like so:


<!--&#91;if gte IE 5&#93;> 
   <style type="text/css">@import "IE_only.css";</style> 
<!&#91;endif&#93;-->
Share

1 Comments

  1. Your code is wrong: the conditional statement should have two dashes (hyphens) at the start and end, not one, thus:

    Only display in IE if the condition is met

    It doesn't work the way you have it written.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image