SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    min-height of div

    Hey,
    is it possible to have a min-height value on a div?
    Afaik min-height is not supported in Internet Explorer?
    Is there another solution that works across all browesers?

    Cheers
    Frederik

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Expressions are usually used for IE6 and below and this is explained here.

    http://perishablepress.com/press/200...rnet-explorer/

    I also ran across this solution although haven't tried it but don't see why it wouldn't work.

    Code:
    #container {
      min-height:400px;
      height:auto !important;
      height:400px;
    }
    IE7 supports min-height, whereas IE6 and below treat the height value as a min-height anyway so in theory this should work.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    See the faq on min-height for a full explanation.

    IE6 and under treat height as a minimum anyway so you can use the star selector hack and give IE6 a height and better browsers get min-height.

    Code:
    .test{min-height:200px;}
    * html .test{height:200px}
    Min-height is supported in IE7, safari1.3+, Firefox and Opera (plus most other modern browers).

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    also ran across this solution although haven't tried it but don't see why it wouldn't work.
    IE7 can come unstuck with that for some quirky reason so its best to use the method I gave above. I dislike the !important hack anyway as it mixes hacks in with good code

  5. #5
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, would you consider !important to be a hack? I thought it was valid code and was a way of simply altering specificity rules?

    I don't tend to use it myself but have seen valid ways of using it for complex sites but admittedly, using more logical structured markup should get around using it in the first place.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Paul, would you consider !important to be a hack?
    Its a hack in the sense that its being used to supply some browsers a height:auto and IE6 is supplied height:400px. Therefore it is relying on IE6's buggy behavior to produce the effect required which in my mind is a hack

    In case anyone doesn't understand what's happening then !important should over-ride any other same property settings for that element (even if later it in the html (unless !important is also applied)).

    IE6 understands !important quite well in normal circumstances unless the property is in the same style block. If it meets 2 properties the same in the same rule then it discounts the first one as it assumes it's a mistake (because why would you declare something twice).

    Therefore the first !important is discounted and just the last instance of the property/value is actioned. Other browsers attach importance to the property at all times and are not confused like IE. (IE7 has no problems either)

  8. #8
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I set the min-height of my wrapper section to 100% the background-image will not show properly. But when I change it back to 500px (the value it used to have) it shows just fine. The problem is that I want the wrapper and background-image to run according to the elemnts within the wrapper section. Any ideas?

  9. #9
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Btw it works in IE7 but not in firefox (and other mozilla browsers) and Opera

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    When I set the min-height of my wrapper section to 100% the background-image will not show properly. But when I change it back to 500px
    Without any code yo go on we are just guessing here. It sounds like you haven't cleared the floats or are using the min-height incorrectly.

    You can only use a 100% value if the parent of the element has a real height. If the parents height is based on its content then its height is auto which means that the 100% height of the child collapse to auto also. If the parent therefore has no height then neither does the child.

    When you set min-height to 500px then you are giving it an exact height and it will obey.

    If you have a link or some code we could advise better

  11. #11
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that
    http://www.frederikvig.com/test/index.html

    Style:
    http://www.frederikvig.com/test/styles/master.css

    Cheers
    Frederik

    Works fine in IE7.0.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI,

    As I guessed above you haven't cleared the floats. See the faq on floats for clearing techniques and an exmplanation.

    You can either add overflow:auto here:

    Code:
    #ormament-bottom {
        background-image: url(http://www.frederikvig.com/test/images/ormament2.jpg);
        background-repeat: no-repeat;
        background-position: left bottom;
        width: 859px;
        z-index: 10;
    overflow:auto    
    }
    Or add a clearer in the html:

    Code:
                    <div id="content-box-bottom"></div>
                </div>
              <div style="clear:both;height:1px"></div>
            </div>
        </div>
        <div id="footer">
            <p>Copyright etc here 
        </div>
    Read the faq on floats for other methods and why you need to do this.

  13. #13
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers! works like a charm


Bookmarks

Posting Permissions

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