Those of you that read this on Windows systems have probably found that the content occasionally lays out a bit oddly, such that the top graphic has a white gap within. Thanks to some help from a couple of CSS wizards, I think I’ve identifed – and solved – the problem.

If you’ve done a “view source” on these pages, you’ll already know that there’s a separate (and quite long) CSS stylesheet called styles-site.css. Within it is one critical entry, lsidetitle, that’s used for the link of other blogs and recommended books on the left side of the main page. Its CSS looked like this:

.lsidebox {
width: 80%;
margin-top: 10px;
margin-left: 10%;
border: 1px solid #531;
padding: 0px;
text-align:center;
}

The problem arose when the content of the sidebox proved to be wider than the 80% of the width of the table column allocated: where did the excess go? By default it appears that Internet Explorer for Windows just forced the table column to be wider as needed, breaking the top graphic.

Browsers on the Macintosh, including both IE and Safari, worked differently, letting the text cascade over without widening the table (producing overlapped text).

The fix? Two-fold: remove the width:80% style and add an additional style that informs the browser that it should clip material that doesn’t fit within the box: clip:rect(). And the new version should hopefully work just fine now.

Special thanks to both Bo Leuf and John Locke for their help debugging this.