IE9 Page length bug? (Doesn't occur on any other browser)


  • Hi,
    I'm developing a site that uses jquery accordion and text truncating scripts to hide and display content as required.

    IE9 seems to have an issue with the page length - while the page is loading the expanded text and accordion content appears in full until the Jquery scripts load and 'collapses' the text blocks - IE9 does not change the page length when the content collapses resulting in a long scrollable page which is the exact height as the un-collapsed content.

    This doesn't happen in IE7, IE8, safari, firefox or chrome.

    an example using an accordion is here: 
    an example using a text truncating script is here:

    On the page that uses the accordion - IE9 fixes the page length if the scroll bar is moved, however the page length doesn't change when scrolling on the page which uses the truncated text script. Also, when the page is reloaded, it sometimes works - ie. the page length reduces to where it should be with the footer correctly at the bottom of the page.

    This all seems very bug like? The suggested fix in the first post below doesn't seem to work, though I'm not sure I fully understand it?

    Any help or advice would be very appreciated!

    • Edited by matt960 Wednesday, May 04, 2011 12:24 PM Bump/problem clarification
    Thursday, April 07, 2011 9:23 AM

All replies

  • Hi,

    Try a font size for the html element rules of 100% i/o 240px.

    Here is the composite style of the HTML element from the page in question.










    invert 0px none;







    • Marked as answer by Song TianModerator Wednesday, April 13, 2011 6:36 AM
    • Unmarked as answer by matt960 Wednesday, April 13, 2011 9:21 AM
    Thursday, April 07, 2011 10:43 PM
  • Thanks for the reply Rob, sorry its a taken me a while to get back to this..

    I've had a try specifiying font sizes for the html element for IE9 but it does not appear to be having any effect - just to confirm:
    the problem can be seen here: - note how the page fails to reduce to the correct length after the collapsable text areas are collapsed, leaving a large blank scrollable area at the bottom of the page. This only appears to happen in IE9..

    In my CSS file I have a CSS reset (from the html5 boilerplate project) - it sets the font-size at 100% (to define the browser default) - where did you get the '240' from in the code you posted above? Looking at the computed styles in ie9 dev tools and firebug I can't see where this is coming from?

    Can you clarify what you mean?

    Thanks for your help

    Wednesday, April 13, 2011 10:05 AM
  • bump!

    Ive clarified my original post - any help or ideas would be great...

    Wednesday, May 04, 2011 12:26 PM
  • This is a late reply, but I had the same issue and figured out a solution so this may help other people when searching.

    I had a rule in my css setting overflow to auto on html (so it looked like this: html { overflow: auto }). I removed this rule and it now works perfectly fine in IE9, so playing around with the overflow on html/body might fix the issue for anyone else.


    Thursday, July 28, 2011 10:39 AM
  • @levymetal...

    @matt960 - remove the overflow rule from your html tag....

    I would avoid using class rules for the root element (<html>).... ie9 js no-flexbox canvas canvastext postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstorage sessionstorage no-webworkers no-applicationcache



    Style rule casscade (thats why it is called css).... if a users browser does not support a style rule it will ignore it... there should be no need to use different classes for different browser versions... either a browser recognizes it or ignores it. An example is the width:1px Holly hack rule for IE7 browsers which don't support min-height.


    div {min-height:400px; height:400px}

    You can feature test for css rule support with

    if(sattribute in


    if('boxshadow' in

    canvas support


    postmessage support


    DOM Storage



    You are using jQuery 1.4.2 .... be aware that this is an old version (released before IE8) and may be using $browser (browser version sniffing) instead of Feature detection. The latest version of jQuery is 1.6.2


    Friday, July 29, 2011 3:11 AM
  • Thanks Gents,

    I'll have look into it when I get chance - thanks for the info Rob - the class rules on the HTML element are generated by modernizr - a very popular script used to enable HTML5 to be used with IE6/7 (in particular) and useful of doing browser feature detects.

    There is a very comprehensive post here from Paul Irish explaining the thinking behind using different classes for different versions of IE. Its the approach used in the popular HTML 5 Boilerplate which has gained a lot of traction recently and is used by major developers all over.

    Also, this issue only happens with IE9 - no other browser - so all others (that I've tested) have no problems with classes on the HTML tag?

    I'll report back when I've had chance to debug.. thanks again.


    Friday, July 29, 2011 10:00 AM
  • I had exactly the same issue with IE9 and toggling divs using jQuery. If the page was loaded with the divs expanded the page height would not adjust to correct length when the divs were collapsed.

    I managed to fix the issue by creating an IE9 specific CSS file and setting an overflow:auto on the html element as follows:

    html {overflow:auto;}

    Be aware though that if I used this on the same page for IE 8 it broke my expanding divs completely. Hence the reason for a seperate IE9 CSS file.

    Hope this helps someone.

    Friday, November 25, 2011 9:11 PM
  • Hi,

    do you have html,body{height:100%} in your style rules or in your css reset?


    in it is using <footer>... with nested and floated inline <div>'s. The last div <div class="copyright"... has an empty <p> tag which is only honored in Standards mode (quirks and nears standards modes remove empty <p> and <td> elements or multiple <br/>'s, modern non-MSIE browsers force quirks documents to standards mode and so can 'appear' to render quirks as standards mode(although non-MSIE browsers do not have a documentMode property )

    I think all you need to do there is to give the <p> tag a line-height:100% rule (it currently inherits the 170% from the bounding footer... Developer Tools- Trace styles tab).


    <div class="copyright">

    <p style="line-height:100%">put &nbsp; or your copyright notice here.</p>




    Sunday, November 27, 2011 8:36 PM
  • i found it!!!

    matt960, you need to remove overflow-y from your css style

    and problem was in my normalize.css where was this one, i removed it and everything went ok

    remember, no overflow property must be set, if you use such layout with pinned footer

    hope this helps

    Tuesday, November 29, 2011 7:37 AM