• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Internet
    • Browsers
    • Cloud Computing
    • Online Video
    • Search Engines
    • Web 2.0
  • Mobile
    • Android Apps
    • Apps
  • Software
  • Funny Stuff
  • Social Networks
  • Web Tools

Daily Bits

  • Home
  • About
  • Archives
  • Contact
  • Advertise

Conditional Comments for Internet Explorer

November 13, 2007 by Jonathan 14 Comments

If you have been writing code for web sites for some time, you will have noticed that Internet Explorer is notoriously strange in its rendering behavior. If you write valid, clean code, your site will likely look nearly identical in the latest versions of Firefox, Safari, Netscape Navigator, Opera, and Camino, but when you pull it up in IE, suddenly your layout is askew.

The old model was to use JavaScript or another scripting language to determine the user’s browser, and deliver content/styles appropriately. However, there has been another solution in place since IE5, which is some simple proprietary Microsoft tags called Conditional Comments.

Here is a simple example:

1 <!--[if IE]>
2 CONTENT/STYLING THAT IS SPECIFIC TO INTERNET EXPLORER
3 <![endif]-->

And here is how it works.

Because Conditional Comments start off with a “<!–” (line 1) and end with a “–>” (line 3), non-IE browsers simply ignore what is inside the tags, which means that your HTML will still validate without error. Only versions of IE5+ have the ability to parse what is inside the comment tags.

In addition to the simple “Is this IE?” check, you have a variety of options to better narrow your filtering. You can specify:

  • a specific version of IE (<!–[if IE7]> or <!–[if IE5.5]>)
  • only versions of IE prior to or after a specific version (<!–[if
    lt IE7]> or <!–[if gt IE5]>)
  • and more complicated expressions utilizing the standard IF
    expression tools (AND, OR, NOT, etc.)

What about IF…ELSE statements?

If you want to set up an IF…ELSE situation, the official Conditional
Comments documentation offers this solution:

1 <!--[if IE]>
2 CONTENT/STYLING THAT IS SPECIFIC TO INTERNET EXPLORER
3 <![endif]-->
4 <!--[if !IE]><!-->
5 CONTENT/STYING THAT IS SPECIFIC TO NON-INTERNET EXPLORER BROWSERS
6 <!--<![endif]-->

The extra “<!–>” in line 4 and “<!–” in line 6 hides the IE-specific tags from non-IE browsers, but allows the coding inside to be parsed by the browser. If you load the page in IE, the “!IE” conditional will cause it to skip over the entire expression, and so IE will not parse what is inside. Most importantly, because the IE-specific tags are commented out, your site will still pass W3C validation. Although this is a slightly complicated bit of coding, it does provide a solid workaround for IF…ELSE statements.

So what are the drawbacks?

The main drawback is that Conditional Comments can only be used in HTML, not in an external CSS file. However, there are many ways to still use Conditional Comments to your benefit. For example, you could easily set up a supplemental CSS file for Internet Explorer and then use Conditional Comments to call up that CSS file:


<link href="stylesheets/styles.css" media="screen" rel="stylesheet"
type="text/css" />
<!--[if IE]>
<link href="stylesheets/ie.css" media="screen" rel="stylesheet"
type="text/css" />
<![endif]-->

Overall, Conditional Comments represent a simple alternative to other browser-sniffing methods when all you want to do is identify IE, especially if you are just trying to put an IE CSS/HTML workaround in place.

To read the full, official documentation about Conditional Comments,
check out Microsoft’s site.

Filed Under: General

Reader Interactions

Comments

  1. john rufener says

    February 15, 2009 at 12:30 am

    It is starting to look bad for little haliegh, I,m praying that she is alright, the remarks as to her age has nothing to do with events. you have persons that like to make some thing out of nothing. I always look for some thing good in a person. God bless Haliegh and look over her.

  2. john rufener says

    February 16, 2009 at 11:41 pm

    I get sick and tired of bringing up bill clinton all time, you need to look at his past events or have you for gotten it already, he is a want to be.

  3. john rufener says

    February 16, 2009 at 11:45 pm

    I am getting sick and tired of seeing bill clinton name coming up all the time, Just look at his past events. or have forgotting it already.

  4. john rufener says

    February 19, 2009 at 1:44 pm

    There is thing odd about this Haleigh Cummings case, number one the mother does,nt seem like she is concerned about the little girls missing, says she left before, I think the mother knows some thing about her disapperace. I,m praying for Haleigh that she is safe.

  5. john rufener says

    March 26, 2009 at 1:25 am

    Things are looking bad for our USA.

  6. john Rufener says

    May 19, 2009 at 11:33 am

    About bill clinton.s fee for speaking, in the past let check his vearcity.

  7. john rufener says

    July 10, 2009 at 5:48 pm

    As for Nancy Pelosi. she,s like the rest of our people in the white house, they are thinking of their self. she needs to back where she came from.

  8. john RUFENER says

    August 3, 2009 at 11:11 pm

    M. Jackson mother will never see them kids grown up.

  9. john rufener says

    August 29, 2009 at 8:44 pm

    AS for Garrid, his place is in the ground, they need to hang him by his balls.

  10. john rufener says

    September 10, 2009 at 4:58 pm

    I sure think they could of got some better trhen Ellen Degeners for the American Idol,s With her on the show I,ll not watch it any more.

  11. john rufener says

    September 11, 2009 at 11:34 pm

    La Toya you must be smokeing crack, to say he is like god, #1 god is not pedhilla like your brother was, he was a sicko person. all have to say god have mercy on his soul.

  12. john rufener says

    September 27, 2009 at 7:02 pm

    Biil Clinton will not say anything against his wife, as for their vearcity, there is alot to be desired. just look at their past record.

Trackbacks

  1. PNG Alpha Transparency in Internet Explorer says:
    November 21, 2007 at 12:13 pm

    […] it will no longer validate properly. The solution? Conditional Comments. As I explained in a previous post, you can use another piece of proprietary IE functionality to hide the offending, IE-specific […]

  2. Duwir's Formmailer says:
    May 5, 2008 at 9:09 pm

    Duwir’s Formmailer…

    Das E-Mail-Form kann auch z.B. in Foren verwendet werden….

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Privacy Policy

Copyright © 2021 ยท News Pro On Genesis Framework ยท WordPress ยท Log in