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
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
So there are two solutions. One is to have the lines wrap. The
simple way to do that would be to use
but alas, no browser that I know of actually supports that. The
other way would be to manually format it, inserting
<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
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
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
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
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: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
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...