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

Question

in a CSS file, is there a way to give a specific height for a DIV that only applies on IE ONLY, and at the same time, give that same DIV another height that applies to all browsers except for IE ? thank you so much in advance ...

Answer 1

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

Load the css file according to the browser like described here

Answer 2

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

Answer 3

try this

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

Answer 4

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]-->