Web Design: CSS vs. Tables

Everything to do with using your own website to advertise your rental property. Design, usability, hosting, getting listed on the search engines, optimising your site, pay-per-click, etc, etc.
User avatar
vrooje
Posts: 3202
Joined: Thu Dec 09, 2004 2:48 am
Location: Burgundy, France

Post by vrooje »

Just thought that I'd post to let you know that out of curiosity, I've decided to re-build a site that needed re-building anyway, using entirely CSS.

It's going pretty well -- but I'm having font-resizing issues (works fine in Firefox, but IE is ignoring the resizing instructions even though it pays attention to other things in the shorthand font line), and the classic overlap issues in Linux are popping up. I think there is at least one easy way to get rid of it which I don't have access to because of the graphics on the page.

I do like the fact that the code is very clean and easy to read compared to even a well-made table-based design. I wonder if that makes search engines happier. But even if it does, I'm not converting our property website over to CSS until I am absolutely certain that it will look as good in every browser afterwards as it does now.

What are the usual workarounds for these types of things? Can I make certain attributes browser-specific? OS-specific?

I dunno, it seems like all the tweaking I'm doing makes this just as temperamental as tables.
Brooke
User avatar
Garri
Posts: 1689
Joined: Mon Jul 11, 2005 7:26 pm

Post by Garri »

Brooke, although I'm not a coder or web designer I have been researching this subject for a rentals listing site, or rather a rentals listing web app, I'm currently developing.

Take a look at this: http://www.stylegala.com/articles/no_more_css_hacks.htm

Good article and states that table based designs, at the moment anyway, are more reliable cross-platform than CSS.

But like I keep on saying, like the broken record I am, we are in a transitional period.
User avatar
vrooje
Posts: 3202
Joined: Thu Dec 09, 2004 2:48 am
Location: Burgundy, France

Post by vrooje »

Ah -- what a great article!

Thanks. :)
Brooke
User avatar
Alan Knighting
Posts: 4120
Joined: Mon Oct 18, 2004 7:26 am
Location: Monflanquin, Lot-et-Garonne, France

Post by Alan Knighting »

Brooke,

There we go, font sizing is not stable. Are you specifying font size by points, picas, pixels, ems, exes or percentages? That's just one of the issues if you are to go down the CSS route at the moment.

Looking at Garri's site I find that it uses tables - shock horror after what has said about them.

Alan
User avatar
Garri
Posts: 1689
Joined: Mon Jul 11, 2005 7:26 pm

Post by Garri »

Looking at Garri's site I find that it uses tables - shock horror after what has said about them.
Yes it does. It was designed in early 2001! So, in that sense it's pretty ancient. That said, it uses CSS too.

It served its purpose but is currently being redesigned in pure CSS.

I have made it clear on here that I have recently been researching this topic for a new project which will not be designed using tables.

I can't say too much about the project otherwise Paulo will bump me off the forum for advertising, since it's in the holiday rentals listing ball park.
Winifred
Posts: 9
Joined: Thu Jun 30, 2005 9:20 pm
Location: Belhaven, Dunbar, Scotland
Contact:

Post by Winifred »

I'm greatly daring, venturing on this topic, for I know nothing about different browsers.

My holiday house site has grown rather haphazardly over the 8 years since I started with one page on Compuserve's Ourworld, to inform clients, who had already booked, about the surrounding area. Now I get practically all my bookings through the web; a particularly useful one was by a team of ornithologists who are coming next month for their 4th winter in succession.

This is a most interesting and information-packed thread. Thanks to you all. Here's my CSS story.

In May I succumbed to an advertisement for a book "DHTML Utopia: Modern Web Design Using Javascript and DOM" by Stuart Langridge. It might as well have been 'double dutch' at first, but some of it made sense - particularly the emphasis on the desirability of promoting web standards, in agreement with all that Garri has said here.

However, I was too busy all summer to look at it again until a couple of weeks ago when I realised I was in danger of becoming addicted to Sudoku :roll: . Better to use the time wrestling with applying CSS to my website, a necessary start before tackling the DOM which seems to be an elegant and useful way to deal with the cross browser problems.

I had tried CSS a year or two ago, but gave up because tables seemed so much more effective. Now, using some of the links recommended in the book, I have managed to recreate the layout of some fairly simple tables using CSS - the breakthrough came when I discovered 'float: center'.
It seems to work well, pushing the contents of the central column down if the page is made really narrow, and the viewer chooses Very Large text, but then it's fairly obvious that you just need to widen the page. The one place where I will always use a table is to present a table of charges for different months, but I think one could argue that that is semantically correct?

