Fixing IE overflow problem

Until recently, I didn’t know IE (both 6 and 7) had an overflow problem. But it does.

I found it on my personal blog, and my pet project: jQuery for Designers – it’s particular visible because I use a lot of code examples.

Here’s a detailed account of the problem, and it’s fix.

The Problem

What I hadn’t realised (though kicking myself for not realising earlier) is that IE has a different implementation of overflow compared to Firefox or Safari.

In particular, Firefox et al, when overflowing an element, it puts the horizontal overflow scroll bar on the outside of the element.

You won’t notice this difference until you compare to IE:

Firefox compared to IE - overflow broken

You’ll note that because the content overflows horizontally in IE, the new horizontal scroll bar means we can’t see all the content vertically, thus generating a vertical scroll bar.

Here’s the worst example, where only one line is overflowed (there’s a super tiny vertical scrollbar that you’re supposed to use to view the single line):

Worse example of IE overflow

So our aim is to move the horizontal scroll bar to the outside of our overflowed element.

The Solution

It’s worth noting that I can only see this being a problem for horizontal overflow. Vertical overflow is always inside the element, and if you have a specific fixed height for your overflowing elements, you’ll probably want to skip step (3) below.

So our solution is to apply the following to in IE only:

  1. Find all elements whose contents is overflowing horizontally.
  2. Add 20 pixels of padding to the bottom of our element.
  3. Strip the vertical scroll bar.

† As far as my testing has seen, the typical height of a scroll bar is 20 pixels.

JavaScript to the Rescue

Disclaimer: As much as I’d love to see this problem solved entirely using CSS, or even the browser doing the job, I can’t see how it can be achieved uniformly across all elements, since we only want our changes to apply if, and only if the overflow has occurred (i.e. if we added the padding across the board, some blocks would appear to have an odd blank line when it didn’t overflow).

See the working example

window.onload = function () {
  // only apply to IE
  if (!/*@cc_on!@*/0) return;

  // find every element to test
  var all = document.getElementsByTagName('*'), i = all.length;

  // fast reverse loop
  while (i--) {
    // if the scrollWidth (the real width) is greater than
    // the visible width, then apply style changes
    if (all[i].scrollWidth > all[i].offsetWidth) {
      all[i].style['paddingBottom'] = '20px';
      all[i].style['overflowY'] = 'hidden';
    }
  }
};

As a jQuery plugin:

(function ($) {
  $.fn.fixOverflow = function () {
    if ($.browser.msie) {
      return this.each(function () {
        if (this.scrollWidth > this.offsetWidth) {
          $(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
        }
      });            
    } else {
      return this;
    }
  };
})(jQuery);

// usage
$('pre').fixOverflow().doOtherPlugin();

Result

Our JavaScript fix results in IE conforming to putting the horizontal scroll bar below the element:

Firefox compared to IE: Overflow fixed

Even better – here’s the one line overflow fixed in IE:

One line overflow fixed in IE

29 Responses to “Fixing IE overflow problem”

  1. Very nice work! I’ve bookmarked this for future reference.

    Does this bug apply to IE7 as well? Might be useful to add a note to the post as to whether it is IE6 and 7 or just 6.

  2. It’s both – I’ll update the post, thanks for suggesting.

  3. Hey there thanks for sharing the script to correct the overflow problem, but when I load my page again in IE7 there seems to be a javascript errer where “Element” is undefined. I’ve googled for possible CSS fixes and here’s what I’ve got – a CSS fix available at BBPress. Just my 2 cents though.

  4. @Teddy – do you get that error using the example I provided?

    If not, it sounds like the error could be related to some different script – drop me a link and I’ll take a look to see if my solution is causing a problem.

  5. Hey there I realised that the error occurs only when I save your script in a .js file and use the browser to load it. When I pasted the script directly in the head tags, the error just disappeared :) weird, but hey at least it’s working! Thanks anyway :D it’s awesome.

    P.S. I realised that I can actually edit my comment after posting it :) is there any WordPress plugins that allows me to do so? Thanks again!

  6. @Teddy – good to hear it’s working for you now. Re: editing comments – I used this WP Ajax Edit Comments – though I’ve tweaked it slightly so that clicking on links in the comments go through rather than triggering an edit.

  7. Thank you! I hope you don’t mind my comment resurrecting older posts in your blog, but hey this fix is awesome. Thanks! Will link it soon when I address the expanding box problem in IE in my blog… do you mind if I link?

    P.S. and thanks for the plugin link as well!

  8. [...] Fixing IE overflow problem- IE has a different implementation of overflow compared to Firefox or Safari. This is a detailed account of the problem, and it’s fix. [...]

  9. [...] 12. Fix Overflow [...]

  10. [...] 12. Fix Overflow [...]

  11. [...] 12. Fix Overflow [...]

  12. [...] il problema dell’overflow orizzontale sullo stesso browser. E’ possibile seguire il progetto alla pagina [...]

  13. [...] 12. Fix Overflow [...]

  14. [...] Solution to the overflow problem in Internet fuckin Explorers 5, 6, 7, and 8, and maybe all the future versions. http://remysharp.com/2008/01/21/fixing-ie-overflow-problem/ [...]

  15. [...] 12. Fix Overflow [...]

  16. [...] 35. Fix OverflowIE puts scroll bars inside overflowing elements, and if an element is only one line, the scroll bar will cover it. This plug-in fixes that issue. [...]

  17. [...] 35. Fix OverflowIE puts scroll bars inside overflowing elements, and if an element is only one line, the scroll bar will cover it. This plug-in fixes that issue. [...]

  18. [...] 35. Fix OverflowIE puts scroll bars inside overflowing elements, and if an element is only one line, the scroll bar will cover it. This plug-in fixes that issue. [...]

  19. [...] 11. Fixing IE overflow problem [...]

  20. Totally awesome, fixed my IE issues using jQuery!

  21. Great fix! Congrats!

    Anyway, does this happen in IE8, as well?

  22. Really , It helps me a lot and get rid of IE 7 issue (Horizontal scroll bar issue)..

    Thanks, keep rocking….. ;)

  23. Thanks! I’ve thought that the only solution is to use fixed div height.

  24. ohh yess dude, youre code worked more than just fine :) thank u very much!

  25. Previous user asked if this happens in IE8. It does, this fix will also work for IE8.

  26. WoW, after all the effort to overcome this problem I finally found the solution. your code helped me a lot. Thanks man.

  27. This was TO THE POINT. Exactly what I needed. I was having a similar scrollbar overflow issue with my Coldfusion apps page.

    Thank you very much

  28. Had this issue today and came up with my own css only solution. The problem only affects IE 7 and below so I add the below to the fix to the element where overflow: auto is set

    div.scrollable {
    	overflow: auto;
    	position: relative;
    	/* notice the * before the property - this rule only applies in IE7 and below */
    	*padding-bottom: 1.3em; /* makes space for the scrollbar */
    }
    

    As you mentioned this applies to all the element whether there be scrollbars or not so I now use code similar to yours to remove the padding if the horizontal scrollbar was not added.

    This is more in line with progressive enhancement as the divs are readable (if ugly) without javascript.

    Thanks for the javascript tip – hope this helps.

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight