Digital Web Magazine

The web professional's online magazine of choice.

Everything You Know About CSS Is Wrong : Comments

By Rachel Andrew

October 21, 2008

Comments

Damien

October 21, 2008 10:51 PM

Good article. A lot of people talk about the semantic web, but it’s still a bit sad that the majority of them don’t get the whole ‘seperation of markup and presentation’ mantra. Score one for enlightenment.

Glen

October 21, 2008 11:45 PM

Brilliant! This is a true eye-opener and good example of how semantic markup can be clean and powerful, without the common CSS “hacks” like faux columns!

George

October 21, 2008 11:49 PM

Just tried the sample markup in IE7 and guess what – it doesn’t work. The technique is theoretically nice, but practically useless because no one would be able to use it in the next few years.

Guy Leech

October 21, 2008 11:58 PM

I’m with George here – it’s a useful technique, and great for experiments / personal sites, but IE7 (and even 6) are still going to be with us for some time.

Darren Wood

October 22, 2008 12:53 AM

I like this technique and I’m sure it’ll be super handy when it comes to laying out those large lists of side by side list items. What I’m a little concerned about is the accessibility impact. In particular the lack of source orderability (is that even a word?). Using the table/table-row/table-cell paradigm takes us back to a land where you have heaps of HTML before you get to any meaningful content. Or perhaps I’m being a little too anal about my source ordering?

AlastairC

October 22, 2008 1:15 AM

As this is a CSS technique, it should be able to degrade fairly well in IE6 & 7, you could even use conditional comments to provide a different type of layout for them.

However, not being able to control the source order is a definite problem for an overall layout. For accessibility and SEO I prefer content first then navigation. The fundamental aspect is that this technique doesn’t give you separation of content and presentation any more than using a simple table for layout.

A problem for within-content-area layouts is that you loose the ability to position items absolutely within relative blocks.

Unfortunately it’s not a bug, it’s written into how tables work:
http://alastairc.ac/2006/06/css-tables-verses-layout-tables/

Jérôme Coupé

October 22, 2008 1:30 AM

I stand with Darren and Alastair Campbell, the main drawback of this technique is the inability to control source order, which make us go back to the old days of tables layour in terms of accessibility.

However, I like the idea behind this (grid like capability for CSS). The Template Layout / Advanced Layout Module for CSS3 will give us that, while preserving freedom in terms of content ordering:

Mind you, that will only be a viable option in 10 years or so … probably ;o)

Rachel Andrew

October 22, 2008 1:37 AM

Thanks for the comments:

@AlastairC we do discuss the issues with position: relative in the rest of the book (this is just an excerpt) and I agree that this is the biggest problem with the technique.

We also discuss ways to cope with older browsers in some detail AND the upcoming Advanced Layout and Grid modules in CSS3. The book is a look forward to what is becoming possible with the launch of IE8. While we may not be ready to start building layouts using this technique today there is certainly stuff that I’ll be using to enhance layouts that will degrade well in earlier browsers.

Adam

October 22, 2008 2:14 AM

This is great. I work as a designer/seo guru at an agency and when i build my search engine friendly(sef) websites i insist on semantic markup. The draw back is ie6 and its brother ie7. But with a little practice i’m sure one can build a css/html template that will use two/three style sheets. Some companies are all ready doing this, supporting iphones and nokias + conventional browsers with a bit of user-agent php.

One more thing. How come I’m only learning about these css-tables now? I should grill my teacher about this, just wait I’m self taught.

Ads,

Kari Pätilä

October 22, 2008 2:34 AM

The thing that bothers me the most about CSS and the web in general, is that the standards aren’t really standards, and even though you aspire to adhere them you practically have to be a master of compromise to do so.

Standards bodies are hardly the place for innovation and experimentation, but that seems to be the norm when it comes to standardizing the web.

Erwin Heiser

October 22, 2008 2:48 AM

It’s a good book and it goes into a lot of detail on css tables but for now I see 2 major drawbacks: IE6/7 doesn’t support it (and there’s no telling how IE8’s uptake will be) and you lose the ability to position elements inside a “cell”.
What we really need to tide us over is a jQuery css-table fix for IE6/7 :)

Wojtek

October 22, 2008 2:56 AM

Interesting article. Looks like IE8 is going to bring something useful, after all… :)

Jonathan Snook

October 22, 2008 2:57 AM

The argument about source order is a valid one but to a point. To say that source order invalidates this approach may apply to a few situations but in others, this will be a perfectly practical approach to creating a consistent, equal-height column layout. Let’s not throw the baby out with the bath water, as they say.

Adam

October 22, 2008 3:05 AM

It sounds like a great concept, best used when you are dealing with fixed width (design orientated ideas).

The problem is, this doesn’t work very well when you’re not specifying absolute width or height in pixels. If you are specifying widths as a percentage (to make your site fit best with the browser) it starts becoming very buggy and unreliable.

Try making your table width 90% and remove any mention of height. After all, why do you need to specify a height if it’s all going to stretch automatically depending on content, just like a HTML table?

Anyway, now make cell 1->50% wide, cell 2->25% wide and cell 3->25% wide.
Then.. in the first cell, type a couple of paragraphs with some br’s in and see what happens. Did your content skip out of the table too or create a new column?

