CSS - A little help required!

[FireFleur]

I will add some more, because someone tried to polarise the stance by claiming someone thought tables were perfect

Well, tables are not perfect and sure designs that don't rely on other elements in the design are powerful in breaking new ground in flexible design and a good step towards a more semantic web. But, a grid layout is the most used design tool, it aids the reader and producer to have a grid layout, this is why newspapers, magazines and books are the way they are.

Floated and positioned absolute divs, are a very poor substitute for a grid, hopefullly CSS will get better and a grid structure that is explicit will appear.

Sure, web is meant for multiple devices, but don't think getting rid of the grid suddenly makes a page readable without a sideways scroll, when you have an image that will force that scroll anyhow.

The truth is, it is better to suck it up and produce a different layout for different devices where dimensions or input can be very different. XSLT and XML address this issue better than CSS does alone, because the whole structure may have to change for different devices.

 

[cmcp]

...

 

[FireFleur]

and another thing ...

 

[awebapart.com]

I must say that I'm with FireFleur on this issue, and he did originally say tables was the "quick way" - although saying such a thing can sometimes start up a very long debate! - and then go on to mention CSS.

With FireFleurs CSS challenge, there's probably more simple examples where it is easy to achieve something with tables but difficult to achieve the same with a single CSS code base that works on the major browsers including IE6, e.g. multiple table cells with content horizontally and vertically centre-aligned in the cell, where the cell contents can go onto multiple lines, or the elusive 3 column fluid layout. To be fair there are also examples where it is easy to achieve things with CSS where it is impossible to achieve the same with tables.

Adhering to 'standards' can boil down to what your interpretation of 'web standards' is, whether it is de jure or de facto web standards. A good majority of designers are in the de jure camp (XHTML/CSS is great, tables for layout are bad), whereas I'm more in the de facto camp (tables are OK), and my idea of standard code is code that works in different browsers without having to tweak it for different browsers.

A proportion of those in the de jure camp usually exhibit certain traits or commonalities, including a hatred and sometimes ignoring of the IE6 browser, and sometimes an experience of developing only simple static websites, possibly not fully content driven, where content can also mess up layout.

A proportion of those in the de facto camp also exhibit certain traits or commonalities, including getting their websites working in IE6, and possibly working on more complex websites with more complex structures and information layouts, content driven where layout has to cope with different content, possibly ecommerce, where the older standards like tables can provide a more practical solution fit, not ideal fit, but practical fit considering all the other work required of a more complex website.

Looking at the different poster's websites on this thread who are for CSS and against tables, I can safely say that a good proportion of their websites do not work correctly in IE6 and some even appear to be broken in IE6, with some navigation not available. There is one exception tbomedia (even though tbomedia has remained quiet on this issue table/CSS issue), whose Wordpress site works fine in IE6, and the site structure is quite complex, so well done tbomedia. FireFleur's sites work fine in IE6 and the other major browsers.

Will I move away from tables? Eventually. Perhaps when I have the time, although it is low on my priorities and there is little evidence that tables effect SEO (check the tables on this site, and this site's SEO rankings aren't that bad), not even much evidence that w3c compliance affects SEO. Perhaps when IE6 browser share is so low that its support can be ruled out. Perhaps when the standards and browsers have progressed enough so there is a way to write one piece of standard code that works in the major browsers. Will IE6 die out soon? Unfortunately no, not with likes of some netbook vendors still selling new WinXP netbooks with IE6 installed as default.

 

[woodss]

Oh my god - I can't wait for 5 years time when we come back to this discussion and you've taken the time to actually learn CSS before writing an essay about it.

The simple fact is, the TABLE tag is structural markup for TABULAR data. The fact that it used to be utilised for layout purposes is irrelevant and was a consequence of the lack of browser technology of the time.

Seperation of concerns via CSS is the only way to go for providing a pure cross-platform, cross-device solution which degrades naturally and SEMANTICALLY which is of vital importance for those using screenreaders et al. Don't forget, Google is the worlds biggest blind user. As for no evidence of tables affecting SEO, I eem to remember Google favouring those documents which were easy to index, and contained more content than markup. If you enclose your information in various table, tr, th, td tags etc you're creating a monolithic underlying structure which would not even exist if you used CSS.

And if a device didn't support CSS, you'd see the information in a sementically correct format, i.e. a list of options, in native HTML.

I'm sorry but you really need to go and do some reading. Yes, you CAN do it incorrectly in tables that isn't in dispute. Or you can do it properly for very little effort.

It has nothing to do with adhering to standards - it's about structuring your pages properly. When writing your HTML you should be thinking very little about what it's going to look like, you should be focusing on how the information is structured. Then make it look pretty with CSS. Using tables for layout is the anti-thesis of this rule and quite simply, if you think otherwise, you're WRONG.

 

[FireFleur]

I will no longer reply to this thread.

Not a man of his word is Woodss.

Look, Woodss it is just your opinion, but bad practice is generally reserved for things such as memory leaks in daemons, and IIS has had quite a few of those over the years. You have to logically prove bad practice and you have failed to do so here, you have just expressed opinion.

