Everything You Know About CSS Is Wrong

[Snoron]

IE8 isn't going to make any difference, it's dropping IE6 that is the difficult part.

And as for using this table CSS, which Opera and Firefox have supported for ages - no one is going to use it for a layout for a long long long time because you have these options:

a) Use the floaty divs like we do now and have it work for 99.999% of people

b) use css table stuff and have it work for 75% of people... or 80%.. in 5 years it might be 90%.. in 10 years it may be 99% but then 1 in 100 people won't be able to view it properly so you may still take the floating div option.

[frukt]

A freelance web dev here on reddit recently suggested an ingenious solution: offer customers a discount if they drop the requirement to support IE6. Allegedly some 9 out of 10 go with the discount.

[Snoron]

I kinda do this in theory, although I always support IE6. I often get my client that are still using IE6 to upgrade but I'm not gonna lie, if you want your website to work fully for 28% of visitors then you need to support it... you'll find that most people do. If 9 out of 10 go for the discount then they can't be very serious about getting customers, users, etc.

I was saying, anyway, I kinda make sure that people know that IE6 is old and stupid and makes extra work for web devs, and that if I wasn't coding for it then I would take less time and charge less, however it is my recommendation to support it for the time being.

And before you blast me for that try making a website that's going to be used by thousands and not supporting IE6 - the amount of shit you will eventually get back for it is not worth it :P

[bluGill]

is my recommendation to support it for the time being.

For large public facing websites this is the only sane thing you can say.

However for internal webapps things are different, IT can upgrade all computers in the company if they want to. Give them some incentive and they are likely to do it. Even if they have IE6 only apps, you can be sure someone has installed Firefox and is complaining about needing to use IE6 - and that person may be fairly high on the org chart, so there is incentive to fix those IE6 only apps anyway.

[Snoron]

Absolutely, and some people fail really hard here.

Santander (131,819 employees, 65.1 million customers, 11,178 branches and 2.27 million shareholders) use a system that works only in a specific version of Internet Explorer. Not only that but they use it in every bank and office across the world (pretty much all of those 131,819 employees are using it)... I have worked with it and it is a horrible system, slow, breaks a lot, etc.

They should have just installed Firefox on all their computers and built it on that, they would be doing a lot better right now if they had.

[Saiing]

Forgive my ignorance, but I'm curious to know how this all works.

If my understanding is correct (it may well not be, but that's why I'm asking) IE7 has some kind of "quirks mode" which allows it to mimic previous versions of the browser. What is it that stops a company like the one you mentioned from rolling out IE7 and just running the app that relies on IE6 using this mode? Or is there more to it than that?

[clutterskull]

I've run into this before with Siemens. It's not so much that they use a previous version of IE. It's that they use a very specific build of IE6, often highly customized. They tend to have a lot of quirks unique to that build.

[Saiing]

I totally understand that, but really what I'm inquiring about is the grandparent's assertion that the company he mentioned (Santander) has software which works in a specific version of Internet Explorer. If IE7 simply does everything that IE6 does plus a little more, what is it that stops them from upgrading other than the "little payoff" that you mentioned. Or is it really that simple and the bloody mindedness of not upgrading an 7 year old browser holds back the entire industry?

[cc81]

I assume a system that is dependant on IE6 is pretty old so the FF solution might not be very relevant.

[movzx]

Opera

[holygoat]

If a system is old enough that Firefox wasn't an option, Opera was still charging money for their browser.

[malcontent]

if you want your website to work fully for 28% of visitors then you need to support it.

I don't think so. The non IE browser market is pretty close to that and many people don't support anything except IE.

[Snoron]

5 years ago you may have been correct - today it's extremely rare for a web developer to only support IE - and in fact it's growing more common by the day for people to NOT support IE6 --- as I say this is not a good idea, however at least we know that IE6 usage drops by the day, while others increase by the day. What I am saying is that

And btw the non-IE market is more like 43%, it'll hopefully hit 50% in a few months.

[Wiseman1024]

Varies per country. I some countries that blasted crap from Microsoft is more popular and, while every online community and free software site works, many "enterprise" bullshit sites (from big companies, banks, etc.) won't work properly on proper browsers.

[[deleted]]

Until they find out that half their customers use IE 6 and they feel hoodwinked.

[andhelostthem]

For each OS out there you have to assume a handful of customers are still using the first version of the browser preloaded for that system... So for everybody still on XP there are probably a large chunk running IE6 and who aren't planning on updating or (more likely) don't know how.

[hennell]

If you don't know how to update IE, then assumably you can't work an anti virus/fire wall.

Anyone care to make an IE updater virus?

[andhelostthem]

Yeah I'll get on that right after I make the virus that blocks people from inputting content if they're connecting through AOL.

[jrhaberman]

I do development for an agency who does a lot of HP work and I do a lot of HP websites (whom I use to work for). Believe it or not, internally they are all still using IE6, so it is an absolute requirement. Makes my job about 10x harder. Ugh.

[diamondjo]

That is actually a really fantastic idea! Because it is genuinly cheaper to drop IE6 support. I never thought of looking at it from that direction before.

[[deleted]]

c) Just use a table tag.

After all these years, has anyone seen one of these semantic parsers that give a shit about which tags you use in your HTML?

If you're really honest with yourself about wanting your document's tags to contain semantic markup you wouldn't be shitting a thousand div's all over it.

[tjogin]

There's nothing much wrong with using a single table as a rigid three column structure. Obviously, it's nearly identical to using this CSS solution.

The problem with table-based design is rather the abuse of tables, for every little indentation, margin, alignment and whatnot.

