how to give two heights to DIV (one for IE and second for other browsers)

In a CSS file, is there a way to give a specific height for开发者_运维问答 a DIV that only applies to Internet Explorer ONLY, and at the same time, give that same DIV another height that applies to all browsers except for Internet Explorer?

You can create an IE-specific stylesheet and use IE Conditional statements.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->

This way, you basically have two stylesheets; one for IE and other for rest of the standard-compliant browsers.

Hacks could have been used such as:

_height:500px;
*height:500px;

But that is not recommended.

See Also:

• How To Create an IE-Only Stylesheet

I have used the following and it worked in IE8. Put the following code within tag.

You can watch the online version from here, http://nazmulweb.com/site5/demo/iecss/

    <style type="text/css">
    #tgtDiv
    {
        height: 300px;
        width: 400px;
        border: 1px solid green;
    }
    </style>

     <!--[if IE]> 
         <style type="text/css">

     #tgtDiv
    {
        height: 300px;
        width: 400px;
        border: 5px solid red;
    }
    </style>
    <![endif]-->

try this

<style>
    #mydiv { height:800px; }
</style>
<!--[if IE]>
<style>
    #mydiv { height:500px; }
</style>
<![endif]-->

Create 2 css files, one for IE and one for the other browsers

Load the css file according to the browser like described here