When the HTML pre element uses the CSS width and overflow: auto properties, code that doesn't fit within the width of the pre element is clipped and a scroll-bar appears which can be used to view the remaining code.

However, when it contains only one line of code, we see a couple of issues in Firefox 3.6 and IE6. Here is a sample page that demonstrates the issue: http://susam.in/files/notes/css-hacks/pre-overflow/pre-overflow.html. Here is the CSS used for the HTML pre element.

pre {
    border: 1px solid black;
    background: #ddccff;
    width: 20em;
    overflow: auto;

Firefox 3.6 doesn't display the scroll-bar if the pre element contains only one line of code. It is still possible to scroll the code though by using the arrow-keys on the keyboard or selecting text in the code with the mouse and moving right.

Screenshot of the output in Firefox 3.6
Output in Firefox 3.6

Chrome does the right thing and displays the scroll-bar.

Screenshot of the output in Chrome 11
Output in Chrome 11

Internet Explorer 6 always hides the last line of the code behind the scroll-bar. Therefore, when there is only one line of code, the scroll-bar hides this only line of code and no code is visible.

Screenshot of the output it in Internet Explorer 6
Output in Internet Explorer 6

1 comment

Matthijs Kooijman said:

I've been struggling with the same problem and managed to fix it by making the pre box slightly bigger. I'm now using min-height: 2.5ex; to make it slightly bigger than one line of text, which fixes the problem at least in Firefox 5, Firefox 6 and Chrome 13. I haven't tested it in IE.

An alternative fix was to apply padding-bottom: 3px; to the pre element.

Post a comment