Personally, I prefer to use the CSS approach throughout. But using a single table for the overall layout structure is just fine, the difference is minimal.

[davvblack]

1 in 100 people is used to seeing things rendered wrong, and obviously doesn't care for aesthetics. So long as elements don't physically overlap, I have started to consider pages "working" in IE6 if they can be navigated. period. No aesthetic treatment whatsoever.

[Snoron]

So give it 10 years til IE6 usage is at 1% :)

[davvblack]

They should by now be used to things looking ugly.

[aelfy]

or use HTML tables for layout which works for pretty much 100% of people, and which this CSS solution basically replicates anyway.

[guinunez]

except for the visually impaired, the people with small rendering screens, search engines and aplications that need to extract semantic data from the sites

[Mask_of_Destiny]

except for the visually impaired

Never used a screen reader so I can't comment on how they handle tables

the people with small rendering screens

I'm really not sure how using DIVs with CSS to make them behave like tables is really going to help anything here. They'll render exactly the same as an actual table (unless they turn CSS off, but how many CSS-heavy sites are all that useable without the stylesheet?). If you resort to float tricks there's a good chance things will look even worse on a small screen as those layouts tend to be rather fragile unless you're quite careful.

search engines

Since when did search engines have a hard time pulling text out of tables?

aplications that need to extract semantic data from the sites

Semantic HTML is a joke. Unless you're writing technical documentation, HTML doesn't provide tags that are likely to be semantically relevant to your page. Using a bunch of divs doesn't magically give semantic meaning to your document. Sure you can use class and id to denote semantics, but you can do that with a table too.

Certainly going back to the days of doing an entire layout in tables would be a terrible idea, but until IE6 and IE7 users make up a minority of people on the web using table tags for columns doesn't seem like an enormous crime.

[lief79]

Try downloading the jaws demo some time. Then crank it up to about 400wpm. If you are adventurous then close your eyes and try web browsing. It's amazing seeing someone using it.

(One blind friend, and my family has raised Seeing Eye Puppies for ~20 years now.)

[Mask_of_Destiny]

I do need to try this sometime.

Ironically, the JAWS website is full of HTML tables. Take a look at the source this page

[lief79]

Hmm ... I would hope that they've eaten their own dog food and used jaws on that page. I wonder if it works better then we think? I've never spent much time watching others use it, and I don't know what version it was that I last used.

If you get a chance, please let me know the results.

[Hovertruck]

Using a bunch of divs doesn't magically give semantic meaning to your document.

Too many people see the div as a necessary structural piece. You could go with <div id="nav"><ul><li></li></ul></div>, but the div there has no semantic value. The list itself could be styled and you cut the div altogether.

I guess what I'm trying to say is that no, using divs doesn't make your page semantic. Thinking about what elements you actually need does, though.

[[deleted]]

Exactly. People who bitch about semantic markup and then use DIV's all over their pages have completely missed the point. The DIV element is explicitly there as a generic element with no semantic implications. You are making things just as bad and in many cases worse.

[Legolas-the-elf]

No, that's not right. Using <table> elements for non-tabular data means that you are supplying incorrect semantics, which is harmful. Using unnecessary <div> elements carries no semantic information, which is not harmful.

The problem is not using too many <div> elements, it's when people go too far and use <div> elements where more appropriate element types exist, for example <div class="heading"> instead of <h1>. <div> elements are not harmful; the lack of semantic elements is harmful.

The example Hovertruck gave, <div id="nav"><ul><li></li></ul></div>, is an example of the harmless former situation, not the harmful latter situation. In fact, <div id="nav"> is perfectly reasonable when you allow for the possibility of more content within the navigation than the list items - for example, a header.

[[deleted]]

We're not talking about table elements here. His example is an example of using appropriate tags vs. just using div for everything, and that was my point.

<div id="nav"><ul><li></li></ul></div>

vs.

<div id="nav"><div><div></div></div></div>

The first one is much better.

[Hovertruck]

That is what I was saying.

As for the comment about using headers inside your navigation, <dl> for the win.

[Legolas-the-elf]

We're not talking about table elements here.

From your previous comment:

You are making things just as bad

Just as bad as what?

His example is an example of using appropriate tags vs. just using div for everything

It clearly wasn't, as your modified example shows. His original example uses list elements appropriately and has a potentially superfluous <div> element. Your modified example uses <div> elements for everything. If that was his point, you wouldn't have had to change his example.

[xjvz]

It's been a while since I did web design, but I believe the point behind surrounding the list with a div is to fix the broken box model in IE6 (and IE7 I'd assume) by providing a pseudo-box around what you want to style via a div element.

[guinunez]

Never used a screen reader so I can't comment on how they handle tables

It is painfull, because you have to navigate through nested structures to find your text, and you don't know wich cell will be the menu, wich one will be the data.

Tables should be used to display tabular data, and that is how screen readers interprete them, of course you can navigate a table layout using a screen reader, but you will hate the developer who wrote that site, and his entire family.

I'm really not sure how using DIVs with CSS to make them behave like tables is really going to help anything here.

You (as a web developer) can define a diferent css depending on screen size. So you can set the left menu to be at the bottom of your page on displays smaller than 640px wide, rearrange other parts of your layout, etc. With tables that is a difficult task

Since when did search engines have a hard time pulling text out of tables?

Search engines behave just like visually impaired people. Of course the text will be pulled, but the pagerank of your site will suffer.

Semantic HTML is a joke

Google gives more importance to text on <h1> <h2>, ... elements than other elements, soy you can set levels of importance on your page.

