6

I have a page with the following CSS, it renders fine on IE and FF, but on Mac in Safari and Chrome the min-height does not seem to work and all the content collapses on top of each other when the browser page is short instead of staying extended and providing scrollbars:

<style type="text/css">
    html, body {
   height: 100%;
        width: 100%;
    }
    body {
   height: 100%;
        width: 100%;
        background: #000000;
        font: 86% Arial, "Helvetica Neue", sans-serif;
        margin: 0;   
        padding: 0px;
        color: #CCCCCC;
    }
    #website_wrapper {
        min-height: 850px;
   min-width: 1080px;
        height: 100%;
        width: 100%;
    }
    #website {
        height: 100%;
        width: 100%;
        background-color: #000000;
        vertical-align: bottom;
    }

Any ideas why Safari (WebKit I guess) is not doing what it is told to do? Thanks in advance...

dsire
  • 61
  • 1
  • 1
  • 2
  • You have 100% after your min-height. but min-height is bugged out for me in webkit too. just thought I'd point it out. – meteorainer Mar 03 '11 at 21:12

3 Answers3

3

For some reason I'm encountering as similar issue, where my navbar on Safari is a different height to other browsers.

To fix it I have used min-height: initial

I also wrapped this in a safari-specific media query, to avoid possible conflicts:

is there a css hack for safari only NOT chrome?

Community
  • 1
  • 1
endymion1818
  • 468
  • 3
  • 16
1

The following example works for me on Mac OS X 10.6.4 using Safari 5.0.1 (not sure which version of Webkit):

<html>
    <head>
    <!--
        <style>
        .box1 {
            float: left;
            width: 100px;
            margin: 1em 20px 1em 0;
            background: yellow;
            border: 1px solid black;
            min-height: 100px;
        }
    -->
    </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box1">less text</div>
        <div class="box1">more text more text more text more text more text more text</div>
    </body>
</html>

I can't tell from your example how you are implementing your styles as you only show your style definitions. Another thing I've noticed is that you are defining ID styles (# notation) instead of class styles (dot notation). Though that also works, it's recommended that you define class styles when you want to apply a style to multiple elements.

If this example doesn't help you, perhaps you can paste some HTML that shows HOW you are using your styles.

chown
  • 51,908
  • 16
  • 134
  • 170
Ryan H.
  • 7,374
  • 4
  • 39
  • 46
  • This helped, thank you! @meteorainer Just saying that this issue is also bugged for you should really be a comment to the Question instead of an answer: [SO FAQ - on answers that are "thanks!" or "me too!" responses](http://stackoverflow.com/faq#deletion) – chown Nov 12 '11 at 03:43
0

min-height is supposed to be supported in Safari now but you might want to try the underscore hack:

min-height: 850px; height: auto; _height: 850px;

Ryan H.
  • 7,374
  • 4
  • 39
  • 46