The first thing I discovered to my horror was that the serif font which appeared on my desktop running windows 98 was a nice solid Times New Roman whereas on my laptop (Windows XP) it appeared as a thin spidery TNR. Someone suggested I should use Georgia as the preferred serif font, since it was apparently designed for the web. Georgia gives a very good look on my laptop (can't get a screenshot from it, though) but the desktop doesn't know it.

At the same time, I am updating and simplifying the contents, bearing in mind the advice from an SEO seminar (free, with coffee) that the first thing Google at present looks for is <h1>, and only bothers with the first half page of the source file.

Maybe some of you would like to have a look, http://belhavenholiday.netfirms.com,and let me know if what you see is horribly different from my screenshot of the first page, drastically compressed and just 16 colours:

Image

And here's a screenshot of the 'non-table' on the page

http://belhavenholiday.netfirms.com/home-from-home.htm

Constructive criticism welcome (and I know the link to "about us" is not alive yet). One problem here is that bits of the border disappear if the page width is reduced.

Image

It really is more fun than Sudoku :)

Winifred
User avatar
marcus
Posts: 624
Joined: Fri Jun 03, 2005 10:37 am
Location: Lot-Garonne / Dordogne borders
Contact:

Constructive criticism

Post by marcus »

Hi
You start off saying 'I know nothing about different browsers'. Having looked at your site in Firefox there are a couple of curious, possibly browser related, problems. The text starting 'click on the picture...' is pushed to the left, but really it is the menus that are most curious. It is certainly worth removing the unnecessary underlining for the links in the menus, but also making them each the same width and then making the font size the same on each page. This is of course the beauty of CSS - define your menu and other setup once and it will be the same on each page.
So recommendations.
1. Get copies of Firefox and Opera, and look at all your files in them as well.
2. As Alan and Garri have often said, go to www.westciv.com and look through all the tutorials. Preferably buy Style Master.
3. I looked at your CSS files and they are not in a traditional format, defining layout for menus, pictures and so on. Have a look at the css file that Tony did for Tansy's site for how it should look, or even my own site if you like although it is nowhere near so beautiful as Tony's yet (you can find the css file name for a css site if you view the source code for the html file)

One of the great beauties of CSS is that both the html file and the css file become easily and clearly readable and modifiable.

And yes it is fine to use tables for data that require, for example, multi-column presentation (eg I use them for availability). This is tabulated data, and not the same as using layout tables throughout a spreadsheet.

Happily I have been out of the UK long enough never to have seen Sudoku.

Marcus
Winifred
Posts: 9
Joined: Thu Jun 30, 2005 9:20 pm
Location: Belhaven, Dunbar, Scotland
Contact:

Post by Winifred »

Thanks, Marcus, will do as you suggest,
Wiinifred
BobToovey
Posts: 25
Joined: Fri Nov 25, 2005 10:35 pm
Location: Villefranche Du Perigord, Dordogne

Tables, CSS and standards

Post by BobToovey »

Hi all,

Just though I would add my pennies worth...

Following CSS mean that your site should look the same in all browsers but it is not the case.

CSS is a standard, but not every browsers obeys the rules of the standard. For example, Firefox and IE handle magins differently, which may explain overlapping pictures and text.

Opera which is suppose to follow the standards exactly gets widths wrong and a whole host of other perculiarties. Even IE on Mac behaves differently than IE on PC!

Tables should not be for presentation. HOWEVER trying to get two DIV's to float side by side with out spilling over and overlapping it something I have not yet mastered properly! Mainly they way IE and FF handles margins and padding. So to get a site online and not to mess with it for months on end, I use a table to organise the content and use CSS to dress it up. If you do use tables then mark your page at transitional and browsers should not complain - in my own experience anyway!

I now have a total of 4 sites that use a table to make two columns, I use CSS to control the widths, borders, font size etc. I would rather use pure CSS and I admire anyone who does but tables work for me until I can do better!

Bob
alexia s.
Posts: 870
Joined: Thu Dec 09, 2004 6:38 pm
Location: Provence
Contact:

Post by alexia s. »