Obviously, percentage is an important aspect of making things compliant and accessible. Anyone who designs a fixed width site at 1024px is instantly going against the whole idea of accessibility (to work for everyone regardless of operating system, browser type, physical disability etc..

My own site will expand to 1024px width but also contracts relationally to 800 × 600 because there are still alot of people using it as a screen size. If I start fixing widths to make sure it looks nice on 1024px I’m instantly saying that I don’t care about anyone else with a lower resolution so they can have an additional horizontal scrollbar if they want to look.

At the same time, I’ve also got to do an alternative version for IE6 which doesn’t support the table-css. Alot of people still use IE6 so in that respect I may as well keep to using floats to ensure a better scope of browser support and less alternative bug-fixing code for IE6.

Personally, I’m going to stay clear of it for another year until it’s definately working on all browsers and the percentage of people using IE6 has gone down.

On the up side, I’m certainly looking forward to it becoming more stable though :)

Michael Freeman

October 22, 2008 3:39 AM

As many have said before, as long as IE6, IE7, and IE8 (in compatibility mode) are commonly used in the market, this will just have to wait.

Daniel Felton

October 22, 2008 4:36 AM

Great article and everything – but let’s be realistic, it won’t be feasible to use CSS3’s advanced layout features for at least 4 or 5 years, because even though IE8 will “implement” it, there’s nothing to say it will implement it correctly or well.

There is still disparity in how webkit and gecko interpret and render content using CSS3, so to talk about IE8 getting it right, in that context, shows just how crazy we sound.

Of course, I’m excited for CSS3, but there’s no way I’m going to delude myself that I’ll be able to use it in any real capacity for some time.

tiffany

October 22, 2008 5:50 AM

display: table; and it’s associated bits are also great for giving visual structure to XML data. I suspect this was the original reason for these properties.

Lucas

October 22, 2008 5:57 AM

The idea is quite good. But the main reason we use position and/or floating elements to displays columns and these kind of stuff is exactly that: “The compatibility with different browsers” And IE 6 and 7 still have a good market share portion.

Chris

October 22, 2008 6:11 AM

Great article — this is good information to know. Unfortunately, like what many others said above, with the laggards still using IE6 and IE7, we still have to adhere to stone age tactics or complex conditional statements.

Nevertheless, I look forward to IE8 gaining wide adaption and rolling out more friendly CSS in the future. It would be nice if Microsoft could figure out how to effectively initiate and prompt users to update their browser much like Firefox does.

Arun

October 22, 2008 6:13 AM

If and only if market share of IE6 & IE7 drops, until then no point in using this. When IE8 release it will be nightmare for web developers to support 6,7,8. M$ should do something to bring down IE6 at the least, its menace to productivity

Ally

October 22, 2008 6:14 AM

It sounds great in theory, but until we can stop supporting IE6 and IE7, whats the point of using this?

eric McGregor

October 22, 2008 6:38 AM

I have to weigh in here. Cute article, but this has no use in the real world. A lot of my clients still get hits from IE6, a web browser that can’t even get the basic box model right. We will never, ever be able to use markup and css to their full potential… ever. it’s just never going to happen.

licnyc

October 22, 2008 6:38 AM

Its ridiculous, according to analytics 50% of my users are IE6. That’s microsoft’s innovation for you- this information is completely useless unless I want 1/2 my visitors visit a different site.

The Peach

October 22, 2008 6:40 AM

