Advice on moving a design to tableless CSS

[mcahill]

http://www.atexmedia.com/index.php

The design is currently neither fish nor fowl. It's got tables with css and it validates. It's fixed width, because the CEO requires that it fit in a single 800x600 screen without scrolling. Does tableless design buy me anything here? What's the best way to proceed? I'd rather not have the site looking like a postage stamp at 1024x700. I also don't want the thing breaking every single time I updated it. I'm going to have to live with the site for years to come.

[Shyflower]

The best advantage of css is that it makes your content much easier to read when you need to update your file. You get rid of all the table tags.

Another advantage is that for those whose browsers don't support or do "break" tables, with css they will still get a readable page (even if their browser doesn't support css!). You can write your copy and then simply code it into your design.

[Paul O'B]

I also don't want the thing breaking every single time I updated it

Well it's broken already because the search box isn't inside the container when you resize the screen smaller in ie

I'm going to have to live with the site for years to come.

Well use up to date technology then and not old fashioned table layouts of old. There's nothing wrong with tables when the layout must have them and there is no alternative but you should be looking to move to using only tables for tabular data.

As time moves on css support is improving all the time and a lot of designs can be made table-free. Whether this will actually gain you any advantage over your fixed design depends on what you want to achieve.

You could make one column fixed and one fluid to take up more screen space (but you could do that with tables also of course).

If you want to add styleswitchers and change the position of elements or swap columns from left to right then you would struggle to do it within tables (although I suspect it could be done to a degree).

If you want cleaner, lighter more accessible code then css is the way to go. In the end it's a choice you make after consideration, and one that you can live with. If tables float your boat then do it in tables and be happy with your decision Otherwise move to css.

[mcahill]

I'm definitely not married to tables. Been there, done that, got the tee shirt.

It looks like I have more time on this project than I thought, so I am going to give it a shot. The thought of living with an 800x600 homepage for the next 3-4 years is more than I can bear. And I'm a little concerned that the current version has a css that's too complex and prone to errors in various browsers. Simplifying is the way to go.

[Kravvitz]

Many people use CSS filters (aka CSS hacks) to fix bugs in certain browsers.

Writing Efficient CSS will help keep your CSS files smaller.

[Paul O'B]

Simplifying is the way to go.

Couldn't agree more Its always easy to fall into the trap of making things more complicated than they need to be. Usually a slight change of design can result in cleaner code and less hacks.

[mcahill]

It's rough, mostly down to troubleshooting minor postioning and adding in the three tickler sections (new, case studies and Information for). Basically it's working, although the initial design presents some problems for a truly fluid presentation, ie. it's got a row of images across the center of the page. Obviously we hit a width barrier at some point.

Old Table Version: http://www.atexmedia.com/index.php

New Tableless Version: http://www.atexmedia.com/index-new.php

I'd like to thank you all for your comments - I'll have a lot more questions etc. as I move forward.

Oh, btw, for a matter of record, this design was translated into tableless css in around 4-5 hours. It'd have been easier, but I screwed up and started with a three column layout instead of a 2.

[Paul O'B]

That'spretty good going - You've made a good start

[Shyflower]

Looking good! Not quite there... but then you should see my table-less design. I think css is an on-going learning experience. You seem to be a quick study!

[mcahill]

With such great resources available, it's easy to make the transition. (Paul, you might find the basic stylesheet a little familiar...)