Help on tables and CSS

[claimsweb]

Having posted my 'text size' query yesterday there followed a very useful exchange with some fellow WW members Ive been well and truly introduced to CSS.

Its clever stuff and I can see that subtle changes can be made simply and effectively. However this may not solve my current problem and Id appreciate some advice from you all if you can spare me a few moments

I have a 'table' based site that in certain browser settings looks ok - in others awful. I want to introduce the CSS driven layout but dont really know where to start:

1) Firstly should I start from scratch and ditch the tables opting for a column based templated CSS layout? I have to say I like my tables because of their simplicity and relatively professional appearance - they are an easy cheat for a newcomer.

2) Is there an easy way to convert a table based site - any useful tuition sites? All Ive seen so far is that tables are bad news but are they really regarded so poorly?

3)Im using Front Page and the CSS functionality seems easy-ish to use - Ive got Adobe Go Live and Dreamweaver - are these better equipped to deal with CSS? Or is there no discernible difference?

Any tips greatfully received
Clancy
PS - I'm a beginner in every sense of the word - please be gentle with me!
(thanks Nick_W and Syron for your help so far)

[piskie]

First off, Dreamweaver is infinitely preferable to Front Page.
Front page puts loads of MS only bits and bobs into your code and very significantly inflates the file size.

I would advise changing to DW now before you get too reliant on by far the worst of the three applications you mention. Incidentaly one of the nice features of DW is a "Cleanup HTML" command that will get rid of some but not all FP bloat.

Secondly, if you do decide to convert to a CSS formatted layout, there is no easy quick conversion type fix. There are some shortcuts but either way it will be a fair bit of work but will pay dividends.

If at the same time, you put your js into external files, you will drasticaly improve your content:code ratio (reducing bloat).

[ikbenhet1]

Frontpage only creates those tags if you start a new file in frontpage itself.

Open a textfile in notepad, and save it empty.
open it with frontpage, and when you save no more ms blocks are added.

I use fontpage on html's that contain javascript css and stuff, and frontpage handles it perfect, If you open a existing file not made by fp.

[Syren_Song]

Hi again, Clancy!

I'm not really familiar with FrontPage, but I know that you can "Convert Tables to Layers" in DreamWeaver, which is similar to what you're trying to do. It'll change all your table tags to "div" tags, among other things. And the CSS stuff is very much menu-driven with DW. I know there's a relationship between the "div" tags of layers and CSS positioning, but that's some of what I'm just now learning about myself.

Again, if you're using DW, that can take you through a menu to get your style sheets set up externally, rather than placing them within the document itself. That'll speed up the download times for your site overall.

I can't tell you much about problems with FP, other than what I've heard from others and I know next to nothing about GoLive. With FP, if you don't know how to change the setting properly, there are codes the program puts in that are so proprietary that anyone surfing by won't be able to see your site if they're not using IE for their browser. The page'll just come up blank. The coding is much further off from W3C standards, too. If you're going to spend any time looking directly at the code itself, you're better off using DW, rather than trying to understand all the weirdness that FP puts in there. (Sorry, ikbenhet1, personal opinions from what I've seen in View Source and heard from others. <shrug>)

Good luck, Clancy!

[Nick_W]

because of their simplicity and relatively professional appearance

A CSS layout is actually easier in that it's more intuitive. and there's no reason why it would look any less professional.

Check these sites:

[westciv.com ]
Great free courses on all aspects of CSS

[w3schools.com ]
What alot recommend here....

Also, site search for 'css layout' there's tons of stuff here by Tedster, Papabear, myself, longhaired genius Ryss and a whole bunch of other CSS enthusiasts ;)

Nick

[claimsweb]

Loads to learn here - I feel like a kid at xmas having found his first meccano set. Where my spanner?!
Thanks again for the tips folks
clancy

[martinibuster]

ONE CAVEAT:

If you have an ecommerce site or a general interest web site, one that may be visited by middle aged and over citizens (over 50?), then beware.

This demographic is likely to be using older browsers, because they don't have the know how to update, or might be using older computers.

NN 4.7 blows up your layout. Looks absolutely hideous.

Check your logs to see if NN 4.7 folks are visiting you.

If not, then dive in.

[Nick_W]

Good point!

Any figures on that martinibuster? I meand if you run any sites targetting over 50's....

Nick

[martinibuster]

I don't have numbers for a general case, but I have experience in a particular case.

I've been working on a larger client site, a leading San Francisco software company that offers a free eval download. Previously they were getting xx downloads a week from users of NN 4.7 and below.

I discovered that, due to coding errors, NN stalled on their first page. So I reckon that those who got to the download page were typing in a url, or from a link.

AFTER I fixed the coding, the numbers doubled to a quantity over a hundred (I have to be discreet).

Mind you, these visitors are the decision makers at Fortune 500 companies. A sale ranges from $200 to $5000. Do you really want to lock these people out?

In this particular case, no.

[Nick_W]

Hmmm..

I'm building a site right now that targets 40-60 I think I'll have to ask a friend in the same line for some figures.

I'll not ditch my CSS layout but I'll serve up a different 'template' for nn4....

Thanks for the reminder ;)

Nick

[piskie]

I link to 2 external style sheets to implement workarounds for NN4.xx like this:

<Link Rel="stylesheet" Type="text/css" href="4.css">
<Style type="text/css">@import url(5.css);</style>

IE loads the 4.css and then the 5.css

This maens that IE will load the 4.css file, then the 5.css and because of the cascade order each style defined in 4.css is overriden by those styles if they appear in the 5.css.

NN4.xx will load the 4.css file and apply it because it ignores @import.

I hope that makes sense.

[Eric_Jarvis]

like piskie I use the @import hack...I'd strongly recommend starting a new layout from scratch...css is easy...trying to recreate table layouts with css is hell

ALWAYS when using css make the page work without any presentation first...then even if you don't add any styling for Netsacpe 4 it isn't disastrous, and any odd browser quirks are pretty much automatically dealt with...then, as long as you don't break the unstyled layout, you can be fairly free in what you do with the stylesheet...it can't go too far wrong

if you start by trying to make it work visualy before you do the mark up then you'll spend half your time going own blind alleys and worrying unnecessarily about how it'll work in browser X

[Syren_Song]

What's the advantage of using "@import" over "link rel=", other than being able to serve up a nn4x compatible page?

[Nick_W]

Nothing. NN4 just doesn't understand it so it's useful for hiding rules it does not understand.

The other use is: To import additional styles for different pages.

I often use it to import rules specific to the contact page (form styles) Or to change colors in different sections of a site...

Nick

[Syren_Song]

So in other words, it's an easier fix to set up two different pages - one for the older browser and one for the newer ones. Nifty trick! Thanks!