$('body').css('overflow-y', 'auto') doesn't work on Internet explorer

Question

I'm trying to have diferent browser behaviours depending on window height. What I want is if user is on a netbook my script will just activate the css overflow-y to 'auto' so if content is bigger than screen user can see everything. if user is in a big screen, I want to have overflow hidden and just have my main div with overflow = 'auto', so the footer can be at bottom of screen, but content can also be viwed if bigger than screen.

posting the basic code for this, it works on big screens on mac, but on internet explorer it doesn't, either on big or small screens...

what to do?

Thanks for help in advance

CSS

html, body {     min-width: 600px;     margin: 0;     padding: 0;     overflow: hidden; } #header {     position:relative;  /* IE7 overflow bug */     clear:both;     float:left;     width:100%;     height: 200px;     overflow: hidden; } #main {     position:relative;  /* IE7 overflow bug */     clear:both;     float:left;     width:100%;     overflow-x: hidden; } #footer {     position:relative;  /* IE7 overflow bug */     clear:both;     float:left;     width:100%;     height: 100px;     overflow: hidden; } 

jQuery

if( typeof( window.innerWidth ) == 'number' ) {     // No-IE     var screen_height = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {     //IE 6 +     var screen_height = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {     //IE 4     var screen_height = document.body.clientHeight; }  var header_height = $('#header').height(); var footer_height = $('#footer').height(); var main_height = screen_height - header_height - footer_height; // if (navigator.userAgent.toLowerCase().search("iphone") > -1 || navigator.userAgent.toLowerCase().search("ipod") > -1) {     $('body').css('overflow-y', 'auto'); } else {     if(screen_height > 550) {         $('#main').css('height', main_height + 'px'); $('#main').css('overflow-y', 'auto');     } else {         $('html, body').css('overflow-y', 'auto');     } } 

Answer 1

$('html, body').css('overflowY', 'auto');  

solves this problem.

Answer 2

Try setting it with overflowY:

$('body').css('overflowY', 'auto'); 

Dashes in attribute names typically don't work when set with JavaScript, especially in IE.

Hope that works.