+ Reply to Thread
Results 1 to 4 of 4

Thread: min-height in ie6

  1. #1
    sudhakararaog is offline Regular Babbler sudhakararaog has no reputation at Website Babble yet.
    Join Date
    Feb 2009
    Posts
    95

    Default min-height in ie6

    in my layout i need to use min-height and i noticed that ie6 does not support ie6, so for all browsers i have

    #contentouter{
    float: left;
    width: 915px;
    min-height: 500px;
    height: auto;
    }

    for ie6

    * html #contentouter{
    height: 500px;
    overflow: visible;
    }

    by using min-height in all browsers the contentouter div always has a minimum height of 500px and whenever content exceeds 500px the contentouter div grows automatically in all browsers and also in ie6

    is this the right way to use min-height in all browsers and in ie6 with the above code i have used

    please advice.

    thanks

  2. #2
    meloncholy's Avatar
    meloncholy is offline Master Babbler meloncholy has an outstanding reputation at WB (over 500 points) meloncholy has an outstanding reputation at WB (over 500 points) meloncholy has an outstanding reputation at WB (over 500 points) meloncholy has an outstanding reputation at WB (over 500 points) meloncholy has an outstanding reputation at WB (over 500 points) meloncholy has an outstanding reputation at WB (over 500 points)
    Join Date
    May 2009
    Site
    www.poleexercise.co.uk
    Posts
    310

    Default

    In the past I've pretty much ignored IE6 in this case - if the frame was too short and cut off half of the background picture (or whatever), that's tough basically. Of course it depends on which is more important / more likely for your site: having a frame that's larger than 500px high or one that's shorter. What you've got is fine for the latter, and ignoring IE6 takes care of the former.

    Alternatively you can hack it by taking advantage of IE6's expanding box bug.

    We introduce an element that takes up 500px vertically, but then move the following element 500px up the screen, effectively hiding it. Modern browsers will render it 0px high, but IE6 expands the surrounding element to enclose it.

    HTML Code:
        .outer { background-color: #f00; min-height: 500px; }
        
        .inner { height: 500px; margin-bottom: -500px; }
    HTML Code:
    <div class="outer">
    	<div class="inner"></div>
    Put the content you want here.  This can be short (under 500px) or long.
    </div>
    So we have, with the help of an extra div, proper min-height behaviour from IE6.

    Note: I've only tried this in IE8 in IE6 mode as I don't have access to IE6 right now. But it should work.
    Pole Exercise - Pole dancing evolved
    meloncholy - A state of mind brought about by eating too much soft fruit

  3. #3
    meloncholy's Avatar
    meloncholy is offline Master Babbler meloncholy has an outstanding reputation at WB (over 500 points) meloncholy has an outstanding reputation at WB (over 500 points) meloncholy has an outstanding reputation at WB (over 500 points) meloncholy has an outstanding reputation at WB (over 500 points) meloncholy has an outstanding reputation at WB (over 500 points) meloncholy has an outstanding reputation at WB (over 500 points)
    Join Date
    May 2009
    Site
    www.poleexercise.co.uk
    Posts
    310

    Default

    Having googled this, there are worse, better and just different ways to do this. I'd probably go with Dustin Diaz's or Stu Nicholls' solutions.
    Pole Exercise - Pole dancing evolved
    meloncholy - A state of mind brought about by eating too much soft fruit

  4. #4
    sudhakararaog is offline Regular Babbler sudhakararaog has no reputation at Website Babble yet.
    Join Date
    Feb 2009
    Posts
    95

    Default

    thanks for letting me know.

+ Reply to Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts