css vs. tables

[Frank]

Often I've heard in this forum that its better to use css to place objects rather than tables. Having never tried this I was wondering if I could ask for suggestions on what is the best way to go about this.

Should I use divs and place them with css, this would require a different div for all the page elements, or should I use small tables(only one <tr> but with more then one <td>) inside the div.

Also is it best to use position:absolute for every div or should I use it only once and then use position:relative for the rest.

[whackaxe]

all depends on what you want to do really. CSS is good on the standard compliant front. but tables are easier to set up, but tables zre supposed to contain tabular info

[Frank]

The table is setup for people to end information into what looks like a form.

Depending on there respond the the form changes, fields are either added or taken away. Currently I do this by having the fields insides spans and changing the visibility "hidden" or "visible".

[bradyj]

People can get on me about this, but I don't always use <div>'s for everything, sometimes I just do a class or id for a specific element like so:
<img class="photo" src...

...or

<p class="legal">.....

This may or may not cause degrading problems, but I only use div if I'm going to put a layer in a layer in a layer.... otherwise, the whole div's can get just as cluttered as the tables used to be. I just finished a site you can view (http://www.belairedisplays.com) for my company, and there is not one div in there. But, that's not always the way to go.

As for the positioning, I relative has been slightly quirky for me, but it is really just what you need it for. I often times use absolute because as a print designer, I like everything exactly on my page as it should (for once in the history of the web) -- but that is my flaw and not a good practice to follow. Hopefully someone here will give you better advice.

As for the CSS vs. the Tables -- I love the CSS. No more spacer gifs, no more columns and rows -- if I want to change something it's a quick type and I'm done for the whole site. It is better for my clients in accessibility, and I could care if it looks perfect for NN 4:)

Gauranteed, you will learn to love it and not want to look back.

[bradyj]

...scratch that, I used one for my javascript to place correctly:D

but only one.

[Frank]

Just had a look at the site you posted as an example. It looks pretty sweet.:thumbsup:

This is just the sort of advice I'm looking for. Do you find that older browsers have problems with the way you do things. By older I mean IE5 and NN5 before that I not concerned with.

Also you where using xml in you site, which is something I have no experience with, just haven't had time yet. I know, I know I really should. Do you find use xml makes placing the objects easyier in the long run

[bradyj]

Thank you for the compliment :D

The only browsers that I have noticed to have a problem are NN 4.75 (NN 6 is wacky by nature, but it views it fine). I've had no complaints for IE except anyone on 4... which most are not on anyway. Then there are specific browsers which have problems with it such as (only for Mac):
OmniWeb
Icab
Opera 6

Opera 7 for PC sees it just fine. The 6 version is funky and not highly used on Macintosh (or any OS) anyhow. These obscure browsers only have a few errors here and there and it doesn't really cause a huge problem (a few text or images are shifted a tad, and it may be an error on my part other than what Opera has said). I'm not sure If I understand your question 100%, please tell if I'm not answering it fully. Regardless, the old browsers just don't seem to like my CSS plain and simple for positioning. To route this I can do two things:
1) make an old design that will work in those browsers
2) make a smaller 'lite' site that works for those browsers
3) redirect them that you may have problems viewing this site, but they can continue

This is a strong arguement on this forum of what's right and wrong here, but I do #3. I warn them they may have problems, but that they are welcome to continue if they'd like to. I use this Javascript to detect them:

//Browser redirect Script - redirects old browsers without DOM support
var browser_type=navigator.appName
var browser_version=parseInt(navigator.appVersion)

//old browser action
if (!document.getElementById) {
window.location.replace("http://www.belairedisplays.com/upgrade/upgrade.html")
}

This detects their DOM support and tells me if it can read my CSS & Javascript or not.

As for the XML -- I don't see it as helping or not helping my positioning. I do see it as a benefit for the long run, when HTML runs it's course and moves ahead to the future, I won't have to worry about learning the changes or changing my whole site. Incidentally, I use Dreamweaver MX or HTML Tidy's built in program that will let you convert your HTML to XHTML -- both seem to do a clean job and save me a load of time. Meaning, I don't need to learn THAT much XML for now -- but I do know a little bit.

So, to answer your question, HTML is out the door and it's good to look at XHTML (and XML) as your future course for webdesign; so I recommend learning it or downloading one of the editors to do it (I believe the HTML Tidy is free) and just picking up the little bit as you go. However, it doesn't improve my CSS positioning. It'll just make the website more compatible for the future
:D

Does that make sense? I ramble at times... tell me if you have questions, that's what I'm here for:thumbsup:

[oracleguy]

This topic has been discussed in great length before. Try searching for past threads.

[Frank]

Thanks bradyj

For your help and thoughts on this topic and xml.
I have Dreamweaver MX so I may give converting some of my old htm to xml a shot just to see what it does.

[bradyj]

It is under file > convert > XHTML

Works pretty smoothly and puts the actually XML app in the _notes folder.

[theabyss]

I only use P tags on my site. That way it forces my page to be in paragraph form on all browsers, devices, etc. You could have columns by using CSS positioning like on some BlueRobot page I found. Check out my custom XHTML DTD and see what you think.

This should help you :D

[Frank]

Thanks bradyj I tried that and itwork pretty good


theabyss While I'm sure the xhtml dtd is cool I don't know xml from a hole in the ground. But thanks for the thread

[bradyj]

You're welcome Frank -- and the website he was referring to is bluerobot.com (http://www.bluerobot.com)

[theabyss]

http://bluerobot.com/web/layouts/layout1.html

This page to be exact :D

[zoobie]

Ha ha! I remember looking at bluerobot like 18 months ago...I'm still using a combo of css and table positioning...but have never never never had to use spacers to get my display correct. All it would detail, however, would be a 1 x 1 transparent gif...stretched to whatever size you need.

What would be worthwhile would be to assemble all these threads and post them in a sticky..."CSS or Tables?" Just like a db driven site, all the rage right now, it's just something else to learn. After this, something else will come along which will be all the rage...No worries.

Old topic...:cool: