Menu
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...
743
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?
111
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
