Years since CSS enabled us to retire the humble HTML table and write properly semantic code, it is still common to hear hissing and whining from old school coders who are reluctant to update their skills and learn to code by contemporary standards.
When you look for help with tableless CSS on Stack Overflow and other amateur coding forums, you can expect to be trolled by some pimply face kid, “dude, what are you doing… don’t be so puritanical” and, “that’s not possible in CSS, just use tables” and other ill informed ideas that assume tables should still be used for structural code elements.
Regardless the CSS haters it is not 1998 anymore and the use of tables for non-tabular data should have been abandoned with the introduction of ie6 nearly a decade ago. But for now let’s hold to the topic of this article and go into the reasons why tables are a bad idea in another post.
Perils of The (Not Quite) Perfect Tableless CSS Image Gallery
If you’ve started down the path of producing semantic valid XHTML and CSS code, and have produced a tableless CSS image gallery using an unordered list, you’ve either run into the following layout quirks, or you’re about to. So let’s take a look at what tends to happen in this not quite perfect tableless CSS image gallery before we tackle giving it bulletproof support for all browsers. Yes, even for Internet Explorer 6 and 7 too.
When CSS layout implosions like this happen, there’s often temptation to revert to tables since they require very little thought to implement and tend to offer some cross-browser robustness, especially for buggy browsers that are difficult to code for. Enter ie6 and ie7.
In a tableless CSS image gallery that uses an unordered list and has all its rows full with no empty space in a remaining “cell” you won’t immediately notice your floats are collapsed because the following content has no void in which to be sucked up into. But there will be no way for you to create space between the CSS image gallery’s unordered list and the following header element until you clear the floats.
Any bottom margin or padding on your unordered list will be ignored by the browser until the floats are cleared. Top margins and padding on the following header element will also be ignored by the browser.
Fix Your Tableless CSS Image Gallery So It Can’t Be Broke, in Any Browser, Ever!
Our tableless CSS image gallery needs to produce the same robustness we came to expect when using HTML tables. It will have full support for all browsers right back to ie6 without using any nasty browser hacks, tables, or non-semantic code. This tableless CSS image gallery really is going to be absolutely bulletproof.
First let’s take care of the vast majority of browsers by clearing the internal floats in our unordered list. Chris Coyier discusses several techniques for clearing floats towards the end of his article All About Floats. And you can get other great info on clearing floats at Quirks Mode. In this example I’ll just show you the way I like to clear them.
My preferred method of clearing floats uses the
:after pseudo-class selector. You can simply drop it into your stylesheet along with a comma-separated chain, including each Div ID and Class you commonly need to clear. After that you can pretty much forget about clearing floats altogether.
This method works with all modern browsers like Firefox, SeaMonkey, Safari, Opera, Chrome and even ie8. Unfortunately ie6 and ie7 didn’t get the memo about the :after pseudo-class selector. But that’s okay, we’ll fix them after.
HasLayout Fix for Internet Explorer Bugs
Adding ie6 and ie7 support to your tableless CSS image gallery is just a matter of triggering HasLayout so that ie6 and ie7 treat the unordered list’s internal floats as cleared. To do this you just need to add
width to the unordered list in our CSS file.
margin: 8px 0px 22px 0px;
Now that you have cleared the floats and triggered HasLayout your Tableless CSS Image Gallery with Bulletproof Browser Support for all browsers will look something like this:
You can remove the text descriptions from your tableless CSS image gallery but remember to adjust the height attribute for the list item in your CSS file so the border sits where it should. Download zipped example files to see the full code.