My problems with CSS
It's all very well working from home and having a teacher for a girlfriend, but it means you have an unproductive week or two, every now and then. Last week was half-term so I didn't get much time on the PC. What time I did get was spent mucking about with CSS.
Everywhere you look there are articles about CSS, large companies converting their sites and reams of amazing looking sites. There's no doubt CSS is the way forward, but I still find myself looking back fondly at the days when it was the norm to use tables to position page elements. It was so easy, made sense and just did what you expected.
The trouble with CSS and me is that I can never get it to do exactly what I want, easily. All these floats, clears, relative absolute DIVs! Sometimes what you want to do seems so simple but always ends up being a mess of hacks. Just when things seem to make sense and work, you check it in a different browser and get the shock of your life. It's a pain!! Take my latest site for example. It's a simple layout but I've been as confused as ever by how to lay it out using CSS. In the end I had to settle for two DIV elements with absolute positioning. That's before I even tried to add a footer...
I can see why CSS is the future and that tables are not a good idea. I just wish CSS-P was more intuitive. For now I will have to continue "borrowing" CSS of the big-guys.
Skip to the 
You can subscribe to an individual
If it wasn't for your article on Validation with JS and the sample downloadable dB, I probably wouldn't have started dabbling myself.
Just when you think you'll never have to hack anything more than you do domino, then CSS comes along.
When I retire the only hacking I want to do is in the rough just off the 18th fairway!
Here, here, Jake. I'll raise a glass to that. Next round's on me.
Having had a go'round with this, I think I've settled on the notion that tables are sometimes the only way to get things done properly. It's still valid HTML, after all. CSS has it's limits, but it's handy here and there as a styling tool... as for layout, it's all pain and agony.
Well that's a relief - I thought it was just me and that all you developer types thought it was the bees knees.
Actually it's traditionally "hear, hear!" not "here, here" though it may depend on the situation :-)
THE BEST suggestion I've ever seen (and one I truly wish the W3C ninnies would adopt) was by Ned Batchelder. His suggestion? Allow tables using CSS. Not display: table-row and all of that nonsense (you need to create an HTML page that's already structured as a table, using a <div> or a <span> everywhere a <table>,<tr> or <td> would live), but a "mirror" table that lives on the style sheet itself, with element classes or ids plugged into the appropriate place on the style sheet. Your HTML/XHTML/XML remains pristine -- the table is just a figment of the style sheet's imagination. You get all of the benefits of semantic markup and all of the best of table layout. Would that be cool? I sure think so.
I would echo Stan Rogers comments-- don't try going hardcore "pure" XHTML+CSS right off the bat. The "most bang for your buck" is to start using CSS where it excels-- on text formatting and semantics-- and use (as few as possible) tables for your main layout.
If you're a book learner, the best tome I have read on the subject is Zeldman's "Designing with Web Standards". His style is very readable (dare I say entertaining?) and his approach is very reasonable. He focuses on getting work done in the real world-- not chasing some theoretical holy grail of using only pure XHTML/CSS, even when it hurts.
Mezzoblue ({Link} and his CSS Zen Garden ({Link} are also great sites to get your feet wet and find some practical help.
Dave, I think codestore actually IS the place, where I first found links to the Zen Garden and Mezzoblue.
Well, for what it's worth: I still keep to your "beginner's" approach: Using tables for structuring the page, whenever it looks easier to me and CSS for the rest.
Practical example - The site i'm currently building (corporate) is going to be fixed width, there's a set of navigation "tabs" across the top and they have to fit the width of the page. That is, each one has to be at least the width of the text (plus padding) and at most wide enough so that they all fit without wrapping. Not all the tabs are the same size, eg. one could be as short as "About" and one could be "Corporate Stuff".
I don't believe that can be done with just CSS, but feel free to correct me if i'm wrong :) With tables it's just a table that's 100% wide with a cell for each tab, all the stretching is done for me by the browser.
I'm with you on this. The div's are pretty unruly if you haven't thought of every circumstance. I tend to use a mix. The big picture layout uses CSS div ids and for views I mostly want a table structure so I don't even try using divs. However some views are constucted specifically to take advantage of the CSS divs; then it's a case of knowing what you want and experimenting until you get it. I could only wish that the W3C standards were in plain english, or at least friendlier explanations. Oh, and more examples, that's always a help.
I'm glad you said this. My site uses tables, and it's dead easy to get everything right in all browsers. I'm now redeveloping the site with CSS positioning and it's a bit of a trial. There's seems to be a lot of CCS snobbery on the web. I can see that in a year's time when I decide to revamp the site again, a total CSS implementation could potentially make things easier. But there's a lot of pain involved in getting it to that state... and I'm not 100% convinced I can be bothered. I agree with Bruce - a mix, using CSS where appropriate, is wholly acceptable.
It's not CSS snobbery, Darren; it's semantic snobbery. Yes, tables work well for layout. They also tell whatever device is reading your markup that there's a table of data to be had. That's a BAD thing, especially when you consider that the only people who would care about such things are the ones who are most dependant on truth in markup because they can't see the wonderful results of your layout table. That is wholly UNacceptable. Exactly the same thing can be said of sites that use gratutitous spans and divs in order to format and position with CSS. It's just plain wrong.
Frankly, I'd rather put together something a little on the drab side that is true to the data. If all I want is layout, I'll use Flash -- an environment that gives me real control. We're dealing with information, not entertainment -- even in the commercial space. Can we not treat it as such? We get obsessed with pixels, we lot, and we shouldn't.
Oh, Dave -- I have no idea what you were echoing, there, but it wasn't my comments. I mentioned that there was a formatting solution posited that would conform perfectly to the idea that content should be divorced from presentation, and that it would allow the use of something like tables IN THE STYLESHEET (not in the HTML).
This whole HTML thing sounded like such a good idea when I was coding for Lynx. Throw a couple of pictures into the mix, and suddenly none of the original tags matter. That's what it's all about: simply using the tags from HTML 1.0 the way they were intended to be used. Have we really not gotten that far yet?
I think Dave was echoing what I said... using CSS for its strengths - styling.
I have to agree, Stan... if precision, complex layout is an absolute requirement, something like Flash makes sense... even though many folks dislike the bandwidth consumed.
Interesting comments Stan, but you also have to put other considerations into the mix. What I mean is this... my site is purely a hobby for me, I get about 200 - 300 hits a week (God knows who from), but it's not for commercial purposes, I'm not selling anything, it's not mission-critical, and if one week it wasn't there no-one would really care that much. So why would I make the design work and upkeep difficult for myself? As long as it works in Internet Explorer and Firefox I have 98% of a small audience catered for. Now, if this was a site with really valuable info that tens of thousands of people consumed every week, I'd agree with you totally as the content becomes the overwhelming important factor.
I'm no expert on CSS, but I've noticed the hardest part of CSS for layout design is understanding the floating, positioning and the box model. Unfortunately I only "got it" after playing with for a day or so in my free time. After that you don't need many "hacks" to work with IE.
I'd hope that there are plenty of simple explanations out there, if not, maybe I'll write one :P. But untill you understand the box model, using CSS to do layouts is probably a bad idea, but once you do, you'll never look back at tables.
As to the comments about HTML tags not being used properly and using Flash instead. Flash is a bad idea unless you want to go wild with multimedia and design stuff.
Most folks (IMHO) just don't realize that CSS can be used with ANY tag and they don't know that there are LOTS of tags out there(code, acronym, etc) and even some cool attributes(like title). Add id and class and you can do a great job of using HTML tags properly. But Flash... that's like using a bomb to blow up an ant hill, can we say overkill? Plus the Flash learning curve is WAY higher than CSS and HTML combined after you get past the simple stuff.
I'm just glad there are folks like Jake and others who work hard to make these kind of resources and explanations available in one spot. So thanks!