Tuesday, April 17, 2007

CSS Conditional Comment

Having headaches over your web designs because they don't look the same across the browsers, especially Firefox and Internet Explorer? Here's one of the available solutions out there that can help solve the problem.

We always use comment in CSS files, right? That comment tag can actually act as a conditional tag for styling, but only for Interner Explorer.

Usage


<!--[if IE]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer
<![endif]-->
<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6
<![endif]-->

Replace the 6 with the version of IE you want, and put your special styling instruction for people using specific version of Internet Explorer.

Below are the list of comments that you can use as conditional comment



Note: gt = greater than, gte = greater than or equal, lt = less than, lte = less than or equal