Dave Landers

Someone pointed out to me that some of my code sections were unreadable in Internet Explorer. They looked like this:

Hey! where’s the text? The rest of us (at least Firefox and Safari) were seeing something more like this:

Much better, but what’s going on?

I quote code in a <pre class="code">....</pre> block. And my style sheet contained:

.code {
    font-family: courier, monospace;
    margin: 10px 20px;
    padding: 3px 8px;
    border: 1px dashed #999999;
    overflow:auto;
}

It looked to me like IE was robbing space from either the text height or the padding to cram in a scrollbar. And since that made the resulting area for text too small, it also added a (way too small) vertical scrollbar, too. The result is non-functional in any real sense.

A bit of searching and I am drawn to this comment from the CSS 2.1 spec:

In the case of a scrollbar being placed on an edge of the element’s box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be subtracted from the computed width/height, thus preserving the inner border edge.

As I read this, the scrollbar needs to fit inside the element border, and thus subtracts from space that can be used for the content. This does preserve the overall size of the element no matter what type of scrolling might be used (or not). But in my context, it seems wrong. It also means that IE is probably right here (which also goes against my intuition :).

Wrong or not, it is certainly not what I want. So I did more hunting and experimenting, and I found only two solutions that I really thought worked.

First, I could simply increase the padding-bottom to make room for the scrollbar. This solution is nice because it keeps the browser-specific hacks out of the stylesheet. But I don’t like the way this looks when there is not a scrollbar, because there’s extra blank padding at the bottom.

So the only real choice for me was to add some browser-specific thing to the stylesheet. What I ended up with is based mainly on
this post, and looks like this:

.code {
    font-family: courier, monospace;
    margin: 10px 20px;
    padding: 3px 8px;
    border: 1px dashed #999999;
    overflow:auto;
    /* add padding in IE (which supports expressions) to make room for the scroll bar */
    padding-bottom: expression(this.scrollWidth > this.offsetWidth ? "19px" : "3px");
}

This seems to be working reasonably well, as it does not mangle the size of the element when there is no need for a scrollbar, and it bumps up the bottom padding to make way for IE’s scrollbar.

There are some downsides, like the expression is probably being over-evaluated, and it relies on a proprietary IE feature (expressions), so I may reevaluate this in the future. But for now at least my blog is (more) readable for IE users.

Technorati Tags: css, ie, scrollbar