How do I set the minimum height for a div in IE7?

Question

I need to set the minimum height of a div. In Firefox everything is good, but I'm having trouble with IE7 - an unintended big space.

ul, il {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

    .p_block{   
        color: #336699;
        font-size: 14px;
        min-height: 18px;
    }

<ul>
    <li><a href="#"><div class="p_block">text</div></a></li>
    <li><a href="#"><div class="p_block">text</div></a></li>
    <li><a href="#"><div class="p_block">text</div></a></li>
    <li><a href="#"><div class="p_block">text</div></a></li>
</ul>

Strangely, if I delete padding: 0px; from ul, li, everything works fine. Why?

Answer 1

@Chinmayee, the problem with that solution is that the element's height will not be able to grow past 18px in firefox and a few others.

A good cross-browser solution to min-height:

{
height: auto !important;
height: 200px;
min-height: 200px;
}

Basically;
Line #1: most modern browsers understand !important, therefore will not overwrite the property in the next line.

Line #2: because older browsers do not know !important, it must be a set height. Older browsers will allow the element to grow unless there is an overflow: property set.

Line #3: Modern browsers understand min- and !important. So modern browsers understand height:auto and min-height:200px, while older browsers understand height:200px; but will allow the element to grow ;)

Answer 2

Here's a solution that I prefer:

.p_block{   
        color: #336699;
        font-size: 14px;
        min-height: 18px;
}

Then for IE use this:

.p_block{   
        height: 18px;
}

IE treats height as min-height so it will grow.

You can target IE by including a specific IE6 & 7 CSS file as shown below (goes in the < head >)

<!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="css/ie6-hacks.css" />
        <script type="text/javascript">
            // IE6 Background Hover Flicker Fix
            try {
                document.execCommand('BackgroundImageCache',false,true);
                }catch(ignoreme){
            }
        </script>
    <![endif]-->
    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie7-hacks.css" />
    <![endif]-->

Answer 3

Miss out the auto height and the important and add * before the height.

This will then only be applied to IE7 and below.

.p_block{  
    min-height: 30px; 
    *height: 30px; 
}

It's what I used, IE7 won't use min-height but will set the height to 30px and will go bigger if required.

Answer 4

use this CSS for IE & FF

  .p_block{   
        color: #336699;
        font-size: 14px;
        min-height: 18px;
        height:18px !important;
    }