How to apply min-height in IE and other browsers

  • I am trying to understand the idea behind the min-height attribute in CSS. It works fantastic in FF, but in IE it falls to pieces (if only this was late breaking, shocking news and not general repetition!).

    I’m trying to find a simple solution to this and read up on mezzonlue’s site something about padding – it all seems a bit confusing to me though, and I really want to understand it as well as apply it.

    Here’s the code I have:

    #insideWrapper {
    background: #994466 url(‘images/bgcontent.jpg’) repeat left;
    position: relative;
    top: 5px;
    width: 510px;
    margin: auto;
    margin-bottom: 5px;
    border: 0px solid #666;
    background-color: #99FF66;
    text-align: justify;
    min-height: 600px;
    }

    So how do I get it to work with IE and others, without going through a padding circus?

    Thanks in advance

    The site: https://sekhu.net/wp/

Viewing 6 replies - 1 through 6 (of 6 total)

  • Min-Height is supported by Mozilla, Firefox, Netscape 6+ and Opera only. No IE, no Safari, no Konquerer. IE supports it for table elements like td, tr and th, though – or at least it claims so.

    A common trick is to set height for IE only using:

    <!–[if gte IE 5.5]>
    <style type=”text/css”>
    <!–
    #insideWrapper{height:600px;}
    –>
    </style>
    <![endif]–>

    IE will expand if neccessary, so this should have the same effect than min-height.

    Thread Starter jinsan

    (@jinsan)

    thanks Gerd.

    Well I did try it and it did work, however it forced the footer to change colour matching that of the side borders for the insidewrapper, so I guess I should copy the whole of the styling?

    <!–[if get IE 5.5]>
    <style type=”text/css”>
    <!–
    #insideWrapper{height:600px;}
    –>
    </style>
    <![endif]–>

    I added that after the first code at the top

    The footer should be green not white, so I removed the code…

    Thanks in advance

    Oh, you should add this piece of code after the original style tag, like this:

    <style type=”text/css” media=”screen”>
    @import url([Your Path]/style.css );
    </style>

    <!–[if gte IE 5.5]>
    … And here is the IE patch …
    <![endif]–>

    Forgot to mention this, excuse.

    And note the sytax is [if gte IE 5.5], not [if get IE 5.5]. gte means “greater or equal” :).

    I don’t like conditional statement so I use another (very common) trick:
    #insideWrapper {
    min-height: 500px;
    height: auto !important;
    height: 500px;
    }
    Explorer doesna€?t understand !important and will apply the 500px height as min-height. Other browsers understand !important (including IE/Mac which also understands min-height) and will apply auto height instead.

    Ciao

    Thread Starter jinsan

    (@jinsan)

    thank you both very much for you assistance, they both do the trick and I’ve achieved the effect.

    Cheers again

    There’s a ton of info here on browser bugs and workarounds.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to apply min-height in IE and other browsers’ is closed to new replies.