The Social Geek

A never ending story of a never stopping idiot!

Cross Browser Design Tip: Use Internet Explorer Conditional Comments

January24

There are some things which you really want to remember all your time while designing web pages that look the same in Internet Explorer and other browsers. Such experiences come in handy when you need them the next time.

One of such things is the Internet Explorer’s conditional comments. IE’s conditional comments allow you to insert markup within your code that is rendered in IE but NOT in other browsers. How? This is simple:

<!–[if IE 6]>

Your IE specific stuff here

<![endif]–>

Now, the above chunk gets past the eye of all the other browsers since they act as simple HTML comments in those browsers. Internet Explorer identifies that special [if IE 6] thing and renders the comment block as if it was normal markup.

This also works with other version of IE. You just have to use the appropriate IE version number (it works from IE 5.0 and onwards) such as IE 5.0, 5.5 and 6.0.

IkJample:

Suppose there is a DIV in your code that renders just fine in Firefox but it is appearing to be about 5 pixels above where it should be in IE. You can do the following to get it right easily using style sheets and IE conditional comments:

<style type=”text/css”>

.myDiv {

     padding-top: 10px;

}

</style>

<!–[if IE 6]>

<style type=”text/css”>

.myDiv {

     /* Now we add an additional 5 pixels just to */

     /* make sure it also looks fine in IE */

     padding-top: 15px;

}

</style>

<![endif]–>

Hope this is useful to me and to some other readers in the future :) Cya!

2 Comments to

“Cross Browser Design Tip: Use Internet Explorer Conditional Comments”

  1. On January 27th, 2008 at 10:42 pm Hina Says:

    I seriously, seriously, SERIOUSLY hate it when the need of using such hacks arises. Why on earth can’t we have a universal browser! :P !important hack in CSS always makes my life a little easier but I’ll be sure to check out this post if !important fails me!

  2. On January 28th, 2008 at 2:51 am Kamran Says:

    Hina: Yep! A universal browser :D and I share your hatred when it comes to using “hacks” - boy this word just sounds bad!

    Hope we have all the Acid tests passed by all the browsers completely which would make our lives easier!

Email will not be published

Website example

Your Comment: