Too many tables

[vangogh]

The cross browser issues are more to do with a lack of skill than anything in the technology. You can develop cross browser layouts with either a table based or css layout perfectly fine. The main reason people usually argue in favor of the table based layout is a lack of skill doing the same thing with css. I've yet to see anyone offer any other reason. All the usual arguments against css could be easily solved by learning css a little better.

I've been developing css sites for years and there have always been ways to deal with the cross browser issues. Today those issues really break down to a few tweaks for Internet Explorer since most every other browser in existence adheres pretty well to the standards. My current process is to develop a site in Firefox (currently my preferred browser) and periodically test the site in other browsers. At the end I generally have about a half dozen lines of css at most that need to be tweaked for IE, which I'll include in an IE specific stylesheet. I'll use a conditional comment to show that stylesheet to IE only and can even easily control which version of IE sees it.

All told it adds about 5 minutes of development time and is quite easy to achieve. It's much easier to do than it is to explain.

Something most people don't know about tables. In order for a browser to display a table it needs to read the code twice. Before it can begin to display a table cell the browser needs to first understand how many columns and rows the table has. So it reads the code once to understand the basic structure and then a second time to display the table. If you've ever been to a site that shows as mostly empty and then suddenly the whole site appears it's generally because of the wait time while browsers are making that first pass at the table code.

As you start nesting tables inside other tables it becomes more complcated for the browser and so the wait time becomes longer.

Here's an old article about ESPN switching from tables to css in a redesign. It's from 2003. Among other things here is the savings in bandwidth as reported in in the article.

Projected bandwidth savings:

* 2 terabytes/day
* 61 terabytes/month
* 730 terabytes/year

One more thing to add to the discussion. Usually if you want to know the best way to do something you consult an expert in that something. If you want to know how to build a rocket you ask a NASA engineer and not the owner of the local grocery. Go out and find the people who are the thought leaders in web design and development. Find even one that recommends using tables to layout your site. I'll save you time. You won't find any, because there are no good reasons to layout a site with tables other than not understanding how to layout a site with css.

[nealrm]

Ok Vangogh we need to learn more about CSS. So is there somewhere on the web or a book with good tutorials? I have looked around and most of the site either offer simple or intermediate instructions. Even the "advanced" tutorials don't teach much.

[rezzy]

I would also like to note, that although I also believe CSS is the only way to layout a site. Each browser can see things slightly different.

Margins, padding, font sizes and spaces are rendered differently in each browser. Which can be a drag sometimes when trying to space certain elements in page.

A last point to why CSS is better. CSS allows it to be removed, so visitors can view your website without all the extra pictures and content. This is needed for people who are visually handicapped or have color perception problems.

Another thing that does not belong in modern design are: frames, inline css and inline code in general!

HTML is meant for visible text. Its not meant to layout out a page!

Just my two cents.

[rezzy]

Originally Posted by nealrm

Ok Vangogh we need to learn more about CSS. So is there somewhere on the web or a book with good tutorials? I have looked around and most of the site either offer simple or intermediate instructions. Even the "advanced" tutorials don't teach much.

Well, what are you looking to learn? I think theres such a variety of things you can learn. Are you looking for help in just setting up a basic page with CSS?

[phanio]

Most of the so called manuals out there for web design and layout start out with using tables. I started this way only two years ago and still use some when I just can’t get the CSS to do what I want. But, CSS (the little I know about it) does seem to work better in most situations.

I too would like to know of a good design book using CSS.

[rezzy]

For those interested I could write up tutorial for doing somethings in CSS and post it later today. I'll start with the basics and build up from there.

[vangogh]

Ok, I'll definitely put something together that's a list of resources and tutorials or write something up on my own. I've been needing ideas for my blog anyway.

Here are two posts from my blog:

2 Column CSS Layout
3 Column CSS Layout

to get you started. I actually do things a little differently now, but everything in the posts will still work and hopefully makes the concepts easy to understand. Probably time to update both posts, though.

Much of what I learned was from the books of Eric Meyer, particularly Eric Meyer on CSS. The second one More Eric Meyer... came out after I was already pretty good with css, but I assume it's just as good. In each he takes a typical table based layout and slowly works them to be css layouts. The books are a few years old so there may be better techniques now, but I would think they're still good at getting the concepts across.

To get the best use of the books download the code and actually type through each change to see what's happening.

A few tips:

I won't lie and tell you you'll be building a perfect css layout with your first site. You won't it takes some practice, but it gets easier with each site. Try to understand why something works or doesn't instead of just knowing it does or doesn't work. The why will help you solve different problems. The what just helps you solve the one.

Joel is right about the different defaults across browsers. A good example are lists. I forget which does which, but between IE and Firefox one uses margins to indent the list and the other uses padding. So when you code a list you start with

ol {margin:0; padding:0}

and then they should be the same in both browsers. When you want to add some indent pick either margin or padding and add some back in. Lists aren't the only place browsers have different defaults.

The above has led to the idea of css resets, where you zero out a number of elements. Again Eric Meyer to the rescue. He's created what's become the default css reset. I'm not using it myself since I have enough experience to know what elements I need to reset, but you may find it helpful. At the very least you'll get an idea for which elements will have different defaults across browsers.

One common thing I've seen with new css developer, including myself, is that we gravitate toward positioning to layout a site. Positioning (absolute and relative) is generally not the best way to layout a site. It can become unwieldy in a hurry. Try to master floats though they may seem more difficult to work with at first.

A big part of the trick with css layouts is realizing you don't need to do as much as you think with floats or positioning. Usually you can let everything just lie where it naturally will and then find the few key elements that do need to be floated or positioned.

If you look at most websites you'll see the layout is generally some combination of the following:

header
footer
main content area
sidebar

There may be one sidebar 5 sidebars or no sidebars. You might even think of the sidebars + main content area as a set of columns.

Try to master creating some basic layouts and then start refining what's inside them. When you see a design image, think about how the various parts might fit into one of the elements above.

Not every designs needs to or should fit into the above and if you can find ways to break out of the typically you've probably created a more interesting design. But before you can break the rules successful it's good to know the rules and why they work.

[nealrm]

Originally Posted by rezzy

Well, what are you looking to learn? I think theres such a variety of things you can learn. Are you looking for help in just setting up a basic page with CSS?

No, it more advanced than that. I'm trying to get an image, the accompaning text and background to resize correctly. So far I have been able to only get 2 of the 3 to scale right.

[vangogh]

Feel free to post the code or link to the page in question if it's online. I'm sure someone can figure out a way to help make it work.

[rezzy]

Originally Posted by nealrm

No, it more advanced than that. I'm trying to get an image, the accompaning text and background to resize correctly. So far I have been able to only get 2 of the 3 to scale right.

Please link them. I would like to mention a tool which I found very useful in helping me work through CSS, and programming projects I work on.

Its a Firefox plug-in called "Web Developer". When creating css it will highlight the divs and provides alot of other helpful tools we programming the behind the scenes code and for getting layout stuff right.

One problem maybe, you havent used the right hook. CSS works by you creating a hook in the html code, then refrencing that in CSS and manipulating it.

For instance.
HTML
<h1>Header Text </h1>

CSS
h1 { font-size: 12px; }

This will make all h1 tags a small 12 pt font.

I just thought of another reason why CSS is great. It allows a level of interactivity to be introduced into your site. Hoverover effects in text, images etc. Without using javascript or some other bulky program.