Is conditional comments the way to go really? And how does it work?

Question

This previous Q about a div positioning problem in IE gave several answers where they told me to use conditional commenting.

http://stackoverflow.com/questions/2803199/how-come-this-relative-positioned-div-is-displayed-differently-in-ie

How does it work, I mean how do I implement conditional comments?

Ex:

   <div class="normal"></div>
   <!--[if IE 6]>
   <div class="IE6"></div>
   <![endif]-->

IF it is explorer 6, will this then override the first div with class="normal"? Because if it wont, then there will be two divs in explorer 6 right...

What could possibly be the problem of this positioning?

I have even tried creating a new html document with a hello world text, and put it inside a div with relative pos, and in IE it behaves differently, about 3px further down than in other browsers...

Thanks

Answer 1

This is normally used to load an extra bit of CSS that "fixes" various issues due to IE6 bugs/lack of features.

eg. the top of our site looks a bit like this...

<link rel="STYLESHEET" type="text/css" href="/css/common.css" />
<!--[if IE 6]>
    <link rel="STYLESHEET" type="text/css" href="/css/ie.css">
<![endif]-->

This loads our normal stylesheet first. Next IE6 (only IE6) loads the second stylesheet, which override a couple of definitions that cause problems for IE.

If you need different content, you could include both sets of content (normal content and IE content) and have the IE content hidden by default via your standard CSS (display:none), and simply overide this in the IE6 css stylesheet.

Answer 2

No, it isn't the way to go really.

They're non-standard, they're proprietary, they set a bad example, and they're absolutely unnecessary.

whatever {
    foo: bar !important; /* for non-IE6 */
    foo: baz; /* for IE6 */
}

child { /* for IE6 */ }
parent > child { /* for non-IE6 */ }