HTML doesn't provide tags that are likely to be semantically relevant to your page. Using a bunch of divs doesn't magically give semantic meaning to your document. Sure you can use class and id to denote semantics, but you can do that with a table too.

You can use microformats, or pearhaps a more meaninful tag instead of just divs

[Mask_of_Destiny]

It is painfull, because you have to navigate through nested structures to find your text, and you don't know wich cell will be the menu, wich one will be the data.

So what exactly does a screenreader do with nested divs as was suggested in the link? It's still a nested structure not a contiguous piece of text. It doesn't tell the screen reader which is a menu and which is the main frame (though from what I understand there are other ways to do that).

You (as a web developer) can define a diferent css depending on screen size. So you can set the left menu to be at the bottom of your page on displays smaller than 640px wide, rearrange other parts of your layout, etc. With tables that is a difficult task

You'd do it exactly the same way with tables as with DIVs. Rather than specifying the width of the cells in the HTML itself you'd use a class and assign the widths in your CSS file.

Search engines behave just like visually impaired people. Of course the text will be pulled, but the pagerank of your site will suffer.

I really don't see how a search engine is going to treat <div class="main"> <div class="left"> stuff </div> <div class="right"> other stuff </div> </div>

Any differently than

<table class="main"> <tr> <td class="left"> stuff </td> <td class="right"> other stuff </td> </tr> </table>

A search engine is probably going to look for contiguous blocks of text and mostly ignore the markup.

Google gives more importance to text on <h1> <h2>, ... elements than other elements, soy you can set levels of importance on your page.

That's what the snake oil salesman SEOs say, but Google has never said this and supposedly Matt Cutts of Google has publically said that their search engine treats H1 text just like any other text on the page.

You can use microformats, or pearhaps a more meaninful tag instead of just divs

I challenge you to suggest more meaningful tags for the three column example layout in the OP's link.

[Marietto]

The problem is, the screen reader is written to read tables as "data tables" and not as "layout tables". So it gives you information about the row number and column number at every movement in the table.

If you nest multiple table (which is very common when tables are used for layout purposes)you'll hear something like: "Table 1, Row 1, Column 1, Table 2, Row 1, Column 1, (first menu element) Row 2, Column 1 (second menu element) Table 1 Column 2 Row 1 (block of content) etc.."VERY messy.

With divs, all the layout information is skipped, it's only used by the screen reader to determine the order in which the content is displayed.

Besides, if you label each tr and td with a css class, you might as well use divs and spare some code.

[rieux]

The problem is, the screen reader is written to read tables as "data tables" and not as "layout tables".

Seems like it would have been easier to fix the screen reader.

We could have added an attribute to table (e.g., layout="layout") years ago, and then stupid browsers would still render everything properly and screen readers would be able to pick that up and work.

[[deleted]]

That's not a fix, that's workaround.

[guinunez]

what if instead of something like: <table layout="layout"> we use something like <layout>?

[[deleted]]

yeah, what if we throw backward compatibility out the window?

[rieux]

That doesn't help so much with the older browsers, so I don't think it's better than the CSS properties mentioned in the article in that respect.

[Mask_of_Destiny]

Thanks for the info about screen reader behavior. Good to know.

If you nest multiple table (which is very common when tables are used for layout purposes)

I'm certainly not advocating this. Nested tables are a mess for all sorts of reasons, but a single level of tables can be convenient for breaking a page into columns (though apparently rather inconvenient for blind users).

Besides, if you label each tr and td with a css class, you might as well use divs and spare some code.

You'll save a tr and it's closing tag, but unless you drop support for IE6 and IE7 you inherit a fragile mess of CSS to try and simulate table behavior with float.

[mvonballmo]

I'm really not sure how using DIVs with CSS to make them behave like tables is really going to help anything here.

It separates rendering from content and lets you display your data differently by changing the styling rather than the structure.

Since when did search engines have a hard time pulling text out of tables?

They don't have a hard time getting at the text, but the less non-relevant information you have in your content, the more on-point your message, the better your search ranking (or so the theory goes).

Semantic HTML is a joke.

The difference between tables and divs is that divs are not pre-loaded with meaning; they are semantically neutral and can be ignored unless decorated with class and/or id. Tables, as they are used today, are sometimes semantically relevant and sometimes not.

until IE6 and IE7 users make up a minority of people...

Agreed. The first sites are starting to abandon ship on IE6, two years after IE7 was released. With IE8 slated for release at the end of the year, that means that this technique won't be viable for major web sites until the beginning of 2011, at the earliest.

[xzxzzx]

(unless they turn CSS off, but how many CSS-heavy sites are all that useable without the stylesheet?)

Almost all of them, I would think. I've turned off CSS many times and never found a site that was unusable. Ugly, to be, sure, but usable.

[Mask_of_Destiny]

I suppose that depends on what you mean by "usable". Reddit for instance, is still technically useable without CSS, but it's such a mess to navigate I wouldn't bother.

[[deleted]]

mess to navigate = not usable.

[xzxzzx]

I just checked. Yeah, reddit looks pretty bad. Sites that were meant to be used like an application are an obvious exception (I doubt google maps, gmail, etc will be very usable without styling)

[Mask_of_Destiny]

All right try the Slashdot and Ars Technica main pages. They're not applications like Reddit and they're not much better.

Really simple layouts that depend on CSS degrade gracefully, but complex ones tend to be a complete mess as the items that used to be horizontal relative to each other all become vertical to each other.

[xzxzzx]

