 <p>I have it working now. I have decided to change things around so the default css page loaded has the styles necessary for the newer model phones which support overflow:scroll. So therefore I have set the heights of the body, container_wrappper and side menu to 100% to begin with instead of changing that after receiving a positive response to checking if overflow: scroll is supported... Instead I check if overflow scroll is not supported and then if not supported i dynamically add a new stylesheet which has the heights of the body and container_wrapper as height: auto; instead of height:100%. it seems that this way around ie changing from height:100% to height: auto displays it correctly as opposed to the way i was doing it starting with no height and adding in height 100% if overflow scroll is* supported.. it was to do with the speed of things loading but when i do it this way even though there is a delay in loading the second stylesheet it still displays correctly after loading. so i add the following code to my head:</p> <pre><code>&lt;link rel="stylesheet" type="text/css" href="css/main_style_new_phones.css"/&gt; &lt;script&gt; if(!canOverflowScroll()){ var lnk=document.createElement('link'); lnk.href='css/main_style_old_phones.css'; lnk.rel='stylesheet'; lnk.type='text/css'; (document.head||document.documentElement).appendChild(lnk); } </code></pre> <p>and this is the css in main_style_new_phones.css </p> <pre><code>body{ margin-top: 0px; /*moves #container right up to top of page so no gap*/ font-family:Arial,Helvetica,sans-serif; width: 100%; overflow: auto; z-index: 1; height: 100%; } #container_wrapper{ position: absolute; left: 0px; top: 0px; display: block; margin: 0 auto; width: 100%; background: #120F3A; overflow: auto; max-width: 100%; /*same width as full logo image width so that when on full screen the background color of the container doesn't spread across*/ z-index: 4; -webkit-transition: .3s; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */ -moz-transition: .3s; -o-transition: .3s; transition: .3s; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */ height: 100%; } #headernav { width: 100%; position:fixed; top: 0px; left: 0px; z-index: 10; background: #000; padding-bottom: 2px; -webkit-transition: .3s; /* Safari */ transition: .3s; } </code></pre> <p>and in the css for phones that do not support overflow scroll in main_style_old_phones.css:</p> <pre><code>body{ height: auto; } #container_wrapper{ height: auto; } #headernav { position:absolute; } #swipe_menu_right{ height: auto; } </code></pre>