June 23, 2004 3:23 PM
Some of you would have noticed that the code in the Code Archives page
used to overflow out of the white background when the line was really
long. Of course, Internet Explorer does not have this problem. It
automatically wraps the text (at least in IE6 standard
mode). Initially I had thought about using the <code> tag to
preserve whitespace and formatting. But even though the tag is
intended to be used for code, it doesn't preserve whitespace. Using
the CSS styling property, white-space:pre seemed to be an obvious
solution. Alas, versions of Internet Explorer lesser than 6 does not
support the white-space property. The next alternative was to use
the <pre>1 tag which preserves whitespace. But this causes
the overflow which some of you might have noticed. I finally fixed
this.
The solution is to use the overflow:auto property for the
<pre> tag. This brings up scrollbars automatically when an
overflow happens. Sadly, Konqueror 3.1-12 still doesn't show any
scrollbars.
pre.fontlock { white-space:pre; overflow:auto; /*Other properties*/ }
Setting a background-color property for html sets the outer
background color only in Internet Explorer versions 6 and above. It
works in Mozilla and Konqueror, of course. Finally created an outer
container div to set the outer background for all versions of
Internet Explorer.
I had seen the styleswitcher script in action for the first time at the Linux From Scratch website. Changing stylesheets using javascript is pretty cool. Read the full article here.
[1] In emacs-wiki using Satyakid's implementation of htmlfontify,
the pre.fontlock tag suffers from this overflow problem too.