So, we need a nice little cute of our page to have round corners. Cool. The easy way? Do a table with 8 or 9 images, depending on the background, if its a solid color you only need 8 images, a pattern, you need 9.
The next step if to have some freak Table-less guru telling you all that is wrogn and that you should use “simple” divs and css to style it. Ok, thats nice but all those tecniques are pretty when you are a designer that won’t build some logic to that. Or when we are talking about some fixed size element, like a button or a static menu entry.
So, they will prontly tell you about how simple it is to extend that, the easiest way, is to create 2 images, 2 nested divs and apply a CSS rules that will provide the parent div with the left side of the image and the nested div will have the left side. This means, if you don’t know the real with of the image (like a Tab) you create the right image not with the testing text size but with some spare size, something like 200px that should be enough to most cases. Problem solved. Is it?
What if you don’t know the height too? Hmm… then you have to create not only 2 images but 4. For example, left-top with 5×5 px, right-top with 195×5 px and finally the left-bottom with 5×195 px and right-bottom with 195×195 px. Hmm… things got nasty… didn’t them?
Now, I’m doing some template, control, designer tool, whatever and I do no have a clue about what’s going on on the customer/designer’s end, so I do not have a clue on the size the thing can have. Or, putting it pretty simple, the corner is to a page-wide effect… that usually means something near 1024xYYYY px. Create some more nested divs, nested images, what ever…. This is boring, just create a table, will ya?
Conclusion
Instead of trying to get the real problem, people are trying to create hacks that won’t really fix the problem, short, mid and long term wide.
What if, we simply extended CSS/HTML to provide this kind of logic? Better, what if, we created a new image format – actually an image container – that would allow us to define whats the left-top, right-top, left-bottom, right-bottom, vertical pattern and horizontal pattern. That would allow us to, in a few years when the standard would be widely implemented, solve this, and some other, questions without the need to ugly hacks and possibly creating tons of huge images to try to fix the problem.
And if you think I’m stupid, I’m not right, whatever, should still use CSS, see what happens. In this article we ateachedhed how to do rounded corner tabs and we learn the basis of ttecniqueque. See here the result. Now, simpincreveeve the font size (Control + +) and see the effects of those “accessible-menu-tabs”.
Thank you for talking about ‘almost a taboo’ the tablebased design. I totally
agree and this is a nice example.
You can’t do perfect layouts without tables. Instead of nested tables, these gurus are nesting tables within divs.
Table-less sites do not load faster. You
need to have a 1 MB css file in order to replicate what a table could do by default.
No way are they going away.