@licnyc: can’t agree with you more. I want to cast a spell that makes IE6 vanish, from people’s computer and their mind :(

Gwen Lichtmann

October 22, 2008 6:46 AM

What a fucking joke. Compare the style sheet and html with html tables. This is less readable, hard to understand, the behavior is hard to predict and the code looks like adding a cake on top of another.
I know regular tables are wrong but this is silly. Tables are accessible to everyone, layout with css is only accessible to web designers.
Sorry for sounding harsh but I honestly think this avoids the core issue and instead tries to patch a solution on top of css.

/Gwen

fufter

October 22, 2008 6:51 AM

This is such old news. I left web design in 2003 and nothing really changed. CSS 3 is still a dream for real developers and it was back in 2003 as well. It sounds like I haven’t missed much since becoming a Java programmer and I don’t regret turning my back on the schizophrenic world of browsers, markup and style sheets.

noh weigh

October 22, 2008 7:01 AM

The emperor has no clothes. CSS has been one huge clusterSMACK after another. It works wonderfully for fonts, but fails miserably if you genuinely want a reasonably simple way to manage the appearance of the entire page for the largest majority of viewers. Despite what CSS designers claim, the latter is actually a valid desire. Semantics, like beauty, is in the eye of the beholder. What something means to you isn’t what it means to me. I work closely with a group of sight impaired and the web reader of choice has zero problems with tabular layout but frequently chokes on fancy CSS designs. Try it yourself sometime. Standard tables work just fine if one can move out one layer of abstraction and truthfully admit that the tabular data one wants to control is the aesthetic appearance of a page instead of the constricted view that tabular data only applies to string text… CSS designers have sapped more productivity from the real economy than virtually any other group and are undoubtedly one of the largest forces behind this recession!

Stylepile

October 22, 2008 7:06 AM

This is nice and all and has been discussed before but until the general public starts to use IE8 (which won’t be for probably 6 years or Microsoft makes you use it with a mandatory update), professionals under a deadline will not be able to implement the CSS2 or CSS3 features.

I would suggest everyone use them as much as possible in their personal or flexible projects to hone their skills and try to push the limits of the new features even further.

Nik

October 22, 2008 7:13 AM

May be in another few years time, we might reap its benefits … when eventually IE6 and IE7 gets phased out … untill then even with these usefull properties added and with IE6 & IE7 to be taken care of in the old fashioned way … It is still just another burden for us CSS developers, to another browser that has its own behaviour

Dan Lee

October 22, 2008 7:24 AM

I knew there were going to be people against this idea, but I’m at least glad to see they are against it for the right reasons.

The bottom line is that some of us still inject css hacks for our projects to work in IE5. If we were to completely overhaul our perspective on layouts, something that can’t just be fixed with a few stars and slashes, we’d be giving up on way more viewers than the ie5\6 users we’ve been catering to.

Jeremy

October 22, 2008 7:40 AM

Thank you for the overview of this technique.

I couldn’t help but feel a little dismayed as I read, though. The markup to me looks exactly like a table, just using DIV instead of TABLE, TR, and TD. How can you endorse this technique and still say tables for layout are bad while keeping a straight face? Please tell me, because I will face this in my shop as soon as I suggest this technique.

To me this is a step backward, not a step forward. This to me feels like just a cop out. Are we now acquiescing to the CSS haters, while trying not to look like idiots?

Chris

October 22, 2008 7:49 AM

Keep in mind, it’s not worth spending a week implementing this method with graceful degradation for older browser instead using an actual table, if it is truly needed. I would say for now just use a table. Then, when the market share of IE6 and 7 shrinks, change the table elements to <div class=“table”></div> and all that. It’s not worth fussing about at this point.

duran

October 22, 2008 7:50 AM

you guys are hilarious. Something new, that’s actually going to make accessibility issues easier to deal with, and you complain.

It furthers the separation of aesthetic and data, and you complain.

it doesn’t work everywhere, and you complain.

lots of lazy in these comments.

Designer

October 22, 2008 7:51 AM

nice article

Nik

October 22, 2008 7:58 AM

George!

It is not meant to work in IE7 but meant to work in IE8 with all the display:table and its varieties in included

Jason

October 22, 2008 8:00 AM

Awesome. Looks great and simpler. Now if we can get the 25% of IE6 users to upgrade to IE7 then we’ll be on the right track to have people migrated to IE8 by 2014 or so.

Ethan Gardner

October 22, 2008 8:02 AM

Personally I haven’t used a table for a site layout since my first web class in college. In any case, it will be a while before we can drop support for IE 6 and 7 entirely, and doing layouts with tables will still required to produce HTML emails as long as support for standards is lacking in email clients.

Also, in the example of the gallery, it seems just as easy and more semantically meaningful to mark it up with a definition list as opposed to the way it was done in the article.

Jason

October 22, 2008 8:06 AM

Great article on CSS. Thanks for the tips. CSS shortcuts that are SEO friendly will help you in the long run.

Cotton

October 22, 2008 8:09 AM

One more thing – adding table like properties to CSS isn’t even close to being the same as using table mark up in HTML. Even with table-like properties you’d still use table mark-up in HTML to present tabular data. We didn’t bail on tables because they didn’t display content correctly – we bailed on tables because they were semantically wrong. A screen reader reads the HTML – not the CSS.

miss chohoh

October 22, 2008 8:19 AM

This is a great article and I shared with everyone in my office and they all seemed to be pretty happy. It’s shame our company will still and always be testing for IE6 so it will be interesting to see the kind of hack jobs that can be done with making both browsers happy.

emjayess

October 22, 2008 8:20 AM

if the argument against using the table element for layouts is about semantics, then why use table nomenclature on css tables? how does it become more semantic if all we’ve done is shift words like ‘table’ & ‘cell’ from the markup to the stylesheet??

it’s like we couldn’t quite climb out of the box in our standards-think…

Mike Rundle

October 22, 2008 8:20 AM

This article has such an inflammatory (and incorrect) title that I’m deeply saddened the folks at Digital Web actually allowed it to publish.

Internet Explorer 8 will finally support CSS properties that Firefox and Safari/WebKit have supported for years, no doubt about that. The problem is that doesn’t matter for people working on the Web.

The fact of the matter is that a large percentage of people still use IE6, especially in the business world. IE7 only became a required update a month or two ago, and before then, you had to consciously choose to download and use it if you were on an older machine. IE8 is still deep in beta and the day when its market penetration matches the usage that IE7 gets today is years away, and by then IE7 will be in the same position that IE6 is. This all means that if you have to support the vast majority of Windows users, you cannot use these techniques. Maybe 4 years from now we can, but nowhere in the near future.

I’m pretty sure that some things I know about CSS are incorrect (whatever that means) but thanks for taking the time to tell everybody that everything they know about CSS is wrong. That makes me feel great.

Sean

October 22, 2008 8:29 AM

The problem with this technique is that it puts too much presentation in to the content. Let’s take the last example: What happens when I want to put those four images all next to each other? Or in a vertical column?

I have to muck around in the HTML. Which puts us right back where we were 5 years ago, but instead of table hell, we are in css-table/div hell.

On the other hand, I can achieve this exact same layout with an simple unordered list. And if I want to change it, I only have to change the CSS. This gives me flexibility not only when it comes to maintainability, but also displaying this content now in various medias (print, mobile).

Workpost

October 22, 2008 8:34 AM

This is nice but I still have to support clients whose primary browser is IE6…

Dewey Williams

October 22, 2008 8:37 AM

Sounds like semantics to me!

You use table, tr, td for tabular data and use div:display/table/row/cell for text you want to display as a table. I see no advantages and many disadvantages (most well documented in comments here) using this.

What we need is true column, gutter markup available in publishing software.

Kevin Quillen

October 22, 2008 8:38 AM

Won’t even touch this. Grid layouts with divs are easy, that is to say in the column sense with some futureproofing. Trying to take nested divs to replicate a table just to say hey, I didn’t use a table tag.. is a waste of time. How could this be written with a clean conscience? Articles like this are what make it hard to turn the dinosaurs that are still hellbent on tabling everything.

Why wouldn’t a multi item grid be… a table? Like an image gallery. Each image in a cell with the caption underneath.. voila. If you have 3, no problem, 4, no problem, loop and set the row breakpoint as the design dictates.. nothing to it.

I’m fairly adept at CSS’ing most scenarios, but this seems like far more trouble than its worth at the moment.

As for mobile devices, most mobile devices will have desktop browsers on them within 2 years (like Safari, Firefox, or Chrome) so worrying about mobile devices seems moot as well.

And like the rest have said, real world projects with unforgiving clients don’t care what browser is what. Make it work or get better at CSS/markup.

Valiik

October 22, 2008 8:39 AM

That is a good article, catchy title. Mike Rundle needs not get too excited about the title. Titles are for marketing purposes. They get you to read the article as obviously they did him, as also do every other website and publication ever published.

I am however happy to read Mike’s comment and do agree with him that these new CSS techniques are still years away from being really main stream. IE8 is still in beta and once it’s released will take a couple of years to become widespread for us to worry about it.

Ryan M

October 22, 2008 8:40 AM

I’m not skilled at SEO so I can’t evaluate the argument made above that this grid technique could potentially devastate one’s search rankings. Is that a valid concern?

Kerri

October 22, 2008 8:47 AM

Is it really all that hard to do column/grid layouts? I mean, really, once you learn the fundamentals, it’s not all that hard. Once you learn how to work with the stupidity of floats, it’s not all that hard. I mean, no, really. It isn’t.

I do hope that by the time CSS4 is recommended, they have a ‘grid’ style, though. (Table? Ugh, who thought of THAT?)

Matthew Pennell

October 22, 2008 9:08 AM

Did anyone actually read the article before jumping into the comments?

No, the techniques discussed won’t work in IE6 and IE7 — the very first words of the article state that IE8 will introduce support for them. This is a forward-looking article/extract, looking at aspects of CSS that will start to be viable in the medium-term; nobody is suggesting you drop support for IE6/7 right now!

And @Mike Rundle: the article title is taken from the Sitepoint book of the same name (as I noted in the introduction and mentioned in the final sentence). If you have issues with their naming choices, take it up with them. :)

