SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to understand 'min-height' hack...

    Ok I found this min-height hack for IE6 and just not quite sure how to apply it to the div I want it to work on?

    And what if I have 3-4 other different min-height's needed on the same page?

    selector?

    Code CSS:
    selector {
      min-height:350px;
      height:auto !important;
      height:350px;
    }

    Thanks Guys

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have multiple elements which are in need, then you need to have a hook on such as an ID or have them have the same class. So if those 4 division elements had a class of 'foo'

    .div {
    min-height:350px;
    height:auto !important;
    height:350px;
    }

    Standards compliant browsers will use the first height value, because MSIE incorrectly ignores the !important and uses the last value instead. ( height is min-height in MSIE 6 btw )

    You shouldn't use this IMO, but create a seperate selector in a style sheet made just for MSIE and just feed it the height value, leaving min-height in your normal style sheet.

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanation SoulScratch.

    Starting to make sense... I think?

    Code CSS:
    selector {
      min-height:350px;
      height:350px;
    }
    So this would take care of IE (height) and every other browsers will use min-height? correct?

    Below is a example of what I'm working on:
    Code CSS:
    #full-holder{
    float:left;
    width:562px;
    min-height:350px;
    height:350px;
    display:inline;
    line-height: 1.6em;
    border: 1px solid #333; background-color: #ccc;}
     
    #full-left-holder{
    float:left;
    width:330px;
    padding:10px;
    min-height:330px;
    height:330px;
    background: #777;}
     
    #full-right-holder{
    float:left;
    width:212px;
    min-height:350px;
    height:350px;
    background: #999;}

    Which looks like:
    Code HTML4Strict:
    <div id="full-holder" class="clearfix">
        <div id="full-left-holder">
        <h1>News</h1>
        <p>Some news and loads more paragraphs</p>
        </div>
    	<div id="full-right-holder"></div>
      </div>

    But sometimes these div's will have dynamic content so the size will not always be 350px meaning if I fix a height in IE.

    and for some reason in IE6 - 'full-holder' extends about 20px past both my left & right holders... why is that?

    Thanks


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
  •