The Social Geek A never ending story of a never stopping idiot!

Cross Browser Design Tip: Use Internet Explorer Conditional Comments

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:

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:

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