minimal design

October 22, 2008 9:29 AM

Not sure I understand the intended purpose of this article.

Those display properties are absolutely nothing new, IE6 + IE7 are not going away anytime soon, the specific HTML implementation is terribly bloated, and none of the examples used are difficult to achieve with regular floats.

What was the point? I mean, besides increasing adsense revenue with the catchy title…

Kevin Quillen

October 22, 2008 10:07 AM

^^ ding ding, we have a winner

dustybin

October 22, 2008 10:15 AM

This technique is useless as border radius property I would like to use.

Graham Bradley

October 22, 2008 11:54 AM

There is nothing wrong with publishing a forward-looking article about CSS, especially when you make sure to put the necessary caveat regarding browser implementation, but you can’t then slap on a totally stupid title and expect people not to pick up on it.

Anyway, personally I don’t see this ever taking off. Regardless of browser support, the fact is that there are, after a few years of tackling the issue by many talented people, literally hundreds of well-documented techniques to adequately control layout with CSS2. Is it perfect? No. Can you make good sites with it? Yup.

@dustybin – border-radius isn’t at all useless. Using it correctly will give an enhanced effect in some browsers, while other browsers will just see a standard right-angle border. It’s not breaking the page for any browser, unlike the techniques mentioned in the article.

Josiah

October 22, 2008 12:51 PM

Turns out everything I know about CSS still applies and validates! Seems your title was actually incorrect.

Honestly, if you’re going to have a snappy title, have an article to match. Everything you mentioned is nothing new and can be done simpler, as minimal design mentioned.

Michael Long

October 22, 2008 12:58 PM

“…literally hundreds of well-documented techniques to adequately control layout with CSS2…”

Which pretty much describes the problem as far as I’m concerned. We shouldn’t NEED hundreds of different techniques to get basic layouts to work.

As to the table-CSS code, looks to me like they just need to add a “table-column:1” attribute so you can reorder and shuffle columns around at will. That would solve most of the SEO/accessibility issues.

Mystery

October 22, 2008 1:38 PM

So the CSS would be

.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.tbody { display: table-row-group; }
.thead { display: table-header-group; }
.tfoot { display: table-footer-group; }
.caption { display: table-caption; }
.col { display: table-column; }
.colgroup { display: table-column-group; }

with the HTML like

<div class=“entry td”></div>

That’s cool, now somebody please make a jquery plugin that transforms div code into table code for internet explorer < 8 and make our lives so much easier 10x.

Rolando Murillo

October 22, 2008 2:11 PM

Not a good idea, Internet Explorer doesn’t help. It’s like returning to the past. :/

Thierry Koblentz

October 22, 2008 2:30 PM

The following technique works in IE (Win and Mac). It uses “table”, “inline/zom” and “inline-block”.

http://tjkdesign.com/articles/float-less_css_layouts.asp

Matthew Pennell

