Safari Bug?

Why is that the various height options in CSS seem so poorly implemented? Width, seems to have settled down — browsers are happy with set widths, liquid widths, etc. Heights? not so happy. Here’s my current example:

I have a box, that’s 400px high. Ideally, it would actually be min-height:400px, so that it would expand beyond as necessary. But lots of browsers don’t understand min-height, so for their sake, I’ve just set it to 400px.

Within this box, I have a navigational menu with an on-click even that reveals a sub-menu (with some handy-dandy javascript to set/unset the display:none). On all browsers except safari, everyone is perfect happy with this. However, in Safari, it doesn’t expand. It’s as if because an ancestral container (because it’s actually 2 container-levels up) has a height, it’s padded out everything else with physical padding, and there’s no room to expan within (despite the 200-odd pixels of white space beneath this menu.

So what does this mean? it means I can’t have a vertically-exanding menu inside a set-height layout (you know, like one of those squares in the middle of the page that some site have) that works in Safari. Now, I’m quite willing to believe that I’m missing some simple fix, but if so, I can’t find it. If you’ve got one, or think you may have one, please let me know. I’m also happy to send you a link to the site I’m building for you to see for yourself. But for various reasons, I don’t want to simply publish a link to the dev site of this client for the world to see.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: