Browser specific css, IE conditional comments.

You should always first write the code for standard compliant browsers, such as Firefox, Safari, Opera and then correct it for IE7 and IE6.  There are two most four ways of writing IE specific CSS.

1. My favorite star and underscore hack:

#specificId

{

     *property:value; /* applies to IE7 and IE6 */

     _property:value; /* applies only to IE6 */

}

 

2. 7* hack:

 

/*

  Only versions 5.5 and higher will

  apply these rules, 5.0 will not.

*/

html*#specificId

{

  property:value;

}

 

3. Only IE understands css expressions:

 

#specificId

{

   property:value; /* First apply css style to all browsers */

   property:expression(value)/* IE specific css */

}

 

4.  IE conditional comments:

 

<!--[if IE]>

  <style type="text/css"> 

    @import 'iestyle.css'; 

  </style> 

<![endif]-->

 

<!--[if IE 6]>

According to the conditional comment this is Internet Explorer 5<br />

<![endif]-->

 

<!--[if gte IE 5]>

According to the conditional comment this is Internet Explorer 5 and up<br />

<![endif]-->

 

<!--[if lt IE 6]>

According to the conditional comment this is Internet Explorer lower than 6<br />

<![endif]-->

 

Where special commands:

gt: greater than
gte: greater than or equal to
lt: less than
lte: less than or equal


Posted on Sunday, July 27, 2008 by | Comments (1) | Add Comment

Comments

Gravatar

Re: Browser specific css, IE conditional comments.

Great blog. Also I get perfect for all version IE8 and IE9 from http://www.betterinfo.in/ie-specific-css/

Posted on 8/20/2012 5:42:49 AM by Hp #

New Comment

Your Name:
Email (for internal use only):
Comment:
 
Code above:

Categories

Recent Tweets

  • Simon Ince's Blog: Hierarchies with HierarchyID in SQL 2008 http://t.co/xSDwiF6rRS.
  • Visual Studio 2010 WAS painfully slow - CodeProject http://t.co/Usba1x6CZy

Valid HTML5