CSS3 PIE Forums

Solution to IE6 Page Resizing Resulting in Broken Layout
Page 1 of 1

Author:  phamti [ Fri Jun 03, 2011 9:39 pm ]
Post subject:  Solution to IE6 Page Resizing Resulting in Broken Layout

IE6 page resize results in a broken layout where elements are slightly off. This can manually be resolved by clicking the browser refresh button.

A JavaScript reload call using onResize event handler solves the problem but results in another problem. IE6 calls will call onResize multiple times depending on how many x and y movements it detects. This can also result in loops that crash the browser.

jQuery with the window resize plugin http://noteslog.com/post/how-to-fix-the ... ent-in-ie/ can resolve this by doing a timeout effectively creating a onResize event handler that will happen only once at the very end of the window resize.

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.wresize.js"></script>

<script type="text/javascript">

   // This function simulates a resizeEnd that works with IE6 and does not run multiple times.
   $(window).resize(function() {
       if(this.resizeTO) clearTimeout(this.resizeTO);
       this.resizeTO = setTimeout(function() {
       }, 500);
   // After timout, then call any necessary code.
   $(window).bind('resizeEnd', function() {
       // ie6 is bad with redraws when it comes down to percentages and window resizing
       // Force a redraw on window resize.
       // If I can identify the elements I might be able to redraw those specific elements

       // only run if Microsoft browser and less then ie7.
       if ($.browser.msie && $.browser.version.substr(0,1)<7) {



Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group