How to display panel (div) only in Internet Explorer (IE)

If you view this blog in Internet Explorer(IE), you’ll a small yellow panel in the top of this blog but you can’t see that block if you open this blog in other browsers. And, a lot of people has asked me how can we do that, today I would like to share that tips with you guys. This IE specific comments will be easy for you to cope with the wired CSS bugs found in IE as well.

To display panel (div) only in Internet Explorer (IE)

<!--[if IE]>
<div> Only displayed only in IE .</div>
<![endif]-->

To display panel in non-IE browsers only

<![if !IE]>
<div>Only displyed in non IE browsers like FF, Safari etc.</div>
<![endif]>

To display panel in IE 6 only

<!--[if IE 6]>
<div>Only displyed in non IE 6.</div>
<![endif]-->

To display div in other IE versions except IE 5 (won’t be dislayed in NON-IE browsers)

<!--[if !IE 5]>
<div>
It will be displayed in other version of IE except IE 5.
It will not be displayed in non IE browsers.
</div>
<![endif]-->

To display div in other IE versions except IE 6 (will be displayed in NON-IE browsers as well)

<![if !IE 5]>
<div>
It will be displayed in other version of IE except IE 5.
It will be displayed in non IE browsers.
</div>
<![endif]>

To display panel in greater version of IE 6 i.e. on IE 7 , IE 8 etc.

<!--[if gt IE 6]>
<div>Displayed in greater version of IE 6 i.e on IE 7 or IE 8 etc.</div>
<![endif]-->

To display div in IE 6 and greater version of IE only

<!--[if gte IE 6]>
<div>It will be displayed in IE6 and other greater version of IE.</div>
<![endif]---->

To display div in IE 7 and previous version of IE 7.

<!--[if lte IE 7]>
<div>
Displayed in IE 7 and lesser version of IE on IE 6 , IE 5 etc.
</div>
<![endif]-->

Now, let me explain some specific terms you’ve seen out there in the conditions,

lt – less than
lte – less than or equal to
gt – greter than
gte – greater than or equal to

13 thoughts on “How to display panel (div) only in Internet Explorer (IE)

  1. i tried to do this in css but failed and luckily i got yours 😀

  2. It seems you left out some important information. In the closing tags of each of the above examples, you are missing dashes.

    For example, you have in the first box:

    Only displayed only in IE .

    Yet, the ending comment needs to be written:

    Note the two dashes after the last bracket?

    Just thought I’d help, in case others can’t figure out why the code won’t work for them.

  3. ooppss, darn blog software . . .

    Your example shows:

    When it should be:

    Note the TWO dashes, instead of the solo one you have.

  4. Sorry guys. I’ve fixed it..it was the damn syntax highlighter which was creating problem ..

    Thanks for the heads up…

  5. Thankx PM.Guys I am one of them to ask for this tutorial.hehe.I’ve been waiting since last week.I didn’t realize it would be so easy.I will try it and hope it works fine.And one thing aren’t 1st n 2nd comment spams or pingbacks.I see these kind of comments in ur other articles also.They are so annoying.Why don’t u filter them if they are spams?

    I heard google are stopping “Referral” programs from adsens.If its true then it would be no use for me.hehe

    Anyway thankx a lot.

  6. Thanks sujit…I’ll surely going to filter span comments and pingbacks in future posts…

  7. strange: the code didn’t work when I copied it from this blog entry but it did work when I viewed the source of this page and pasted it from there into my code. anyway, thanks again roshan!

  8. yes previously it had some problem with the syntax highlighter now it is fixed, if you copy and paste the directly it works now ..

  9. Thank you for this. These work great. I just used them. Thank you.

  10. great stuff i keep work hard

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>