October 22, 2008 2:39 PM

you can’t then slap on a totally stupid title and expect people not to pick up on it

Why not, as you’ve apparently failed to pick up on the fact that it wasn’t Digital Web that “slapped on” the title in the first place..? ;)

Bjarni

October 22, 2008 3:13 PM

Any interesting read.

I look forward to the day when it becomes a standard for browsers to behave with CSS and not have to back track to support those browsers that cripple correctly coded sites.

AlastairC

October 22, 2008 3:33 PM

Wow, I hope I didn’t open the door on all the negative comments!

I just meant to point out a couple of things I’d noticed before on this topic, to put it in perspective:

1. We can’t ask much more of the IE team that to put out a compatible browser ASAP (well, you could ask for some UI innovation, but that doesn’t bother me as a web-dev!)

2. I’m very interested in the rest of the book, I am just sceptical that there is a noticeably better technique before we get the layout module – that has to be the highest priority for CSS3.

I think it’s great that people can write books about this stuff, even if we can’t use it yet. It makes it so much easier than the 2001-3 era when you had to scour the internet for tit-bits :)

Miranda

October 22, 2008 11:01 PM

Everything i knew about CSS isn’t wrong; and i’m not gonna read your article because of this “clik me” style of article naming. From your point of view i did click a bit on the site and your ads were shown so you get a little in$entive which is all you care about.

gavin

October 22, 2008 11:19 PM

Well, since it’s still ie7/6 times, I’d rather use <table><tr><td> themselves to do this kind of layout, and you know what, I’d have colspan/rowspan as a plus. Semantic? That’s totally a joke for today’s WWW.

Actually both float and display: table-x are not intend to be used for layout, they are all kind of hack. The only real layout properties are in the advanced layout module of CSS3, which might be adoptable in, say, 10 years.

So, this is life, of web developers.

Simon

October 23, 2008 12:06 AM

More css primadonna rubbish.

Finally you grudgingly admit by implication that CSS layouts are fundamentally flawed, finally you acknowledge that CSS is unsuitable for layout.

Then you claim that <div table> is semantically different to <table> Its not. You just changed the spelling of <table>, it’s not its a tiny syntactic difference. All you needed to do from day one is
<table type=layout> or something like that. But oh no, your solution that fails on 50% of the browsers is the correct one!

Proof that advocates of semantic web are philosophically unqualified to use the term ‘semantic’

Congratulations on years of punishing web devs for using common sense. Finally the circle turns, but somehow you think that you were ‘right all along.

Phillip

October 23, 2008 1:10 AM

Boring article. Why not discuss how div’s were not designed for layout, yet are what we use for layout?

bq.“you guys are hilarious. Something new, that’s actually going to make accessibility issues easier to deal with, and you complain.”

It doesn’t make accessibility issues easier to deal with, it makes lazy developers lazier.

It’s not hard to write a layout now thats cross browser. It’s people not knowing how that we have to create more bullshit standards like display: table.

aMUSICsite

October 23, 2008 1:15 AM

I still don’t see whats wrong with tables. Been using them for years, now days alongside CSS.

It don’t affect the search engines, it don’t affect the user and it works everywhere!

CSS for all layout the day MS patches IS6 & IE7 to support CSS fully or the browsers die. Neither look like happening soon.

Morningtime

October 23, 2008 2:23 AM

Not using tables is just psychological semantics. It’s doesn’t affect anything. But tables ARE more stable, and browser-friendly. You need no tricks and less CSS to do the job with tables. Why charge a client 25% more for a DIV layout than an identical table layout?

Though I love to see this IE8 example in use for all browsers – it’s how it should be and looks really stable.

Phunky

October 23, 2008 2:34 AM

Although i agree with some of your point in this article it is nothing new, in fact it is something that we have been waiting to use for years and sadly we will be waiting a lot longer before we are able to actively use this.

display:table is a CSS2 element, how long ago where the CSS2 standards written, 10years ago? Yet we are still sat here waiting to use elements of it.

Elf

October 23, 2008 5:42 AM

I made my own comment here -> http://elfworld.org/vis_dag.php?id=619

Adam

October 23, 2008 6:19 AM

All of this is moot because the average user is still surfing with IE6, which supports none of this.

Keep this story handy and reprint it in 2015, when I can stop coding to support IE6 and then it will be relevant.

Tarun Hari

October 23, 2008 6:38 AM

Hi Rachael,

Apparently “everything you know about HTML is wrong”, because the example code you provided in your article uses divs no differently to tables, so why bother switching tags? Divs have zero semantic meaning and using them as faux table cells simply highlights your misunderstanding of correct HTML markup.

Sam Sherwood

October 23, 2008 7:23 AM

This article would’ve benefited immensely from some semantic examples. As it stands, it simply pays lip service to the notion of separating markup and presentation.

I noticed a chapter in the book that mentions source order… and while I can understand not giving away the entire cow, it may have been appropriate to suggest why this method is worth a second look, when source order is so important.

The author also seems to suggest the only reason tables are ‘bad’ is due to them being misused on non-tabular data. If only! XHTML is meant to label your page data — give it semantic structure. The reason people don’t want to go back and edit their XHTML for presentation purposes is because that goes against said intent. If there’s no new data, why would you be editing your XHTML, unless you somehow failed in its original organization?

Instead of heralding older methods of thinking, we should be pushing for new methodology and spec adoption.

Sean Carberry

October 23, 2008 7:41 AM

