Flexibility makes working with CSS easier

Chris Heilmann makes some important points about the need for designers to accept that the web is a flexible medium in CSS is not hard to learn - if you recognise it for what it is. Let your design be flexible instead of rigid and you will avoid lots of frustration when creating CSS-based layouts:

A web page that looks and works exactly the same across different browsers is most likely neither accessible nor easy to maintain. A web page that is well structured, allows for flexibility and improves visually with the sophistication of the user agent is both.

Chris also mentions the horrible hacks we had to use back in the days of table layout and tag soup. I too remember doing some insane things. For instance, creating a one pixel border around each cell in a table involved nesting one table inside another, setting the background colour of the outer table to the desired border colour, and then using cellspacing on the inner table to let the outer table appear between the cells. All of that was done in the HTML, of course.

Posted on November 12, 2005 in CSS, Quicklinks

Comments

  1. creating a one pixel border around each cell in a table involved nesting one table inside another […]

    Guilty.

    And I can’t tell you how thrilled I was when I “discovered” this technique! What’s amazing is that it’s still OK with many (most of?) the web designers/developpers today.

  2. I totally forgot about using outer tables to make proper borders! It’s been so long since I’ve switched to CSS that I don’t think I could make a site the old way if I wanted to…

  3. Fortunately I only ever did one single solitary table site for a university unit in first year… I took to CSS like a fly to poo and haven’t looked back.

    I just found nested tables and all the little efforts insanely tedious. Whereas now I feel in control of the layout instead of being its bludgeoned plaything…

    Its hard to believe those ways are still widely taught in most colleges and uni courses here though.

  4. November 13, 2005 by Jonathan

    A web page that looks and works exactly the same across different browsers is most likely neither accessible nor easy to maintain. A web page that is well structured, allows for flexibility and improves visually with the sophistication of the user agent is both.

    Amen!

    I’d just like to thank Chris for writing this article, and Roger for linking to it. It simply explains all my own thoughts on CSS. BTW, the thing about the ducks really made me laugh.

  5. I’ve never understood pixel-perfect design across all platorms across all browsers.

    My favorite was tables with collapsed cells and/or rows in tables nested in cells. [Though I’ve read that spacer images are making their return.]

    How many - other than developers - fly between platforms/browsers? expecting to find pixel-perfectionism and know which design was the orginial design?

  6. Cheers, now go and prove that you can design flexible CSS, I want to get the shed going: Take the CSS challenge

  7. November 13, 2005 by Roger Johansson (Author comment)

    Chris: I saw your post about the CSS Toolshed. As much as I’d love to, I have no time to submit a design at the moment. I’ll post a link about it though - hopefully that will get you some submissions.

  8. I just had a great experience migrating my old static site into a Wordpress environment. I thought it was going to be a nightmare but was pleasantly surprised to find how easily the content in my semantically coded site could be moved and styled.

    I’ve already been a standards-convert for some time, but this put another little feather in my cap! ;o)

  9. I’m just glad that I’ve never built a tables-based site from scratch (although I’ve had to maintain them of course). I originally made sites back in ‘97 or so using frames ( :) ) and then got back into it a couple of years ago by jumping straight into CSS+standards design. Using tables for layout feels pretty alien to me.

  10. November 14, 2005 by DianeT

    I remember all too well my days designing with nested tables - and I remember the headaches of maintaining them too. I switched to CSS and have never looked back.

    What gets me is that design firms are still using nested tables. I check out the portfolios of local firms just to see what I’d be up against if I went freelance and it just floors me looking at the source code for all of their sites and finding nested tables, NO standards compliance - not even a DOCTYPE - and barely a trace of ANY CSS. IF they have CSS, its strictly for styling text, font tags still abound. ACK !!

  11. “It’s been so long since I’ve switched to CSS that I don’t think I could make a site the old way if I wanted to…”

    Ditto on that.

    In fact, there is an old website of mine that a client has asked me to update and I can’t even work on it in code view because I don’t understand it anymore. I use the design view just so I can get the work done.

    I should probably convert it to CSS, but I can’t convince her to pay me for something that was my fault in the first place, and i don’t feel like doing it pro bono.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.