CSS Rounded Tabs

As an addition to yesterdays post about CSS Best Practices; sometimes I wonder if I will ever live to see the day when CSS rounded tabs would be a simple process? I’ve spent damn near 24hrs trying to get it to work. Here is what I mean:

I’m not asking for sharks with freakin’ laserbeams on their heads! I came so close, but as soon as you try to adjust paddings or whatnot for that one pixel difference, it all falls apart. I think anyone who try’s to accomplish “tableless layouts” is a fool! Using tables, and 20 minutes I acheived the desired result:

Not only does it line up perfectly in all browsers, but I could easily make the roundness not extend 100%. The idea on that, is I might want to put text links or icons to the far right side. Another bonus, is there are ready-made table cells available for an Icon sprite which I mentioned a few days ago.

It is very easy to layout a page like this using a simple table. It is just as easy whether the columns have fixed widths or variable widths. Flexible-width approaches like this one tend to be harder without using a table. My conclusion, is that tableless layouts are hype used to sell books. If you have the skills to develop a tableless-layout web site, you also have the skills to develop one with table-layout that is “Strict” compliant, accessible, efficient, flexible, etc. It validates, why not use it, what’s the problem?