This would be a great technique if only it weren’t so impractical. Web Developers around the world will still be required to support older browsers, and will probably not want to write and switch yet another stylesheet. What we know isn’t wrong, it is practical application.

Let me ask, how long has it been since the modern browser and we are still supporting IE6? I think this is a good concept, but not conscientious. Also, I would hold off before heralding the majesty of IE8. I’m not confident that it will be more amazing that Firefox or Chrome

Seamus

October 23, 2008 8:19 AM

I have been playing around with this three years ago and Phunky is right in that I have been waiting for to browser support this feature. Also you can go the other way and take tabular content and display it in a non-table manner.

Matthew Pennell

October 23, 2008 9:19 AM

@Tarun Hari:

Apparently “everything you know about HTML is wrong”, because the example code you provided in your article uses divs no differently to tables, so why bother switching tags? Divs have zero semantic meaning and using them as faux table cells simply highlights your misunderstanding of correct HTML markup.

The DIV element (short for ‘division’) does have a semantic meaning; it is used to group related elements together. Rachel’s examples are using them for their correct purpose. You referring to them as “faux table cells” simply highlights your own misunderstanding of correct HTML markup. :)

Graham Bradley

October 23, 2008 11:01 AM

Matthew,

I’m not bothered about who came up with the title, or where the content of the article came from. At the end of the day, the title (displayed on the front page of Digital Web) links to an article (hosted by Digital Web), the content of the latter bearing no relation to the former whatsoever. Just seems odd is all.

Tarun Hari

October 23, 2008 12:35 PM

@Matthew Pennell

@Tarun Hari:

Apparently “everything you know about HTML is wrong”, because the example code you provided in your article uses divs no differently to tables, so why bother switching tags? Divs have zero semantic meaning and using them as faux table cells simply highlights your misunderstanding of correct HTML markup.

The DIV element (short for ‘division’) does have a semantic meaning; it is used to group related elements together. Rachel’s examples are using them for their correct purpose. You referring to them as “faux table cells” simply highlights your own misunderstanding of correct HTML markup. :)

“In HTML and XHTML, span and div are the only elements that carry no innate semantic meaning, besides the logical grouping of the enclosed elements.” – Wikipedia

A div specifies exactly that, a “grouping order”. It gives absolutely no semantic meaning to the content contained within it.

Now when that content is wrapped in semantic tags; for example heading or paragraph tags, it actually gains meaning. Which Rachel goes on to do.

What I don’t like about this method actually has nothing to do with how semantic it is, I just threw that in there because I had only read up until this part before entering a meeting.

<div class=“cell”>CELL A</div>
<div class=“cell”>CELL B</div>
<div class=“cell”>CELL C</div>

But does no-one else see this as a step backward? Semantics aside, what is the difference between using a <td> or <div class=“cell”> when it comes to editing a website and the trauma of trawling through lines of rows and cells?

I thought we were starting to think outside of rigid grid based layouts anyway… It’s great that you guys explored the possibilities of this technique, but advocating it against traditional CSS positioning methods by telling readers to forget what they know? I just didn’t expect something so unmindful from digitalweb.

Thierry Koblentz

October 23, 2008 1:08 PM

I can’t believe DWM published this article.
8 months ago, Sitepoint published Table-Based Layout Is The Next Big Thing with the exact same angle, offering a solution that has weak browser support.
But what is the point? As the comments here and on Sitepoint show, this type of article plays against CSS-P as most “table-people” already think CSS does not work in “real life”.
Coming up with solutions that demonstrate poor browser support is not how we’ll convince them that CSS is the right tool to use when it comes to layout.
I already posted a display:table solution that relies on other properties for better browser support. For those who missed it, here it is:
http://tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no_joke.asp

John Miller Crawford

October 23, 2008 3:16 PM

Everything You Know About CSS Is Wrong is a deeply disappointing book, and one that sullies SitePoint’s reputation.

1) The title is grossly misleading, and it’s hard to understand how the authors could allow the marketing people to get away with it. It can only mean that everything they’ve written before about CSS is wrong! Sitepoint are offering this book as a package with their previously published The Art & Science Of CSS – but hey! won’t everything in that book be wrong?

2) The table element in HTML is not only a semantic structure. When HTML tables are used to lay out grids for positioning page components, they’re being used purely as presentational structures – in exactly the same as the authors advocate using CSS tables.

3) So long as a substantial proportion of visitors to my clients’ sites are using IE6 and IE7, this book (and the extracted article published here) have nothing to offer but false hopes, misleading claims and useless advice.

Divya

October 23, 2008 4:38 PM

I am surprised that the author did not state the obvious: that IEs are not supported at the minimum. I wonder what the support is from Opera? Giving just screenshots and not a working example is also just a easy way to write about css properties. It has no depth.

Nick Finck

October 23, 2008 9:37 PM

For those who said “I can’t believe Digital Web published this article” or phrases of the like: regardless of the facts that Matthew pointed out , what I find interesting is the fact that most of these people are quick to ridicule an article and yet have never published an article on Digital Web themselves.

If you’re going to talk the talk, you’ve got to walk the walk.

Brady J. Frey

October 23, 2008 10:44 PM

The title didn’t bother me, it has wit to it where wit was intended.

Tell you the truth, I plan on using this as soon as IE 8 hits the street. I’m accustomed to doing more aggressive design techniques for modern browser, then conditional comments to dumb it down for every version of IE under the sun.