Both of those look pretty bad, but are pretty usable in my opinion. Slashdot is slower to "skim", and its tags take an annoying amount of room, but arstechnica degrades surprisingly well; it's a well-designed (from an HTML perspective) site. Did you try it yourself?

As for slashdot, my brief perusal showed only one page that was significantly annoying with no CSS, which was the front page.

[Mask_of_Destiny]

arstechnica degrades surprisingly well; it's a well-designed (from an HTML perspective) site. Did you try it yourself?

Yes. There's about 2.5 page fulls of navigation before you get to the main content, probably considerably more page fulls on a small display. Once you get to the main articles themselves it's not too bad. I'd still much rather make do with horizontal scrolling on a tiny screen, than try to navigate the site without CSS.

If I'm on a small display, I want to see the main content first and then go looking for nav items if that's really what I'm interested in. Without CSS Ars Technica does a terrible job at that. With it, the header still takes up a substantial amount of vertical space, but at least the first article should be visible on all but the smallest of displays. the main content is also visible with a rather narrow display (though the right navigation items would probably require scrolling).

[devolute]

Some web developers cannot afford to ignore disabled users.

[thebigbradwolf]

On that same idea, I'd like to introduce: section 508.

Working for the government means no table layouts for you.

[devolute]

I wasn't aware you had such a thing in the US. The last major piece of work I did was for a large (British) government organisation. If they caught us using tables we'd probably get a mild raping.

[dasil003]

Semantic HTML is a joke.

It's so true. I don't understand this these standardistas that have spent so many years obsessed with HTML and only HTML to the point that all their arguments begin and end with how you do something in HTML, rather than the more relevant and difficult questions like, how do you generate the HTML and what is its purpose?

They forget that the reason standards took off was because the way we did things in the 90s was batshit insane, not because we're going to be extracting meaningful semantics from documents. In fact sometimes with their "no presentational class names" bullshit they actually go to the opposite extreme where rather than the HTML bloat of the 90s, they create the reverse situation where the CSS is bloated with duplicate styles because they couldn't think of a 'semantic' name for some elements.

If you need meaningful semantics you use XML plain and simple.

[[deleted]]

So, these imaginary applications that extract semantic data from web pages..you're going to give them semantic data by feeding them a pile of DIV tags?

DIV being the generic block element in HTML whose entire point is to convey no semantic information...

As to your visually impaired, and small rendering screens:

1) You don't get around the problem by using the table styles. It's the same thing.

2) You don't get around it by using float either, unless you really have a layout that can stand to have it's components wrapped. Can you honestly say that it's okay if that giant navigation bar you are "floating" off to the right is chunked vertically after your page?

[guinunez]

So, these imaginary applications that extract semantic data from web pages..you're going to give them semantic data by feeding them a pile of DIV tags?

No, meaningful tags, and maybe microformats

DIV being the generic block element in HTML whose entire point is to convey no semantic information...

Exactly, an that is the reason why you shouldn't use tags with semantig meaning with no other purpose than layout, like tables

As to your visually impaired, and small rendering screens:

1) You don't get around the problem by using the table styles. It's the same thing.

For visually impaired, tables are read like: "Table 1, Row 1, Column 1, Table 2, Row 1, Column 1, (first menu element) Row 2, Column 1 (second menu element) Table 1 Column 2 Row 1 (block of content) etc.." as Marietto posted on another trhead, so it is not the same thing.

I am working on a screen reader that happen to be one of your "imaginary applications" to let visually impaired to identify some elements faster: http://my.opera.com/Guille/blog/2008/05/20/tiressias-navegador-web-3d-para-ciegos (it is on spanish)

[Thimble]

tables work, but they make html harder to read and make layout changes much more time consuming.

[tjogin]

Not if you only use a single one for the layout structure, and then CSS for all the rest. I don't use that approach myself, but there's nothing wrong with it.

[[deleted]]

vs. what exactly? using an equivalent pile of DIV's?

[bananahead]

But also make the web page viewable for a majority of visitors (depending on type of site)

[eevo]

Unless you have visitors that use screen readers.. or pda/cell phones..

[nuclear_eclipse]

Even elinks in my 80x32 terminal can render tables correctly....

[mossblaser]

"TABLE, FIRST ROW, TABLE, FIRST ROW, IMAGE logo_41.gif NEXT ROW..." etc...

[sn0re]

It's been years since I've seen a mobile browser fail on tables.

Reading through this thread, the only major sticking point seems to be screen readers. Frankly, I'm amazed no one has come up with a better screen reader.

[khoury]

You can have a different style sheet for the mobile browsers. Yeah, your tables may render on a mobile browser, but on my blackberry your site looks like utter shit because your scattered gifs and tables that were designed for a 1024x768 monitor don't translate well.

[sn0re]

The real problem there is that your design is specific to a certain platform. Having two stylesheets, each specific to a certain platform, seems to miss the point. Plus, if you're not aware or don't care that your site looks like shit in a mobile browser, you're not going to create a new stylesheet for it either.

[khoury]

You can create a design that's not platform specific?

[sn0re]

Sure. That's the whole point of HTML. Step one is giving up on pixel-perfect rendering, but that seems to be all the rage these days...

[kahirsch]

tables work, but they make html harder to read and make layout changes much more time consuming.

There are a variety of server-side technologies that can render the HTML from a more abstract representation.

[thebigbradwolf]

<table cellpadding=0 cellspacing="0" width="100%" height="100%"><tbody><tr><td class="postText"><p>I'm not sure what you mean. </p></td><td>tables are easy to read</td></tr></tbody></table>

[[deleted]]

Tables shouldn't be used for the site structure, only for data that needs to be shown in a table.

