Posting Blocks of Code on Blogger

I had a hell of a time getting code blocks to look and behave as I wanted across the varied browsers on Blogspot. Simply, I wanted the white space preserved so I could indent lines, and I didn't want my text wrapped. Sounds like the <pre> tag should cover it, right? Ha! There's a whole litany of issues that arise in Internet Explorer when invoking the horizontal scroll-bar; Blogger's template was telling IE to word-wrap the <pre>; And even Firefox - though rightly - managed to give me a bit of the run around. Before I get into it all here's the final, working CSS I've discovered for code blocks. Copy it now! (Though don't run off without reading the Template Tip toward the bottom of the post.)

pre.code {
  width: 94%;
  overflow: auto;
  overflow-y: hidden;
  display: block;
  line-height: 1.2em;
  background-color: #f5f5ff;
  padding: 0.5em 1em;
  border: 1px solid #bebab0;
  padding-bottom:15px;
}

From the CSS you can divine that I'm using <pre class="code"> to wrap my blocks. I started out using <pre><code>, and perhaps that could be made to work as well, but somewhere throughout my cross-browser compatibility struggles I ditched the code tag. It's redundant anyway. Pre tags preserve your whitespace and set a monospace type. Code tags set a monospace type. So why bother saying the same thing twice? Why? Why say it twice? Seriously, why should I say it twice?

I also had a lot of trouble with the <pre><code> arrangement where, because I was wrapping one in the other, IE would favor the <code>, ignore the <pre>, eat my whitespace and word-wrap my text. Meanwhile Firefox looked perfect - that is until you grabbed the scrollbar. Scrolling the code block would leave the background-color and border behind, sliding us into a void of undeclared white-space. In the end it proved too much hassle keeping the redundant <code> tag in just for it's own sake.

Even with the <code> tag out the window, I ran into the much maligned IE v-scroll bug. When a Mozilla browser adds a horizontal scroll bar to a block, it does it on the outside of the block. IE does it on the inside... You say tomato, I say flibbidy floo. Problem is, IE doesn't seem to account for the space the h-scroll has come to occupy. It doesn't stretch the container out, it just slaps the bar over the top of it. Now you've got a horizontal bar blocking out the last line in your <pre>, which necessitates that IE stamp a vertical scroll bar onto the block as well!

Sure, this is an ugly and unnecessarily contrived way of getting the job done: granted; but there's a bigger downside than aesthetics here. If you try to post a single line of code into a <pre>, Internet Explorer's intrusive horizontal and vertical scroll bars completely obscure your text. Scroll up, scroll down, the most you'll ever see is a sliver of what's there. Your one-line block of code is now a tasty block of scroll bar.

The simple style sheet above cures all that ails. I'm not going to explain it, just take it and go! Oh, but not until after reading this next part, of course.

The Aforementioned Template Tip

Even with the CSS implementation described here IE continued to word-wrap my code blocks. Testing outside of Blogspot proved the CSS good. So I started peeling through Blogspot's template, looking for some overriding declaration. I didn't catch it myself, but eventually found an old post on the Blogger Help forums containing the offending declaration's locale.

#main-wrap1 {
  ...
  word-wrap: break-word; /* fix for long text breaking sidebar float
in IE */
} 

If IE refuses to respect the <pre> tags on your Blogspot site, search your template for a word-wrap: break-word; being declared in the #main-wrap1 id and comment it out. If your template doesn't have a #main-wrap1 id, then you'll have to poke around until you find what your template calls it.

Caution: You'll likely find more than a few word-wrap: break-word; declarations throughout the template, and it's best not to remove them all. It should be obvious - by their names - which declarations belong to the sidebars, headers, footers, etc., and which belongs to the div(s) where your posts live.

Why, you guys? Why should I say it twice?