stevenclark.com.au

If you’ve been following the launch of Hunter Island Press over the last 24 hours you might have noticed a bumpy ride. Most obviously floats going all over the place and various magenta borders being applied to all and sundry as I was madly trying to track down an intermittent issue in Firefox. Yes that was our favourite buddy Firefox draining my hours away (not Internet Explorer this time).

Problem: Intermittent Haywire Floats in Firefox

The problem in Firefox was that clicking around the site intermittently sent the floated layout into chaos in the content rich footer (and to some extent on a side element called galleria which has thumbnails of recent member galleries). Basically they forgot to clear and ended up stacked instead of floated in the layout. But only intermittently.

display:table in Firefox has Issues

The problem was finally tracked down (as was a very early suspicion I had) to the display: table used in the stylesheets on some containers. The three ways to get your floated elements to be properly contained are to use:

• overflow: auto;
• overflow: hidden;
• display: table;

Cure: Use overflow instead of display: table

Simply exchange display: table with an overflow (so it still contains the floats correctly) and you’re away. The saying in this locale for that would be: now Bob’s your uncle.

I think the annoying aspect of dealing with this issue has been that it was intermittent - and they are bastards to track down from a time perspective - and that the offending browser was Firefox. Why it struck me on this project is because I don’t usually use display: table; but have tended to over-use it lately. Anyway, live and learn. Hopefully this post will save time for others down the track.

This entry was posted on Sunday, February 17th, 2008 at 10:34 am and is filed under css, web standards. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.