How to get min-height working in Safari, Chrome on MAC

macos safari css

23,585

Solution 1

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?

Solution 2

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.

23,585

Author by

Admin

Updated on March 09, 2020

Comments

Admin about 4 years

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...