I remember writing my first CSS page some years ago. It was a pain, especially since IE and Opera behaved quite different with the margins and stuff. But I fought through that and converted a whole site from old style table layout to a CSS one. After some more sites I finally found the new style not only better, but also faster to implement.
I’m sick of having to consider IE bugs when developing a Web site. I had my hopes on IE7 but I was disappointed yesterday when I found that it stills doesn’t work. Isn’t it time that we stop worrying about it? I think most users would start to use better browsers if most pages didn’t look good on IE.
Copy & paste the code below to embed this comment.
Richard Eskins
Thanks for the article Ben. I’ve been teaching web design for around 10 years. Your article rings bells for me as I’ve wrestled with CSS in the same way, over the same period as you illustrate. For me the struggle is in teaching it to students, with a varied range of skills. Tables where doable, simple at a basic level but could get complex for those that required and understood it.
In class a mistake in a table was reasonably easy to spot (and fix). With CSS it’s a whole different kettle of fish!
Students often run before they can walk. The create layouts with a multitude of divs, classes and id’s without fully understanding what each element does. Trying to spot the error is almost impossible. How far back in the cascade of styles does the root cause of the error lie? Or is it a browser compatibility error?
As an Information and Communications department, we’ve always taught from a standards / usability / accessibility standpoint. Getting the combination with CSS definitely isn’t straight forward!
Copy & paste the code below to embed this comment.
David Fox
There’s one other advantage to semantic, fully valid XHTML markup. When you have an XHTML website, you have all your content in XML. You can then use all the great XML tools available to extract data from your site extremely easily. This is especially easy if your content is correctly marked up semantically, as the same advantages to CSS are available to you using DOM. We are even able to easily push our content to one of our partner sites, transforming it to their non-semantic markup with XSLT!
Copy & paste the code below to embed this comment.
Aaron Burrows
I work in a company where we manage sites for several in-house brands. The brands are always on us about pixel-prefection and “branding”. Unfortunately what they don’t grasp is that their branding should be more focused on their content than the imagery. Our sites are currently a hybrid of CSS designs and table-based. I’m beginning to have an influence on migrating to standards-based design. The hard part is convincing print-oriented designers that it works, and is the better solution.
As for whoever said, “Thank you. I’m a crazy CSS fanatic but still recognize that in some ways tables really do handle things better. Anyone who doesn’t recognize that is sticking their head in the sand.“ I must be sticking my head in the sand, because I can make CSS layouts do far more than tables could ever achieve. It took me a while to make the plunge, but I’m never going back.
I would disagree with using css hacks, only because as other posters have said, there are other ways of doing it (conditional comments, etc.). My opinion is that it may be good to be backwards compatible (or sideways compatible) but at some point you need to start providing markup that is future-proof. I’d rather read a plain-text website than a broken mess of td’s and rows that place content all over the page with no logical flow.
I read ALA lots & lots, but missed this one when it was published. I just caught the interview you did with Paul Boag, and I too am thrilled with this. Thanks!
{it’s probably listed in the comments, but if you’re running late like me, here’s the interview: http://www.boagworld.com/archives/2006/11/podcast_57_afraid_of_standards.html
58 Reader Comments
Back to the ArticleMichael Balles
I remember writing my first CSS page some years ago. It was a pain, especially since IE and Opera behaved quite different with the margins and stuff. But I fought through that and converted a whole site from old style table layout to a CSS one. After some more sites I finally found the new style not only better, but also faster to implement.
Javier Centeno
I’m sick of having to consider IE bugs when developing a Web site. I had my hopes on IE7 but I was disappointed yesterday when I found that it stills doesn’t work. Isn’t it time that we stop worrying about it? I think most users would start to use better browsers if most pages didn’t look good on IE.
Bernard Uses
Thank you for this support.
It’s clear, concise and helpful.
Richard Eskins
Thanks for the article Ben. I’ve been teaching web design for around 10 years. Your article rings bells for me as I’ve wrestled with CSS in the same way, over the same period as you illustrate. For me the struggle is in teaching it to students, with a varied range of skills. Tables where doable, simple at a basic level but could get complex for those that required and understood it.
In class a mistake in a table was reasonably easy to spot (and fix). With CSS it’s a whole different kettle of fish!
Students often run before they can walk. The create layouts with a multitude of divs, classes and id’s without fully understanding what each element does. Trying to spot the error is almost impossible. How far back in the cascade of styles does the root cause of the error lie? Or is it a browser compatibility error?
As an Information and Communications department, we’ve always taught from a standards / usability / accessibility standpoint. Getting the combination with CSS definitely isn’t straight forward!
David Fox
There’s one other advantage to semantic, fully valid XHTML markup. When you have an XHTML website, you have all your content in XML. You can then use all the great XML tools available to extract data from your site extremely easily. This is especially easy if your content is correctly marked up semantically, as the same advantages to CSS are available to you using DOM. We are even able to easily push our content to one of our partner sites, transforming it to their non-semantic markup with XSLT!
Aaron Burrows
I work in a company where we manage sites for several in-house brands. The brands are always on us about pixel-prefection and “branding”. Unfortunately what they don’t grasp is that their branding should be more focused on their content than the imagery. Our sites are currently a hybrid of CSS designs and table-based. I’m beginning to have an influence on migrating to standards-based design. The hard part is convincing print-oriented designers that it works, and is the better solution.
As for whoever said, “Thank you. I’m a crazy CSS fanatic but still recognize that in some ways tables really do handle things better. Anyone who doesn’t recognize that is sticking their head in the sand.“ I must be sticking my head in the sand, because I can make CSS layouts do far more than tables could ever achieve. It took me a while to make the plunge, but I’m never going back.
I would disagree with using css hacks, only because as other posters have said, there are other ways of doing it (conditional comments, etc.). My opinion is that it may be good to be backwards compatible (or sideways compatible) but at some point you need to start providing markup that is future-proof. I’d rather read a plain-text website than a broken mess of td’s and rows that place content all over the page with no logical flow.
chas roberts
I was needing to know where is the images for article #192?
So, we can see how and where the images work with the code.
Thank you very much and we like your web site. It helps us all in class.
Alan Houser
I read ALA lots & lots, but missed this one when it was published. I just caught the interview you did with Paul Boag, and I too am thrilled with this. Thanks!
{it’s probably listed in the comments, but if you’re running late like me, here’s the interview: http://www.boagworld.com/archives/2006/11/podcast_57_afraid_of_standards.html