Question

I need a concrete if statement that will work in an .aspx file (default.aspx) that I am building, the file itself serves as my homepage. I have not moved onto further pages. I currently catering for IE8 + 7, FireFox and Chrome.

I seem to be noticing issues in layouts even though in my markup I have this:

<!-- <link rel="stylesheet" type="text/css" href="css/homepageStyes.css" /> -->

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

Whenever I comment out either line of code, my layout problems go away but at the moment I reckon the mark up posted above is not concrete enough in telling a browser which style sheet it is to attach?

I need something along the lines of but in XHTML mark up ofc:

if (browser == "ie" || browser != "ie6") // not supporting ie6
{
   // attach this style sheet:
   // <link rel="stylesheet" type="text/css" href="css/ie.css" /> 
}
else
{
   // attach this style sheet:
   // <link rel="stylesheet" type="text/css" href="css/homepageStyes.css" />
}

I’m a C# developer so this is my first time building a website from scratch. So the C# if statement above was a good way of explaining what I need.

Answer 1

Use these conditional comments:

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

The <!--[if gt IE 6]> comment ensures only IEs newer than version 6 will process and link to ie.css.

The <!--[if !IE]> tells IE to ignore what’s in that conditional comment. The <!--> that directly follows is to terminate the if !IE component while maintaining a valid document. Anything past that will be read by other browsers and parsed, so homepageStyles.css will be linked to.

The second <!--> opens a comment so that IE can safely read the <![endif]--> that directly follows.