13

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?

1
  • You should consider changing the answer for this. Nov 14, 2014 at 4:25

4 Answers 4

44

@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 ;)

3
  • I think IE6 understands !important but not min-height so it might not work on that.
    – Muhd
    Apr 6, 2012 at 23:34
  • 2
    @muhd, yes but IE will still expand the height if more content is present.. (another bug, which in this case works in our favor) May 8, 2012 at 10:28
  • 2
    unfortunately, this breaks jQuery's ability to manipulate the height of the element with the .height() and .css("height",VALUE) functions. There's a workaround, but it took me a while to find. I'll just leave this here: hungred.com/how-to/jquery-javascript-css-important
    – tmsimont
    Jun 22, 2012 at 0:27
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]-->
1
  • upvoted for the comment 'IE treats height as min-height so it will grow.' Prof83's anser is pretty good May 30, 2012 at 12:03
2

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.

1

use this CSS for IE & FF

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.