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 {
   /*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.

Copyright © 2004-2011 Anirudh Sasikumar. All rights reserved.
Last Updated: January 21, 2005 4:35 PM