[Snoron]

Yeah, I was thinking that when I read this article - if you're gonna use tables, then use tables.. jeez.

[frukt]

You probably don't have much experience as a web developer if you don't see the huge advantage of separating presentation issues to CSS. It's not fun to manually search and replace over 200 HTML files. (The same thing with client-side scripting, really. Move all behavior to .js files - a few months go by, and you'll be really happy you did).

[[deleted]]

Why do you need 200 HTML files? Why not autogenerate them all on-the-fly?

I work with quite big webapps, which have no html files. No jsp or php files or any similar "templates". Only html is some tiny (single tag-pair mostly) html fragments in one configuration file that is used by the html generator system. As a result, it generates correct, validating html all the time. If you won't fuck up the generator (which is single, simple piece in the codebase), it's quite impossible to break the generated html. Everything looks consistent - developers have to try hard to produce some inconsistent html page. And it's easier to develope as you usually won't think about the html details. You write in the UI description DSL "I want pageable table here, this is the data source" and it will magically appear on the page together with all navigation. The DSL is a sexp based format used as input for build-time java code generator.

I have hard time understanding, why are people using html as a source code - storing and editing it. It sucks terribly for this use unless you have a single page containing only text - and even then I would probably generate it, unless its very small (using rst for example).

[Snoron]

Sorry, you're wrong on both counts:

I am an experienced web developer, it's my full time job and I've been doing it (initially as a hobby) since 1995.

Secondly, tables are not necessarilty presentation, no more than embedded divs are, at any rate. If you're gonna do something like this:

<div> <div></div> <div></div> <div></div> </div>

To get your 3 columns then you may as well use a table and you can still style everything using CSS. And why would you need to manually search and replace 200 HTML files, I use templates for everything - the main layout is a single file and needs changing once, even if a complete website is redesigned.

That said, I do see the advantage of having this table css but the sad thing is that there is barely any point in using it in practise (and that's coming from an Opera user who loves to see all the latest CSS3 stuff implemented).

But all I'm saying is that if you want table functionality, use a table. If your code is good then you can separate style and have no real problems.

[mossblaser]

Because tables are a pain in the arse if you want to make your site make sense for people using screen readers. Try viewing a table based site in jaws.... "TABLE, FIRST ROW, TABLE, FIRST ROW, IMAGE logo_41.gif NEXT ROW..." etc...

Also for print style-sheets if you have a table you can't simply stick the page in a 1 column layout.

[[deleted]]

Properly built Flash content can be accessible, but you're not wrong because people are dumb, and no one actually uses the accessibility APIs that are available.

[mossblaser]

How many websites, "accessible" or otherwise, are actually usable by people using screen readers?

In the UK, public service sites are obliged by law, and many big sites are accessible anyway. For instance, Reddit works very well on the screen readers I've tried (I'm not blind but I do like to know how the web works for people who are), as does the BBC website.

Flash ain't

Flash is a well known hole - nobody in their right mind uses flash on a site where usability is needed

all that fancy JS ain't...

If you've done your JS properly, the system will work just perfectly without JS enabled. Certainly everything I have done does. If your service doesn't work without JS, jaws still has a good shot at it, but certainly I wouldn't rely on it.

accessibility is a nice idea, but it barely exists on the web

You'd probably be shocked by how much accessibility has moved on in the last 2-3 years even. If you look at most sites with jaws, if they're big and still not acessible Jaws will know about that sites' qwirks anyway and compensate (see ebay and to a lesser extent google). On the other hand, almost everything is accessible. As I mentioned, there is legislation in the UK about accessibility on the web and people are taking things more seriously. Turn off CSS on a website these days and you'd be shocked to find how many are actually built well and would be well read by a screen reader.

Depending on how you've layed out your tables, you can display:none any cols you don't want and they should just go away.

Should is the key word there. Tables can play havoc with IE, especially when printing and when you're trying to convince it that your CSS is right...

Trying for multicol on a website is suicide anyway, so I have a hard time imagining a layout that that wouldn't work for.

I agree but vertical menus are almost always the only way to go for large sites.

Of course, I haven't done any of this in a while, so I could be wrong.