You will notice I gave both a table based solution, and one which could also avoid the use of tables, I am not polarised on this issue at all, I use what works efficiently, and that includes the ability to make fast updates.

And, CSS doesn't mean table-less, CSS makes reference to table elements and their children as well, it is part of the specification.

Table-less design was discussed over a decade ago, you're over ten years too late young chappy

 

[woodss]

I am a man of my word, it's just I can't imagine someone being so closed minded as to think they're right in the face of many people telling them otherwise.

All of your patronising aside (i can more than hold my own on this subject mate), the simple fact is you're advocating incorrect solutions to people.

You can go on and on about how CSS is unsuitable for the most obscure layout - and you'd be right, there are some things CSS struggles with. That doesn't make the use of tables the correct solution, it makes it a compromise based on the limitations of CSS at the moment.

The OP, however, doesn't have that issue. They wanted a simple way to add some navigation to their website. No obscure layouts, no trickery.

That you opted to provide them with a solution that used something unsuitable, for the sake of speed and simplicity (I and others vehemently disagree with this, especially in terms of future maintenance) speaks volumes about your expertise and work ethic.

I once had a colleague who half-arsed his implementations and he ended up fired. I guess on a forum you're not held as culpable when you dish out irrelevant and quite frankly incorrect advice.

 

[FireFleur]

Disingenuous, deluded and arrogant, is there no end to your antics Woods?

If tables scare you Woodss that's ok, you continue building designs that break and wallow in design bad practice, that's your look out. But if you worked for me, your feet wouldn't touch the ground as you were shown the door.

You are wrong in your thinking, and I suppose most of the time you just hurt yourself, but when you try and force your faulty thinking onto others that is bad advice in a nutshell.

 

[woodss]

ah I get it - you're unemployed. No surprise there then! Posting at 4am, then sleeping in until 1pm - heheh

You couldn't afford to hire me mate and I sincerely doubt you're big enough to lift my feet off the ground

This time I really will exit the thread. Wouldn't want to make you miss your sign-on appointment.

 

[FireFleur]

Woods, you are on the troll aren't you

I suspect you are unemployed, you have the signs of the insecurity it brings.

Myself, I have got too much on at the moment, sleep is taking a secondary consideration.

 

[DJames]

Send me the link and I'll take a look for you later this afternoon

A huge thank you to Cyrus at PrismTechWales for sorting out my errant </div> and thanks to all for the lively CSS v Table debate.

 

[awebapart.com]

Google is the worlds biggest blind user. As for no evidence of tables affecting SEO, I eem to remember Google favouring those documents which were easy to index, and contained more content than markup. If you enclose your information in various table, tr, th, td tags etc you're creating a monolithic underlying structure which would not even exist if you used CSS.

I have no intention of getting you to eat your words, but I can prove that google has no problem eating your words, or indexing your words, when they are within tables.

Google has been indexing table based websites ever since it started, and way before table-less CSS approaches became popular. It did it then and it still does it today. The same is true for screen readers.

Page 5 of this thread, where you mentioned about google being blind, has about 55 tables in it, and most of the content is within those tables. If you google for your phrase, you will see that Google had no problem seeing, indexing, or eating your words.

Extracting text from complex html is extremely simple and extremely fast. Have a look at this how to program a search engine interactive programming tutorial which shows how quick and easy it is to extract words from HTML page code, and that is with the slow interpreted Javascript programming language (search engines or screen readers would probably use faster compiled programming languages). Paste the much larger, much more complex underlying HTML code from this website into the program if you like and see it run, by clicking on the site's "Run Program" button, it still handles it with ease and speed. This demonstration is just as applicable to screen readers.

Code to text ratio is another issue, but there is no guarantee for complex layouts that table-less approaches provide smaller amounts of code that table-based approaches. Minimising code is a good thing whichever approach you take.

This forum website is very much table based, but its rankings and SEO are fine. This forum uses v3 of vBulletin. Another forum I know of who have upgraded from v3 to v4 of vBulletin, where v4 adopts a table-less approach has seen no improvement in SEO, and from what I can see, the underlying css/div code is just as big, because of the complex layout a forum requires. So when this forum eventually upgrades from table-based v3 vBulletin to table-less v4 vBulletin, I see little in the way of improvements being made in the SEO or readability of the site.

Out of the top 10 sites when you google for SEO, about half have tables, as do popular sites like amazon, ebay, etc.

degrades naturally

Have you seen how your site degrades in IE6? The main call to action button on your home page is not visible in IE6.

SEMANTICALLY which is of vital importance

Semantically is one of those big, blind 'em with science words, that usually gets pulled out of the hat in these type of discussions. What we have today with tables or CSS is not the semantic web, the semantic web is something very different, where we can assign meaning to content, like this piece of content is the price of the product.

Semantic technology today, is pretty basic, and for the most part involves just getting the order of your text right, getting the H2 content correctly under the H2 header in the document and not above it. And this can be achieved or messed up in either tables or CSS.

