9

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

1 Answer 1

13

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

1
  • i will add a bit of info just to be fully in the picture - the last windows version of safari is 5.1.7 and after that the windows version of safari browser was discontinued. The support of CSS value "calc" comes in version 6. Jul 13, 2015 at 12:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.