6 and 7 users will get a clean design just the same, the layout will simply be more simplified, and they won’t know a difference. Seems like a real world technique to me, just like I use multiple background images and dynamic text-shadow’s in Safari.

Nick Finck

October 23, 2008 10:55 PM

Thank you, Brady. Good points.

Matthew Pennell

October 23, 2008 11:00 PM

@Divya:

I am surprised that the author did not state the obvious: that IEs are not supported at the minimum.

Yes, it’s a pity that the very first sentence of the article is: “When released, Internet Explorer 8 will support many new values for the CSS display property.”

@John Miller Crawford:

When HTML tables are used to lay out grids for positioning page components, they’re being used purely as presentational structures

You missed out the word “incorrectly”.

I must say that I’m surprised that an audience of (presumably) conscientious, standards-aware developers are almost all declaring that they will not use new features of CSS when they are available and supported. Are you all so short-sighted that you cannot see any application for the techniques discussed here beyond wholesale replacement of site layouts?

Matthew Pennell

October 24, 2008 1:12 AM

Rachel Andrew has also said something apposite in her own post about the book:

Some commentators have suggested that we shouldn’t have put a book out about a technique that can’t be used immediately, that will require workarounds to still provide support for older versions of Internet Explorer. I disagree. Something I point back to in the book is how the web community began to use CSS for layout even though support in Netscape 4 was limited and buggy. If those of us who were building CSS layouts right in those early days had said, “nah, it doesn’t work in Netscape, can’t do it”, then our recent history would look very different.

Dawn B.

October 24, 2008 8:20 AM

IE7 makes me a sad panda! I laid out a whole site (gleefully) before I noticed it didn’t work in IE. Majorly bummed now. I know, my bad, I had FF, Opera and Chrome open but not IE. Most of my clients use MS products and they refuse to update things, (like free browsers). I swear, some of them still use IE6! /sigh

Miklos Monostory

October 25, 2008 11:13 AM

I tried it with Chrome and the code worked correctly with that too.

Bradley Wright

October 25, 2008 2:43 PM

I for one think this article is great. I spend so much of my time mired in the drudgery of making things perfectly cross-browser that I often forget that CSS actually holds other possibilities for those situations that afford us the freedom to not support poorly implemented browsers. I’m mindful of the fact that DIV.row could have been chosen better, but it’s just an example – we’re all educated enough to not cut and paste things verbatim, right?

Anyone who dared to comment that “tables are just as accessible” are wrong, and need to go see a screen reader user navigate a site like Amazon immediately. When you hear them say things like: “this site is okay, I know that I just need to hit tab 25 times to reach the search box and I can search” you know that tables as a layout medium are broken. Accessible code is optimising the user experience for people who can’t see the design, and we should all care about user experience.

Also, people who play the “what’s the semantic difference between a DIV and a TD” are missing the point, perhaps intentionally: a DIV is semantically and accessibly meaningless, which in the end means it makes no difference to the end user. A TD does, and will, affect the end user. Important distinction. Always code for people first. So get over the table layout thing – it’s just trolling and has been debunked since before Digital Web even had its big redesign.

Martin Bavio

October 26, 2008 2:48 PM

After seing that nasty <div class=“row”> code, I really think that Everything Author of This Article Know About CSS Is VERY Wrong. Damn, add some empty gifs to the article and we are in 1995 again!

Thierry Koblentz

October 27, 2008 8:29 AM

@Nick

For those who said “I can’t believe Digital Web published this article” or phrases of the like: regardless of the facts that Matthew pointed out , what I find interesting is the fact that most of these people are quick to ridicule an article and yet have never published an article on Digital Web themselves.

I think you’re totally missing my point as I did not try to ridicule the article at all.
If I had, I would have mentioned its title, the markup used for the gallery (imho, a list would have been more appropriate) and the use of the word “revolutionary” when I know I published The easiest way to make an horizontal list act like a table is to make it a table… more than three years ago.

The only point I was trying to make here is that articles that discuss techniques or methods that have poor browser support lead people to think that either that method is useless or that CSS is not ready for prime time. And in both cases, I feel we should not feel happy with the result.

@Matthew

Some commentators have suggested that we shouldn’t have put a book out about a technique that can’t be used immediately, that will require workarounds to still provide support for older versions of Internet Explorer. I disagree. Something I point back to in the book is how the web community began to use CSS for layout even though support in Netscape 4 was limited and buggy. If those of us who were building CSS layouts right in those early days had said, “nah, it doesn’t work in Netscape, can’t do it”, then our recent history would look very different.

I’ll use the above example as it serves my point. Years ago, they were people using “@import” or “media type” to ignore Netscape 4 while at the same time other authors were trying their best to make things look OK in NN4 (my 3 column layout is 4 years old).

In short, I think coming up with real solutions is what matters.

simon r jones

October 28, 2008 3:28 PM

people seem to be getting rather upset over the use of table-like markup in CSS and funky book titles.

Personally, I think the article is interesting. It discusses new CSS layout techniques, which presumably is one of the points of Digital Web magazine. Moving things forward, discussing new ideas, this sort of stuff should be seen as a good thing.

The techniques are clearly marked as only being good for IE8 so as many have quite rightly said this may not be particularly practical just yet. Doesn’t mean we can’t have an adult conversation about it though :)

As a note to the editorial team maybe you need an ‘experimental’ tag for articles like this..

Andres

October 28, 2008 8:48 PM

This is nice, I’ll read the book and see how to apply this on older browsers. I guess that if there is a good solution for older browsers I would give it a go.

