SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE min-height related questions

    Alright maybe I have this all wrong, but isn't min-height supposed to work exactly how it would seem such that, at a minimum, the height of the element would be at least the height, and if there was extra content it would expand further for that content?
    I understand that IE doesnt support this property, but people instead say to use height instead for IE. I can never get this to work. It seems IE willl make the content that height, but it won't expand.. which was the whole point.

    See laraneta.com/wines/
    for an example of where i'm having issues. I'm clearing damn near everything so i don't think its a problem with content not being cleared.

    I have set min-height in my regular stylesheets for .centerColumn and height for my IE specific stylesheet with the same values, yet its only expanding to the height.. I tried overflow: auto for the column and noticed that as I Scrolled the content didnt move.. Something weird going on.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    IE6 doesn't support min-height so if you set min-height in other browsers you need to do

    * html .class {height:blah balh;}

    to select it. That code selects below IE7, aka IE6. To IE6 height is treated as min-height so the above will work. IE7 supports min-height so the only issue is IE6 which the above code will do.

    Tell me if the above isn't good enough help . Can you also post a link to the site?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.laraneta.com/wines/

    I have done essentially the same by putting the style in my ie specific stylesheet..

    I've been using conditional comments to include IE specific stylesheets for a long time now and have found it a lot easier to keep track of IE hacks that way.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Essentially the same thing is not neccessarily the same thing . Your website is blocked for me at my school computer so once I get home I'll look at it. Can you at least try the code above real fast in your regular stylesheet?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ALright i did figure out a method to get it to work, include the ie8.js
    http://code.google.com/p/ie7-js/
    And remove the ie specific styles for the height..

    I've had some luck in the past with the ie7/ie8.js but i've also seen it cause problems so i'm a bit hesitent to use it in case it broke things elsewhere.. I'm going to leave the code without that for awhile if anyone wants to take a shot at why it doesnt work the old school way. BTW i had it changed for like 10 seconds in case someone saw it working, that was why...

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't rely on a Javascript method to make this work: users have JS disabled and that results in it screwing up for them .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    users with IE 6 and have javascript disabled should be punished...
    It works fine in anything but <edit>IE 6</edit>.. My only hesitation isn't usability of IE 6 users without javascript, its breaking other things incidentally.
    Besides, i'd venture to guess that anyone still using IE 6 has no idea what javascript even is, let alone how to disable it.

  8. #8
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, the * html method didnt work either, because as far as i know there is no difference between what the two accomplish..
    * html [selector] is way of targeting ie specifically, and so are conditional comments.. THus, if I conditionally include and IE 6 specific stylesheet then those styles will only get applied to IE 6..

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    IE6 will treat height as a minimum so you don 't need to do anything special apart from only give it to ie6 as already stated.

    However, you have set the height at 500px for ie6 and then you have told it to hide the overflow which means that it will never grow.

    e.g.. You have it specifed here.
    Code:
    /***********************************/
    /******** center column ************/
    /***********************************/
    .centerColumn {
      overflow: hidden;
      width: 568px;
      background-color:#fff;
      color:#000;
          border:2px solid #480001;
          min-height:500px;
    }
    You need the overflow to be visible in order for the element to expand its height. If you are using the overflow:hidden as a clearing mechanism then you need to set overflow to visible for ie6 (it will auto clear when it has haslayout and doesn't understand that overflow (other than visible) can be used for clearing anyway)

    IE specific code (e.g. lte IE 6)
    Code:
    .centerColumn {
        height: 500px;
        overflow:visible;
    }
    Note that in your conditional comments you are giving the styles to all versions of IE and you should be targeting lte ie6 only. (You are actually importing the same file twice! Once to all versions of IE and then once to IE6. Only give the styles to ie6 and under)

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    On "#contentMainWrapper", add min-height:100&#37;; and background:black; to see it in effect.

    Target IE6 for that by

    * html #contentMainWrapper{height:100%;background:black;}

    Cheers.

    Edit: didn't refresh.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help Paul and Ryan, I'll check if that works when i get a chance.. So far the client seems to like it.
    I would like to clarify the IE conditional comment.. There are two stylesheets. One for any IE browser and another for just IE 6...Its not the same stylesheet twice.
    This probably isn't a great idea though I would agree since it may have problems with IE8.. The winery that this site is for has another "sister" winery that the designer mocked up in a very similar layout but with different images and things, so I stole the work from that project (it was done by my employer..not like i did something illegal) and just swapped out styles for colors/images/widths and things..
    Thanks

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ok well just to let you know Paul is never wrong and my code worked for me .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Guru mwolfe's Avatar
    Join Date
    Mar 2005
    Posts
    912
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ryan, I believe you that your code worked, I think my problem had to do with what paul said and the overflow property.. I'm not sure why or where I specified otherwise though so I'm not sure why I have to set that explicitly, however I havent looked at it yet since last week so I must have missed something.
    Paul was correct about how conditional comments work, I bet he just thought both conditional comments were including the same stylesheet, when they were actually referring to two different stylesheets. But like I said, i don't really think this was a good design Its just for the amount I got paid for the site (barely anything) I'm not about to redo that unless I need to.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You have to specifically say overflow:visible (which I'm sure you know is default) is because on normal browsers (IE also reads this) it is set to hidden which means it will hide all content that extends past its height and will contain all floated elements/children. IE6 needs this set to visible (haven't fully read Pauls post).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mwolfe View Post
    and the overflow property.. I'm not sure why or where I specified otherwise though so I'm not sure why I have to set that explicitly, .
    Hi,

    You have already set it to hidden here:

    Code:
    .centerColumn {
    overflow: hidden;
      width: 568px;
      background-color:#fff;
      color:#000;
          border:2px solid #480001;
          min-height:500px;
    }
    That's fine for all other browsers because they have a min-height but when you go and give IE6 a height then the overflow:hidden becomes effective and you will get no more height unless you cancel it out.

    Hence you need to do this for IE6:
    Code:
    .centerColumn {
        height: 500px;
        overflow:visible;
    }
    That's one of the caveats for using overflow (other than visible) for clearing floats in that you need to watch out you don't declare a fixed height for the element otherwise it will not grow.


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
  •