Web Design: CSS vs. Tables
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.
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
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.
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.
- Alan Knighting
- Posts: 4120
- Joined: Mon Oct 18, 2004 7:26 am
- Location: Monflanquin, Lot-et-Garonne, France
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
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
Yes it does. It was designed in early 2001! So, in that sense it's pretty ancient. That said, it uses CSS too.Looking at Garri's site I find that it uses tables - shock horror after what has said about them.
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.
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 . 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:
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.
It really is more fun than Sudoku
Winifred
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 . 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:
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.
It really is more fun than Sudoku
Winifred
- marcus
- Posts: 624
- Joined: Fri Jun 03, 2005 10:37 am
- Location: Lot-Garonne / Dordogne borders
- Contact:
Constructive criticism
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
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
Tables, CSS and standards
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
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
- marcus
- Posts: 624
- Joined: Fri Jun 03, 2005 10:37 am
- Location: Lot-Garonne / Dordogne borders
- Contact:
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
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
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)
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)
- Alan Knighting
- Posts: 4120
- Joined: Mon Oct 18, 2004 7:26 am
- Location: Monflanquin, Lot-et-Garonne, France
Whilst I totally agree with Katt on the virtues of CSS there is one thing I do not agree with.
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
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?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.
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