Anne van Kesteren: Weblog 4.2

Weblog on W3C, WHATWG, HTML, CSS, DOM, XML, HTTP and more.

'min-height' in Safari

As you might know, Safari 1.2, doesn't support min-height. While some people don't really care about the Mac (like me, although I would want one) and others do I found a solution after I gave up. A person, who doesn't see that much value in web standards, made a comment about the Safari failure (the complete site was readable, only visually not the same as Mozilla) and concluded that my CSS knowledge wasn't sufficient. Of course, I didn't like that comment and started thinking how he would have solved the problem which led me to tables, obviously.

I immediately thought of how I hate the CSS table model and directly after that I saw how it could solve my problem. Read these lines:

In CSS 2.1, the height of a cell box is the maximum of the table cell's 'height' property and the minimum height required by the content (MIN). A value of 'auto' for 'height' implies a that the value MIN will be used for layout.

All I had to do to make min-height work cross-browser, was using something else: 

div{
 display:table-cell;
 height:100px;
}

Internet Explorer will ignore the display property (actually, it treats it like display:block;) and will handle height as min-height, since IEs handling of height is stupid.

All other browsers, including Safari (see the support charts) will make the DIV element behave like a table-cell (and create some anonymous elements around it), which makes the rules of the quote apply and everyone is happy!

24th April 2004

Browse through posts: ← main → .

Comments

  1. Now that's css hacking at it's best! Kinda cheeky, too.

    Permalink · 2004-04-24 15:52:00 · [m]

  2. On a side note, David Hyatt has implemented support for min-height and max-height in Safari

    Permalink · 2004-04-25 21:31:54 · Gilles Durys

  3. Your site is unreadable on IE5-Mac. None of the body copy shows up, only the menu. I'm writing this from home. Firefox/Linux, where it works beautifully. Nice hack, too, btw.

    Why, though, do I have to use HTML to post a comment? Isn't that a bit user-unfriendly?

    Permalink · 2004-04-29 03:47:14 · Kenneth

  4. Perhaps you could upgrade to Safari? ;-). I don't really care about older browsers, sorry for that. The HTML in the comments is perfectly acceptable for most of my audience.

    Permalink · 2004-04-29 05:42:31 · Anne

  5. Wow it really works!

    Alas Opera 7.0 which I have to support kinda messes things up :(

    I'm just going back to min-height. Safari will support it soon enough (as Gilles mentions) and the design I'm working on won't die horribly

    Permalink · 2004-05-03 09:38:11 · Egor Kloos

Comments are closed

Sorry, comments are closed at this time.