After its just another way to position things, I do it with floats, but I can always try new things.

Jaime

October 29, 2008 6:53 AM

Great, now (actually in some years when old browsers phase out) we’ll be able to finally do with CSS what we already did 10 years ago with HTML, wouldn’t it have been easier to propose the insertion of a new html element for tabular data, such as <tdata> or something like that for semantic purposes and leave tables entirely as layout elements, then the table-esque behavior would be implied as it is now and you wouldn’t have to code it manually as shown in the example.

Bradley Wright

October 30, 2008 2:19 AM

Thierry: maybe people would be more receptive to your comments if you didn’t continuously link to your own site. We wouldn’t want your ostensibly good intentions misconstrued as spamming, would we?

Chuck

October 30, 2008 8:25 AM

Personally, this frightens me. Why after spending all these years perfecting techniques to build grid layouts without using tables, are we being encouraged to start using css tables instead? Plus the fact that the browser will be ‘adding in’ missing elements only encourages the kind of bad practice that spawned from tabular layouts anyway. I’m all for change, but this seems like regression.

Thierry Koblentz

October 30, 2008 5:41 PM

@Bradley

maybe people would be more receptive to your comments if you didn’t continuously link to your own site. We wouldn’t want your ostensibly good intentions misconstrued as spamming, would we?

Spamming? As far as I know, these links are there to back up my points, no?
As a side note, if the author’s choice was not to suggest an alternative for IE browsers she could at least have mentioned the solution I’m talking about in an effort to prevent the flow of negative comments that complain about poor browser support.

I guess I didn’t “spam” enough the comments in a previous article ;-)

benny

November 3, 2008 5:01 AM

I’d recommend changing the title. It’s horribly unprofessional because of how misleading it is. I also fail to see the value in this in practical terms, since we’re many years away from relying on this technique to be usable across common browsers.

JBoy

November 3, 2008 6:55 AM

Do we really need to support IE5, IE6 come on people the document is very valid and fruitful unless you want to start bashing your head to fix IE6 errors then you simply can’t read and understand this article.

IE6 was released 2001 7 years ago we fight for the future not the past. The article is great so i wonder why people are complaining about it. Or do you just feel like talking because you can. I for one welcome this article and as we are enlightened everyday as we don’t know everything.

I dare all the complainers to say they support Netscape 4. So please next time think before you actually speak because it makes you look very uneducated.

“Doesn’t mean you don’t have degrees or masters either just means you lack common sense.”

BigBoy

November 5, 2008 11:53 AM

@JBoy

I dare all the complainers to say they support Netscape 4. So please next time think before you actually speak because it makes you look very uneducated.

It is not about how old is a browser, it is about its market share.

Doesn’t mean you don’t have degrees or masters either just means you lack common sense.

I’d say underestimating the audience factor shows a lack of common sense ;-)

webwurst

November 6, 2008 9:07 AM

nice article!
but what about colspan? is there any workaround to get this with css?

gcyrillus

November 7, 2008 3:27 PM

Hello ,

Colspan ? , well this question seems to come from your way of thinking :) .
Table is html and can be used once in a while where CSS is limited (or where css codeur reach the limits of his knowledge and experience ) .

CSS do not replace HTML , and if you keep misunderstand this , you make it hard for yourself .

HTML is not either prints . On once side : newspaper and one other side ‘web content’ . They’re different .

Unfortunately this “DIV VS TABLE” , is coming up again …

There is many ways or technics to fake colonnes or succeed vertical-align (display , haslayout , etc … ),
but none are universal , each page has it’s own html structure , content … and design

So , to see inline-block and table-cell working throw all browsers is very good news ,But will bring again lot’s of mistundertanding , untill each are used for their purpose and not instead something else .

HTML and CSS are not mature , browsers even less ,
keep going ….

Marcin

November 8, 2008 1:05 AM

Good article. But I’m worried about one matter – it takes a lot of time before IE8 displaces IE6/7. So the CSS tables are a matter of future.

Tom

November 10, 2008 12:13 AM

I’m glad, that such easy ways of creating code are coming. But it’s coming slowly. This just works in IE 8 and no older browser from the MS-workbenches. And it’s a new feature, while others did it long ago! It probably will take at least 2-3 years till we can concentrate our solutions to web standards only.

MattZ

November 10, 2008 7:03 AM

Not only is this completely unusable because IE6 and IE7 do NOT support this and will be with us for some years, but also it misses the point of CSS entirely.

CSS was supposed to rid us of all this nesting elements and bloated, obtrusive code. There are also major issues with source ordering, positioning, and accessibility. This is more like going back to the bad old days of tabular layouts than coding for the future.

When we see all the bad practices that were associated with tabular layouts return then I hope that we can finally put this to rest. Hopefully none of the browsers will go ahead and accommodate poor coding like IE did.

Perhaps when CSS3 and HTML5 are finished we will finally have a mature coding language for the web. Then again, perhaps HTML needs to be put to rest and everything should be server scripting ala PHP or ASP or whatever other flavor you like.

I love the idea behind this, making a grid like structure for presentation, however the means of doing it I cannot support.

Sean

November 13, 2008 2:55 AM

I just wrote a review of this book on my blog
Review of Everything You Know about CSS is Wrong

Matthew Pennell

November 23, 2008 10:59 PM

I’m closing comments on this article due to comment spam.

Sorry, comments are closed.

Media Temple

via Ad Packs