can anybody see why this is not working in Safari? On this site http://www.transurban.co.nz/newHomePage the div containing the slider has it's height calculated using height: calc(100% - 155px); It works perfectly for all browsers apart from Safari (Safari specific = height: -webkit-calc(100% - 155px); )
Any assistance/suggestions greatly appreciated.
CSS
html, body, #wrapper { height: 100%; }
#headerHome {height:146px;}
#center {
height: 100%;
width:100%;
overflow: hidden;
height: -moz-calc(100% - 155px);
height: -webkit-calc(100% - 155px);
height: calc(100% - 155px);
}
.sliderBox{
width:100%;
height:100%;
}
HTML
<div id="wrapper">
<div id="headerHome">
HEADER STUFF
</div>
<div class="redBorder"></div>
<div id="center">
<div class="sliderBox">
SLIDER STUFF HERE
</div>
<div class="centralWrap">
MAIN CONTENT HERE
</div>
</div>
</div>
The -webkit-calc
feature of Safari just works (buggy) for version 6 and later. It will never work on Windows (Safari for Windows is outdated and should not be used anymore).
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
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