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   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.