nurazri.com

Well everybody knows that Internet Explorer is not a css friendly and one of the must not used web browser but still people use it. Yes, we cannot do anything as we cannot control that and worst of all, some of the css work incorrectly with internet explorer and need a specific code to make it look nice in IE. A nightmare to web designers out there including me. But I found the solution and wanna share it with all of you. In this article I will teach you how to do conditional comment for internet explorer.

Okay, first off all you must know that conditional comment only works for Internet Explorer on Windows OS. This are supported from Internet Explorer 5 and above.

Conditional comment works as below

1
2
3

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

The following explain the above comment:

1. Their basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers different from IE will see them as normal comments and will ignore them entirely.
2. Explorer Windows, though, has been programmed to recognize the special <!–[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
3. Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. I’d have preferred to put the special styles in the CSS file, but that’s impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

Well now the basic are explained so lets try and example

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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

Okay let me explain the syntax that look weird

gt = greater than
lt = lower than
*e = equal to
*well if you add e after gt or lt you will get the combination

Conclusion

Well let me explain about the above article. Conditional comment is yes indeed a CSS hack as they can give a special instruction to a certain browser but one thing is conditional comment only works on Internet Explorer. Or maybe I am wrong about this so correct me if I do something wrong. Conditional comment are safe to use and please use it correctly.  In my website I do use conditional comment but not always or maybe not everytime. There are some part I will first try to find a way to make it work on cross browser before I make a decision to use conditional comment. Well if you need help do not hesitate to leave a comment and I will try my best to help.

What To Do Next? Well start by having a drink on us and share this article.