The nearest improvement we have for semantics, are the new nav header footer tags coming up with the HTML5 standard, and I don't know whether the XHTML standard has anything similar coming up, but I also do not want to get into a which is best HTML5 vs XHTML standards flamewar!

if you think otherwise, you're WRONG.

Not so much wrong, just thinking differently, prioritising things differently, and expressing a different opinion. You are not wrong in most of the things you are saying either, neither is firefleur, there is probably a lot of agreement if we read the posts carefully. But I do think we have different opinions on whereabouts tables should be placed on the good to evil scale, the importance scale, and the web crime of the century scale.

 

[cmcp]

So much nonsense talked in that thread, I decided not to get involved since FireFleur was on a crusade to prove it was possible, completely disregarding the fact that they're a pain in the arse for screen readers and don't group content semantically.

Screen readers group content sections by header. If your content is laid out in a table, the user has to tab through everything to get to it.

It was also claimed that tables would be the easiest method to achieve what the OP was after, which again is misleading because to build an accessible table you have to understand the summary, caption, scope, id and headers tags.

Yes it's physically possible, but it depends on your stance of whom you build for. I'm of the belief that my sites should be accessible with anyone using a browser, not just visual users.

It got ridiculous when folk started spouting rubbish like what does layout really mean and semantics is a blind em with science word etc.

from the quick css question thread.

 

[FireFleur]

What I particularly like is, there is not a summary, id, scope or headers tag in the HTML specifications, so not much beyond caption to understand there

Ironically I ran into a tableless site not so long after, and spaghetti CSS aside, it does make other things impossible to achieve. A classic one is being vulnerable to variable heights in divs, and therefore not having a baseline to fix to, so many of those 'templates' bust or don't bottom align when content changes - which is a maintenance nightmare.

As far as the tabing goes you can specify tab order with the tabindex attribute, and hotkeys with the accesskeys attribute.

And as far as designing aurally, tables don't hinder that, just as divs don't enable it, CSS aural sheets can be used with either.

Separation of content and design is done via XML and XSLT, HTML is a presentation markup language.

 

[FireFleur]

Semantics given by markup are normally improved by the use of a table, so that wasn't disregarded it was very much included.

Designing sites without tables is possible, but it is limiting, and that is important to realise. Over use of tables where it is just not appropriate is equally daft, but trying to fudge in a tableless layout where a table is most appropriate causes far more mischief later on, the design becomes quite brittle and the CSS gets hacked to shreds.

Why aren't you using XML and XSLT to achieve cross media and different device layouts? If different presentation views are needed then much wiser to go that route, the DRY principle is maintained and the realisation that design needs to be transformed to meet a different environment is more easily achieved with XSLT.

 

[cmcp]

What I particularly like is, there is not a summary, id, scope or headers tag in the HTML specifications, so not much beyond caption to understand there

My bad, I build in XHTML http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-tables.html

Ironically I ran into a tableless site not so long after, and spaghetti CSS aside, it does make other things impossible to achieve. A classic one is being vulnerable to variable heights in divs, and therefore not having a baseline to fix to, so many of those 'templates' bust or don't bottom align when content changes - which is a maintenance nightmare.

Not if built correctly.

As far as the tabing goes you can specify tab order with the tabindex attribute, and hotkeys with the accesskeys attribute.

Why would you want to nest information in a table and assign parts of that information tab keys when you can group it logically by headers? How would you present dynamically generated code? With new tabindexes on each cell? Where would you reference these?

Why not take a use centred approach and build in a succinct manner?

And as far as designing aurally, tables don't hinder that, just as divs don't enable it, CSS aural sheets can be used with either.

Yes they do! And yes, divs DO enable that! Remove styles from the equation and div markup still makes sense. Tables is just rows and rows of crap (unless marked correctly using attributes mentioned above)

Semantics given by markup are normally improved by the use of a table, so that wasn't disregarded it was very much included.

Improved, how so?

Designing sites without tables is possible, but it is limiting, and that is important to realise. Over use of tables where it is just not appropriate is equally daft, but trying to fudge in a tableless layout where a table is most appropriate causes far more mischief later on, the design becomes quite brittle and the CSS gets hacked to shreds.

I totally agree about appropriate use, but you seem to think tables are the best way to lay things out on a page and I think divs with CSS are.

I know they're not evil, and I do use them where appropriate. But to use them to lay out a page makes no sense to a screen reader trying to navigate inside what is essentially a maze.

Why aren't you using XML and XSLT to achieve cross media and different device layouts? If different presentation views are needed then much wiser to go that route, the DRY principle is maintained and the realisation that design needs to be transformed to meet a different environment is more easily achieved with XSLT.

Because I'm a front end developer and everything I need to build is achieved with XHTML and CSS (so I am, in a way). When we need to interact with feeds and the programming level of the CMS we get down to the nitty gritty - but we're talking about front end output so how you compose that (eg tables!) makes no difference.

It's clear you're a programmer, and clearly knowledgeable! But building for the front end has changed a lot and it's not just a case of the way things look. I'd urge you to download a trial of Jaws and see how one of your table based sites holds up.