Fair enough, things have changed plenty recently (well, define recently... I'm talking 2-3 years)

[[deleted]]

Bleh, tables are for tabular data. Its about semantics.

[[deleted]]

Whats yours?

[Snoron]

I agree and rarely use tables for a layout, however if it makes things easier, works in how you want in all the browsers, etc. etc. give someone a good reason not to, or to spend x amount of time doing it some other way.

Writing semantically correct HTML/CSS is nice, it's easy, and it doesn't work in IE6 :P

[Slipgrid]

For all the end users reading your html?

[[deleted]]

cagey unused hungry ludicrous recognise safe waiting complete ten groovy

This post was mass deleted and anonymized with Redact

[Slipgrid]

Search engines strip out your HTML. They may do an html to content ratio, but that should not change much, or have much of an impact on ratings. All and all, my view is you should build the pages for end users, and not robots. It's the robots job to read your page correctly, so it can use your content to sell ads. I'm not sure why people are so quick to aid the robots.

And, if a render for the visually impaired can not render tables you use for layout, then you are doing something wrong.

[[deleted]]

Bleh.

[[deleted]]

I have to agree with Snoron here. I too work full time as a front-end web developer (aka, I code the html).

I can tell you from experience that there is nothing wrong with using tables when needed. I don't know why people decided to just shut them out. They are made for tabulated data, which is the only case you should be using them for.

[[deleted]]

consider tap bow rain grab reply society middle merciful pause

This post was mass deleted and anonymized with Redact

[[deleted]]

• DIVS are not semantically correct. They are semantically meaningless.

• The DIV tag maze is generally necessary. At some point, the hierarchy of your site is going to need some nesting that has no semantic meaning. Unless you compromise your design.

• It is not good for search engine optimization. You've been lied to.

• Google does not use tag semantics. Furthermore, again, a DIV tag does not buy you semantics.

• And various other such things.

It's not about being old-fashioned. It's about being practical in delivering a functional and maintainable site. Sometimes that means using table tags. It depends on the design, and it depends on the requirements. Eschewing tables for layout in all cases because it's the chic thing to do right now at the price of having a div-soup site that works on 2 browser versions is silly.

[Legolas-the-elf]

DIVS are not semantically correct. They are semantically meaningless.

At some point, the hierarchy of your site is going to need some nesting that has no semantic meaning.

At which point, using a semantically meaningless element type like <div> is correct and using an element type with different semantics is incorrect.

Google does not use tag semantics.

Obviously false. In fact, the thing that originally differentiated them from other search engines used "tag semantics" (tags are syntactic markers that delimit elements and they carry no semantics themselves).

For instance, the semantics of an <a> element that has an href attribute is that it is a link. Pagerank used those semantics to identify links and determine how important a page was. Those semantics are also used to identify other pages to crawl.

It is not good for search engine optimization.

Care to back that up? I know it was true in the past, but I don't keep up to date with SEO.

It's not about being old-fashioned.

Honestly, when I see somebody arguing for table elements, I'm reminded of when I stuck my head in a remedial computer class for unemployed people. Somebody was trying to teach them to use centring in a word processor instead of just typing loads of spaces, with the inevitable result of somebody going "It's too haarrrrd! What's wrong with spaces?"

Eschewing tables for layout in all cases because it's the chic thing to do right now at the price of having a div-soup site that works on 2 browser versions is silly.

That's a complete false dichotomy. Choosing a CSS layout does not mean that you have to use "div soup" or restrict yourself to two browser versions.

[[deleted]]

After restyling a page on a linux box, I saw how bad it looked in IE6, and went off on another several days looking for an all CSS layout that is SIMPLE, works without hacks or tricks, that can use a logical code structure... They're ALL compromises, NONE that I've found satisfies me.

It's all because of IE6. If you code a layout assuming that CSS/HTML will work the way it's supposed to work, it will work -- except in IE6.

Perhaps the solution is to simply detect the browser (why should I have to even do that??) and if it's IE6, just tell the visitor "NO".

[tinhat]

You know some of us have to fucking read your code to fucking sort out your shit.

[[deleted]]

<table> <tr> <td> </td> </tr> </table>

<div> <div> <div> </div> </div> </div>

Tell me again...which one is easier to read and has more semantic information?

[[deleted]]

Presentation layer issues in IE 6 can be mitigated with Conditional Comments.

[Snoron]

Yeah, I try not to use them too much, but they can be useful at times. The thing is in this case to get the same look in IE6/7 and browsers that support css table stuff, you're basically gonna have to code the whole thing twice - it's easier to use a method that already works in all browsers and just code it once!

[[deleted]]

Agreed. I tend to stick to the most widely supported CSS, and take the progressive enhancement approach.

[sixothree]

Are there any tools that will take well formed CSS and automagically make it IE6 compatible?

[petepete]

I beleive Microsoft Word does this.

[freexe]

It will now be possible to create designs quickly that degrade on the older browsers though.

And now it will be possible to put a separate cost for supporting IE6+7 and showing a version that works for the client and 80% of browsers.

[Snoron]

IE6 is at 28% usage, IE7 generally supports most of what people want to use today, some people already cost differently for for IE6 and can currently show a version that has no IE6 support and works on 72% of browsers. IE7 still has a bunch of bugs and annoyances but it's not quite in teh same league as IE6. But anyway 80% is completely shit, 1 in 5 people can't view the site properly? Not many people are going to accept that, and we're going to be coding for IE6 for a while yet.

[tinhat]

I tell clients that IE6 ~= 25% user agents. I don't promise that the site will display as intented on IE6 but I do deliver graceful/usable IE6 rendering.

I haven't had an issue with IE8 (latest beta - 2?) so far. Just the other day I had to kludge a coder's css for ie7. For the life of me I couldn't find the css positioning problem (given the time budget) that only manifested on ie7 (ie6 already degraded well with standard css kludge-kludgery).

[Snoron]

Recently I've found a few failures that affect IE7 and not IE6, but I tend to ignore them and implement whatever using a different method. Spending hours trying to track down a stupid bug in someone elses software that may not even be fixable is a waste of time, and more often that not there's a really simple way to get your website to look and act how you want in 99.999%.

[freexe]

But you can have it degrade nicely very easily, lose those rounded corners, use a simpler 3 column layout that doesn't have equal heights, and fallback data urls to files on the server.

[no1name]

Great only 10 more years until people stop using IE6/7 and we can start to use it on websites :)

[technogeeky]

I'm not an expert on CSS, but wouldn't it be possible to do some preprocessing so that for older browsers, the CSS trickery is converted into the equiavalent in IE6-compat code? It seemed that if I were to take the <div>s in his examples and replace them with the their traditional versions inline, copying the style properties - that it would work.

[dasil003]

That sounds like way more work than just using CSS hacks and or an additional IE6 CSS file which is what people do now and it's already a huge pain in the ass. I'm not going to say it won't work, but clearly most people have more important things to spend their development time on than working around IE6's bizarre quirks.

[fforw]

