Peek-a-Boo Floats and Other CSS Mysteries

Update: for more on troubleshooting Internet Explorer bugs and glitches, see this post.

Until recently, my work with CSS had been limited to prettying up site contents, using stylesheets to control or change text, link, background, and paragraph formatting. (Even at this basic level, you can create some nice effects, using CSS for font size and colour, mouse rollovers, margins, borders, vertical spacing, and so on. See Eric Meyer's Definitive Guide to Cascading Stylesheets for an excellent guide to this topic.)

Like many, however, I continued to use HTML tables for layout, aware of what was possible with CSS but nervous about going the distance. But stylesheets provide so much more capability, including precise control over layout and positioning of all the elements on a web page. You can create a nested two-column layout (as I have done at WebLens) with nary a table cell to be seen! With the WebLens re-design, and Shutterscribe before it, I became determined to take full advantage of the powerful capabilities of stylesheets for layout.

Once the world of FLOATs and DIVs opens up, there's just no going back, though I quickly discovered that positioning is a complex subject, with a steeper learning curve than anticipated. This was partly because of browser implementation issues and other perplexing glitches that CSS purists don't like to talk about. One of these is known fondly as the peek-a-boo float: a crazy-making bug wherein certain content mysteriously disappears when you take some mouse action. In the case of WebLens, the left-hand column persisted in playfully vanishing every time I moused over a link on the right-hand side!

Fix: I just about went nuts troubleshooting this and other problems, until I discovered some excellent fixes and workarounds. Among these: try experimenting with height and/or width of the containing and/or floated DIV, or adding the argument {position: relative} to one or both DIVs. These fixes and others are described in John Gallant and Holly Bergevin's article, How to Attack an Internet Explorer Display Bug. MaxDesign provides some useful strategies in their excellent Float Tutorial, and there's lots more good CSS introductions and troubleshooting resources among WebLens' web design links.

A final note: sometimes, stylesheet problems are due to the complexities of the cascade and the intricacies of CSS inheritance rules. When a style declaration is not behaving as expected, try inserting the !important attribute just before the closing semi-colon. This usually over-rides the cascade and achieves the intended effect. This tip comes from CSS guru Eric Meyer. His book, Definitive Guide to Cascading Stylesheets, is among the best introductions to CSS available.