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:
<!–[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!
I seriously, seriously, SERIOUSLY hate it when the need of using such hacks arises. Why on earth can’t we have a universal browser!
!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!
Hina: Yep! A universal browser
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!