I am one of the many coders who subscribe to the idea that web applications are best made through a nice balance of CSS and Tables. Whenever I hear someone touting a tableless CSS design, I cringe. This is the first in a many part series to prove that tableless CSS is simply fanboyish zealotry, if not completely moronic.
..:: The Challenge
One of the CSS rules says that you're not supposed to use tables for anything except displaying data (statistics, charts, etc). In this challenge, you're required to make CSS layout that is synonymous with the following code:
1. <table>
2. <tr>
3. <td width=70%>Cell 1</td>
4. <td>Cell 2</td>
5. </tr>
6. <tr>
7. <td colspan=2>Cell 3</td>
8. </tr>
9. </table>
This is for a series of repeating preference options in a form (lines 2-8 will repeat in a for-loop). Cell 1 has the option name. Cell 2 has the option modifier (select box, radios, checkbox, etc). Cell 3 has a description of what the option does.
..:: Constraints
With any sort of code, there are constraints.
- The example is written in html tables. If you cannot vizualize this layout in your head, do not reply. This is the first hurdle of competency.
- You must either completely forgo the float property OR you may use float, if you verify that it works with a scriptaculous slider object in Cell 2. Apparently a lot of AJAX is drawn like scriptaculous sliders, so a lot of AJAXy objects break with the float property.
- Your code must work perceptually on multiple browsers, particularly IE5-7, safari, opera, and FF1-3. No browser specific code is permitted.
- Do not include any unnecessary code (margins, padding, fonts, borders) unless it is specifically required for the problem.
- Your code must be 100% semantic. That is, the markup for Cell 1 must come before the markup for Cell 2, which must come before the markup for Cell 3. You also are not allowed to use [un]ordered lists. Form elements are not lists.
- The line down the middle of the grid (odd rows only) should be at 70% of the max object width for all objects. Thus, cell 2 should line up all the way down the page, regardless of the actual contents of cell 1.
..:: Bonus Points
You get bonus points if you can meet the following:
- Making the code work perceptually right is a requirement, but making the code CSS compliant is for bonus points. Pick your level of compliance. I don't care, but all of the code (CSS and html markup) must validate with W3C in some shape or form.
- A bunch of CSS nuts argue that bandwidth is a big issue. Since bandwidth really depends on your character set, we'll just go by characters. The table implementation requires 66N + 15 characters where N is the number of preferences we have (the main table markup is 15 characters, and then the loop outputting the rows is 66 characters). Thus, if you get bonus points if you can beat 66N + 15. Since CSS implementations supposedly use lower bandwidth than tables at higher orders, assume there are 10 (or even 20) preferences. Thus, if you can meet the constraints and do it in less than 675 characters (or 66N + 15), you get bonus points. To give CSS the further benefit of the doubt, id and class names, regardless of length, will be counted only as 1 character.
..:: Final Note
This is not a work or school project. This is my software engineering side wondering how a lot of the CSS zealotry is supposed to make sense. Also, I personally haven't updated any code on this site since the winter break of 2006/2007, and I know that a lot of the ways that I've done stuff on this site is crap code. This is my own home-grown CMS, with home-grown CSS, and I haven't really been devoting much time to it. In other words,
don't bother with personal attacks. I'll just delete them. Post your answer in the comments.
..:: Update
Apparently this is too hard. Try it with float allowed. You'll still have a ridiculous amount of problems doing this simple top-left-top-right-bottom-full (TLTRBF) layout problem.
Post Last Updated: Jan 3, 2008 2:48 pm
