Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Today I discovered how to make min-height work in Internet Explorer

    And it's so simple, it's galling!

    Internet Explorer misinterprets the normal height property - if an element has more content than there's room for, IE expands the container, when what it should do is allow the content to flow outside. That much we already know.

    But then I realised - that interpretation of height is identical to the correct implementation of min-height!! So all you have to do is this:
    Code:
    element { min-height:100px; }
    * html element { height:100px; }
    Unless I've missed something really stupid, that's it - that's all it takes And it should work identically for width as well.

    Check it out on this dev site: http://cc121.karovastore.com/ - the five colored boxes in the middle
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm assuming that the second one is for IE?

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes - the "star HTML" hack as it's known exploits a parsing bug that only exists in IE (5+6 win and mac). "*" means "any element", but "html" is always the root node of an HTML document, so logically it cannot descend from another element - that rule makes no logical sense, and shouldn't be applied at all. But IE does apply it - hence you can use it safely to apply CSS just for IE.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't forget that Safari will need display:table-cell; on the element to get the same result (care of Anne Van Kesteren via Liorean)

    Although it's a heap of extra script, I use this method to get support for min/max height and width in IE5+. Though I only use that one in designs where it's really needed and import it from within a conditional comment so as to save others the bandwidth. It may sound like a lot of extra hassle, but fluid width columns with an 'em' based max-width look great and are highly readable at any resolution
    Last edited by mindlessLemming; 10-08-2004 at 11:37 PM.

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

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