Hello Bob,
On your site you refer to " the article directories" - have you got any addresses for these? (The 2 that you give don't work.)
Best,
Alexia.
User avatar
marcus
Posts: 624
Joined: Fri Jun 03, 2005 10:37 am
Location: Lot-Garonne / Dordogne borders
Contact:

Post by marcus »

Alexia,

you could try

http://www.goarticles.com/
http://www.ezinearticles.com/
http://finance.groups.yahoo.com/group/Free-Content/
http://groups.yahoo.com/group/Free-Reprint-Articles/
and others

mostly they are not so good as you would expect an unlimited supply of free articles to be, I think

Cheers
Marcus
BobToovey
Posts: 25
Joined: Fri Nov 25, 2005 10:35 pm
Location: Villefranche Du Perigord, Dordogne

Article Directories

Post by BobToovey »

Alexia,

the two I have tried are;

http://searchwarp.com/
http://www.articles411.com/

bob
Katt
Posts: 1
Joined: Thu Dec 22, 2005 10:26 am

Post by Katt »

I may have missed this whilst reading through the above but CSS is not there simply to remove bloat and streamline code it has several other purposes:

It enables you to quickly change the appearance of your entire site by changing only one file

It allows you to have different style sheets for different media - so if you page is printed it is formatted perfectly for print (pretty useful I would have thought for a 'brochure' site)

It allows you to position content to make your pages far more effective for SEO

Most importantly (imho) it allows disabled / visually impaired users to access your website easily. For commercial sites in the UK and US this is now a legal requirement...and a disabled user could (technically) have grounds for litigation of your site is inaccessible to them.

I build a lot of database driven sites and CSS is a god send - I can build a whole site using one page that does everything and then attach a style sheet - hey presto - done. I can also give the user a choice of style sheets so they can select the one they prefer (either different colour combinations / font sizes / navigation layout etc....) CSS opens a world of possibilities..

An excellent book for using CSS is the SAMS teach yourself CSS in 10 minutes - very straightforward with easy to follow examples and which deals with most common layout problems.

As an aside, whether you are using linux or windows shouldn't affect the display - it is the way the browser (i.e. firefox, i.e. opera, safari etc) interprets the CSS - though as someone has already pointed out, IE for example works differently on a mac cf windows. For the record IE is a lousy browser it is not very standards compliant - my advice would be to build for Firefox then fix it for IE.

Katt

(Who previously worked as a professional web developer)
User avatar
Alan Knighting
Posts: 4120
Joined: Mon Oct 18, 2004 7:26 am
Location: Monflanquin, Lot-et-Garonne, France

Post by Alan Knighting »

Whilst I totally agree with Katt on the virtues of CSS there is one thing I do not agree with.
Most importantly (imho) it allows disabled / visually impaired users to access your website easily. For commercial sites in the UK and US this is now a legal requirement...and a disabled user could (technically) have grounds for litigation of your site is inaccessible to them.
Accessibility, whilst it should have an importance in the design of a Website, is a million miles away from the most important thing in design. One of the beauties of CSS is that it makes it very easy to incorporate access by screen readers and text-only devices. Once one is used to it, it hardly takes any extra time to incorporate those facilities so, why not do it?

This is the ex-lawyer in me speaking now so anyone not wanting to have their pants bored off should read no further.

Governments may legislate on what legal requirements must be met and there will be statutory fines for anyone not complying. That does not in itself create a right of litigation for the individual. For an individual to enter into litigation that individual would have to establish, in damages, a loss suffered personally and be able to quantify that loss. In addition, for any litigation to be meaningful and effective the individual and the Website owner would have to be within the same legal jurisdiction or within two jurisdictions between which the rule of law runs. Not an easy thing to do within the global scene of the Internet.

For instance, the individual lives in the UK but his/her ISP is based in Hong Kong, the Website owner is resident in Croatia but his/her ISP is based in Singapore. The Website doesn't include accessibility and the individual is unable to us it because of some disability. What damage has the individual suffered? Under which country's law might the individual have recourse to the law? Which country's law will give the individual an award of damages? Are those damages recoverable and in which country? Does any of it have any importance in the real world?

Now, I've switched off from that lawyer thing. I've become Fluffy again.

I'm off to pick up the goose for Christmas. Yes! it will have it's "horns and hooves" cut off. The producer rears his own ducks, geese and white turkeys. In addition, he runs a restaurant and a home workshop canning and bottling a huge range of pâtés and roulades, all free-range organic products. Can you taste the difference? Bet your life you can!

Alan
Post Reply