Using Conditional Statement within Code

programming web dev
1

Is this the correct syntax? I can’t get my browsers to recognize the conditional:


div#content.splashtext h2 {
    color: #ffffff;
    font-size: 22px;
    /* IE6 Only: */
    <!--[if IE 6]>
    margin-right: 200px;
    margin-left: 320px;
    <![endif]-->
}
2

have you tried other variants?

I don’t really use this method, but here, this looks useful:

http://www.quirksmode.org/css/condcom.html

3

I’ve seen that page, yes. I’m wondering if there is an issue with placing the conditional within CSS code, or if it’s only used within HTML code or to link to external stylesheets.

4

Bingo! That would make sense me thinks!

5

No, the conditional statement ‘<!–[if IE 6]> … etc’ is not valid css and won’t be rendered. The conditions are made to load separate css files.

However, you don’t need to fret about making two complete ones. Make a base and then add the things that don’t work to the ie6 one as;

begin ie6.css


@charset "UTF-8";
#yadayada li {
margin-top:none !important;
}

And just keep it to that. That way there’s little need to maintain two complete stylesheets… just a base one and then the ie hacks ; )

6

Yea, and alternatively, if you want to keep everything in one stylesheet, you can bypass the entire conditional thing and use * html


div#content.splashtext h2 {
    color: #ffffff;
    font-size: 22px;
}

* html div#content.splashtext h2 {
    margin-right: 200px;
    margin-left: 320px;
}
7

slight nitpicking: conditional comments are not only for linking to external style sheet, you can also put a few CSS declarations in there. But yes, it’s meant to be in the HTML header, not in the CSS

8

Reason it works that way is because IE’s conditionals are in HTML comments that are incorrect syntax for a CSS parser so just returns an error (browser ignores it). It’s always easier to just have an external stylesheet, and most of the time there’s more than one fix needed