A lesson in caution on using the tag for wide-margined text
by Josh Staiger
We have yet to develop a good method for displaying inline code in html documents, and as it turns out this is exactly what bit me with the previously mentioned IE6 problems with displaying this site.
The culprit was my previous entry: A tale of woe on dynamically building the Movable Type Individual Entry Archive template.
In that entry I cited a few snippets of perl code, inline with the rest of the html for the entry. Naturally, I surrounded this code with a <pre> tag, as this is the easiest way to preserve the spacing and indentation of a code snippet.
It just so happened that the pre-formated code that I had included for that particular entry happened to be quite wide - wider than the <div> it was enclosed in.
What happens when <pre> text overruns the boundaries of <div>'s and other enclosing tags that contain it?
As it turns out, the answer depends on the broswer.
In Firefox, the <pre> text simply runs through the boundary of the <div>:
This is ugly, but it does not catastrophically alter your page layout.
Internet Explorer 6 behaves differently, however. Instead of allowing the <pre> text to overrun the <div> as Firefox does, it expands the <div> outwards to contain the <pre> text:
Unfortunately this can unexpectedly cause elements situated to the right of the enclosing <div> to be crowded out.
In my case, in IE the entire sidebar column of my page was crowded out and pushed all the way down the page, below all of my main page entries.
I've corrected this now by reformatting the <pre> text in the entry so that it isn't quite as wide, but the problem went unnoticed by me for weeks (I don't generally use IE6), and the fix wasn't especially obvious once it was pointed out to me that my page wasn't displaying correctly in IE6.
The moral of the story is to be careful not to place <pre> text on a page that has a high probability of overrunning the normal width of the <div> that contains it. Attempt to reformat <pre> text so that it will not surpass the boundaries of the element that contains it, and just to be safe, give your site a quick check in IE6 if you're using <pre> formated text.