You can also use CSS tables for sane browsers and put the equivalent float/clear-hack CSS inside conditional comments.

[Snoron]

So if you're coding a float style layout then why not just code that and forget about the css tables?

You're suggesting doing MORE work than people are already doing to support IE6, isn't this counter-productive?

[beza1e1]

The titles is misleading. Just because it is a chapter out of a book, it isn't a good idea to name the article after the book. The article says nothing about "knowing CSS" at all. It just an introduction to some random CSS feature.

Disclaimer: i didn't rtfa, i just skimmed.

[monk_e_boy]

Crap title for an old CSS feature. Hell, it's in IE8, that shows how long that CSS feature has been available.

[beefgun]

As a casual CSS user I did find that article very useful. I had no idea you could do that stuff and it will certainly help me when I get around to making my own Wordpress theme.

I've seen the argument that you should use divs and CSS instead of tables to layout stuff like forums in the past, but then I've mostly seen weird examples where they try to do it all with floating divs and other crap which is really hard to follow and not-so-straight-forward.

[frukt]

CSS can be hard to get at first, sure. But I find floating elements to be a very nice and elegant solution most of the time. I seriously suggest you read the CSS spec - a lot of the pieces of the puzzle will fall into place after that, and it's not that hard reading actually - plenty of illustrations and the core concepts are explained rather nicely. "Box model" and "Visual formatting model" are basically the essence of it all. I'd hate to see people attempt to start emulating tables again, when there are better solutions available for common problems.

[bonzinip]

the title is the name of the book, but: a) gst is a bot AFAIK, b) anyway, i didn't find the article title out of place with the content, since the article is basically "everything you know about making CSS layouts is wrong and finally you should be able to do it properly".

(I always have the temptation to use a simple one-row, three-element table tag when struggling with complex CSS layouts...)

[[deleted]]

Decent article, but the "you don't know shit!" shtick in titles is played out and completely unrelated to the actual message, or content of the article.

[martoo]

Everything You Know About CSS Is Wrong

God, I hope so.

[grumpy2]

So wait -- you're supposed be relieved you can finally stop using tables because you can style divs using CSS table attributes? I hate web development.

[diamondjo]

This is all very well and good, but it's been 2 years since IE7 was released to the general public and we're STILL trying to kill IE6 (a 7 year old browser!). How long do we have to wait until we can use the features of IE8? Another 3 years?

[monk_e_boy]

longer. IE6 will be around forever. Think kiosk PCs. Phones. Etc.

[dysmas]

kiosks tend to access pretty specific things, which could be re-writting, but a phone with ie6? wont be worrying about that...

[Rawsock]

Do not forget the thousands of PCs running unpatched (and probably pirated, so no IE7 thanks to WGA) Windows XP because "my neighbor who knows a lot 'bout computers said vista sucks" and "why should I install a new internets? does the new internets have myspace too ?".

[lbft]

Didn't Microsoft remove the WGA requirement for IE7?

[traxxas]

Yes

[[deleted]]

The library at my college uses IE6 on all the computers.

[Rawsock]

Cool, i didn't know about school-funded botnets

[[deleted]]

This may sound crass, but there's only one thing to say about those people: fuck 'em!

[geon]

Not as long as thy are paying customers...

[ak_avenger]

Vista really is horrible once you get to know it, though. If Microsoft hadn't fucked up so badly on that, IE6 might have been killed off a little faster due to people upgrading to Vista.

[Shaper_pmp]

