The joys of overflow:auto and cross-browser development

Some of you may have wondered why I initially didn't post the code for my Map/Reduce example on my blog, but only linked to the Channel9 post, and why I added it now. The answer is, because figuring out a good way to add code samples to my blog was still on the TODO list.

"But," I hear you say, "that's simple isn't it? A <pre>, maybe some fancy colouring, end of story, right?"

Right. Except, no. You may have noticed that the content on this is in a container that has a width relative to the page (70%, to be precise). So what would happen if I put a <pre> in there, and that contains a line that wouldn't fit. In Internet Explorer 7, Firefox, Opera and other browsers with a proper overflow model, the line would run out of the box. In IE6, it grows the box to fit the line, destroying the entire page layout. Neither is very desirable.

So there are two solutions. One is to have the lines wrap. The simple way to do that would be to use white-space: pre-wrap;, but alas, no browser that I know of actually supports that. The other way would be to manually format it, inserting &nbsp; and <br /> elements where needed. I don't much like doing that, and I don't actually like having lines of code wrap at arbitrary points either, so this solution is out the window.

Thus we end up with the solution I eventually used as you can see in the previous post. I used scrollbars.

The mechanism to create scrollbars, namely overflow:auto has its own problems. You see, CSS 2 does not tell browsers where these scrollbars should go, and as a result everybody does it differently. CSS 2.1 rectified this oversight by saying the scrollbars belong on the inside of the box with the overflow style, i.e. the box does not grow to accomodate the scrollbars.

Perhaps surprisingly, the only browser that does this is IE. All the others place the scrollbar outside the box. This means that in IE if overflow:auto mandates a horizontal scrollbar, this scrollbar now obscures part of the content, so a vertical scrollbar is also needed. So setting overflow:auto will cause the code sample to always have two scrollbars in IE, and only one in Firefox et al. Not strictly a problem, especially since I wanted to add a max-height so a vertical scrollbar is needed anyway.

There is, for those interested, a way to avoid the vertical scrollbar even in IE. First, IE will behave differently if the element being scrolled is a table. Second, you can force the scrollbar to the outside using the CSS 3 properties overflow-x:scroll;overflow-y:visible. Unfortunately, that is not a legal combination according to CSS 3, but it works in IE. Firefox, Opera etc. do not support overflow-x/y at all. The drawback is that it only works with overflow-x:scroll, not overflow-x:auto so now the element gets a scrollbar even if it doesn't need one!

IE6 adds additional difficulty. Because of the broken overflow model (thankfully fixed in IE7), it never thinks the <pre> needs a scrollbar unless you give it a specific width. Unfortunately, that prevents IE7, Firefox, et al from automatically adjusting the width if the element is next to the sidebar or not. Even worse, in Firefox, an explicit width that's wider than the space next to the sidebar causes the element to overlap the sidebar (why Firefox doesn't move it below the float like IE does in this case I don't know). So that's out.

So in the end, we have overflow:auto, with the knowledge of the vertical scrollbar that will cause in IE (which is right according to spec), and some extra rules for IE6 (using the "* html" hack so other browsers (including IE7) ignore them). And then I could add the code.

Ah, the joys of cross-browser development...

Categories: Programming
Posted on: 2006-08-04 14:26 UTC.


Olmec Sinclair

2006-11-27 20:49 UTC

I am having issues with scrolling the contents of a div. It works well in FF and IE7 with the div having a scrollbar on the inside of the width, along with the content. On IE76 bars are on the outside which looks bad.


2006-12-29 18:53 UTC

Good explanation, thanks!


2007-08-10 17:30 UTC

would have been nice if you actually put the solution in there for us. Read the whole article and have to continue to search the web on how to resolve the scrolling issue


2008-03-14 21:47 UTC

Great explanation.


2008-07-07 09:42 UTC


I would like to remove double scrollbars in IE7. My page in IE6 works fine without showing double scroll. IE7 introduces double scrollbar when I resize my page. I used overflow:hidden in divs...but that doesn't solve the problem.

Please let me know how to fix this.



2009-04-28 23:38 UTC

I am new to this, could you send me a solution to this problem that I can understand.

I have a site the guy before me did in css, the scroll bars work in fire fox but in IE6 the bar dosent move.

Could you please let nkow how to fix this in simple terms.

Many thanks


2009-12-23 17:49 UTC

I would like to remove double scrollbars in IE7. ead the whole article and have to continue to search the web on how to resolve the scrolling issue

Add comment

Comments are closed for this post. Sorry.

Latest posts




RSS Subscribe