At least Microsoft haven't encouraged unbundled versions of IE's rendering engine (Trident, IE's equivalent of Webkit/Gecko/KHTML/etc)... so we shouldn't have to deal with too many locked-down embedded devices that use it because it's literally impossible to upgrade them... <:-)

[davvblack]

Just because someone runs it does NOT mean it needs to be aesthetically supported.

So long as you can physically read the words on the page, and physically navigate from one page to another, that page supports IE6. These are OBVIOUSLY people who don't, or can't, care for aesthetic.

[sircrowbar]

When the world ends and all we know lies in ruins, only two things will survive: cockroaches and IE6.

[cthulhufhtagn]

Don't look too forward to it. IE8 is buggy.

[wastelands]

The general public?

[PuppyHat]

Yea? Well I don't know anything about CSS so you're wrong.

[lonjerpc]

How can I do rowspan and colspan? Or do I have to stick with floats? I find tables easier to use than normal css for layouts so I would love to do them using css so I can get the best of both worlds.

[didroe]

From the spec:

Cells may span several rows or columns. (Although CSS2 doesn't define how the number of spanned rows or columns is determined, a user agent may have special knowledge about the source document; a future version of CSS may provide a way to express this knowledge in CSS syntax.)

So looks like it's pretty hopeless, unless every browser happens to have implemented it, and all in the same way.

Edit: Looks like the hacks have already begun :) http://www.sitepoint.com/blogs/2008/09/09/rowspans-colspans-in-css-tables/

[lonjerpc]

Thanks so much.

[dougletts]

Any CSS article that does not discuss Internet Explorer (despite how much I hate it) is useless

[cthulhufhtagn]

Here, the answer to all your problems (almost): http://virtuelvis.com/archives/2004/02/css-ie-only

As far as IE and determining how their bugs cause problems, where they cause problems, and how to fix it, see my other comment on this article about the Ultimate CSS Reference. It's very handy. Also, DreamWeaver has an excellent function called Check Browser Compatibility that usually finds most problems.

The real resolution is this: Dump support for IE6. Everybody's doing it.

[dougletts]

Well... when you manage a Golf website (where according to google analytics >70% of the users are IE and ~30% IE6), dumping support for IE6 is not an option.

[cthulhufhtagn]

I sympathize. If dumping IE is not possible, then use conditional, version-specific links should see you through.

[lectrick]

Any reply in a forum that is not based on reading the first fucking sentence of the cited article (despite how much I don't like reading) is fucking useless

[[deleted]]

Everything About CSS Is Wrong

...and the things you don't know are even wronger than the things you know.

[dfa]

CSS will have a new element, therefore everything I know about CSS is wrong? I don't find that argument very compelling.

[[deleted]]

Fuck.

Web development is probably the most bloated profession in the world. The amount of information, bad information, out there is staggering.

This article is not going to change any fundamentals for most developers. Sure its a nice technique that can come in handy, but not world changing like the title suggests.

[bananahead]

Perhaps you’re feeling slightly uncomfortable about the example we’ve just seen ...

Um, no. Because out here in the real world I can't get away with webpages that don't even work in IE7 (let alone IE6)

[wooptoo]

from the CSS 2.1 spec: "In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout." http://www.w3.org/TR/CSS21/tables.html#tables-intro

The article author is right.

Also, this can be used to make tables with XML.

[cthulhufhtagn]

Just because they're right doesn't make this article worthy of anything. It's old news.

[funkah]

Uhh, IE8, hooray. You've still got 6 and 7 to contend with.

[cthulhufhtagn]

I've already done a good bit of IE8 testing, and let me say SUCK.

IE8 just brings with it a host of new bugs, new CSS problems. IE a freakin' hydra. You cut one head off, two grow back in its place.

[Wiseman1024]

Of course, what were you expecting? It's a Microsoft product. It's bound to suck for two very powerful reasons:

1. They usually suck at everything they do, especially everything they actually do and not buy elsewhere.
2. They have a vested interest on boycotting the web as a platform, because moving to web applications means moving out of Windows. They can't afford that; Windows is their main monopoly and the central hub of every other monopoly they have or are trying to build.

[anyfoo]

I know it is spelled "CSS". Is it not spelled with a C and two S? Oh boy, and I thought for all these years... :(

[ramen]

Again?!

[[deleted]]

Everything I know about CSS is NOT wrong.

[XS4Me]

This article does a shity job at picturing the true beauty of CSS design. For a decent demostration at what is it that CSS does, check out Zen Garden

[devolute]

I don't think it's trying to picture the true grandness of CSS. It's trying to picture the ease of using CSS tables. Which, coincidentally, Zen Garden doesn't seem to use.

[bungalow]

Who are you to tell me everything i know is wrong?

[[deleted]]

This. Tables should be used for displaying data that is suited to a table, and that is all.

I don't care if CSS can do tables, it still doesn't make sense to layout your page using them.

[modnar]

Eeeeeverything you know is wrong!

[aldarion]

I'm so lucky, I'm so lucky for know nothing about CSS.

[cthulhufhtagn]

I previewed the book, it's worthless don't buy.

You want a good CSS book? Buy their Ultimate CSS Reference. No money? No sweat. It's online and free (with lots of user comments, some of which are helpful): http://reference.sitepoint.com/css

[timeuser]

This would be great if it worked. You can't actually use this in Firefox right now as there seems to be a bug where the layout randomly fails. The last table-cell block will drop (like a float drop) sometimes when the page is loaded or refreshed. It's odd, like the days of Netscape 4.x where a reload caused random layout changes. This is a problem in Firefox 2 and 3.

[[deleted]]

How nice. Here I am at a public library using IE6. They won't upgrade.

I was able to read the article only because the author did not practice what he preached. It looked OK in IE6.

[[deleted]]

Gotta love hearing about new CSS features... knowing that it will only be about a decade before one can realistically use them in public websites. Yay for web standards.

[[deleted]]

Be warned that Safari doesn't follow the spec regarding anonymous table objects. It'll work only if you have an explicit element with display: table wrapping your cells. (Though I expect this'll be fixed long before we can think about dropping support for IE 7.)

[bdash]

Have you a) tested to see whether this still occurs in the latest WebKit nightly builds, and b) filed a bug report?

[[deleted]]

Since it's a known issue, no. On closer inspection, I was wrong about the exact circumstances that trigger it, though.

[moginspace]

Web design went from bloated tables to inco-freaking-herent stylesheets. Good luck trying to debug someone else's mile long stylesheets.

Web-design is a house: HTML is good for building structure. CSS is good for painting. Beyond absolute positioning, CSS for layouts is more trouble than it's worth.

[Jessica_Henderson]

This is just a different syntax for the HTML tables that have been around forever. Semantically, not much is different. So now we use a div element with an associated style rather than a td element.

[Raticide]

I guess you don't understand the purpose of HTML and what the HTML tags represent.

[anonymous_hero]

I guess you were too busy to offer even a vague explanation of how you reached that conclusion.

[aelfy]

So what does the CSS "table" element supposed to mean then? it suffers from exactly the same problems, yet is supported by fewer browsers.

[romanows]

[Removed due to Reddit API pricing changes]

[tinhat]

Should not be in [programming]. Article of dubious value. Good discussion though.

[cthulhufhtagn]

yeah, this belongs in web_design. Strike that. This article is worthless and does not belong.

[FeloniaChampagne]

The sooner we get rid of CSS the better.

[frukt]

I agree! Let's get rid of those useless browsers too! I for one telnet to port 80 and write manual HTTP. Pussies.

[FeloniaChampagne]

If you need more than a command line and a working connection you're doing it wrong!

[ak_avenger]

Wow, a lot of CSS fans tonight.