15 replies to this topic

[OldWelshGuy]

OK guys what would you all suggest? css positioning or old fashioned tables?

I like using tables, and always have, but I guess I am going to have to move with the times.

What are the pro's & Con's of each method, and is CSS Positioning the way to go?

I look forward to your replies!

Cheers
OWG.

[qwerty]

If you care at all about NS4x users, you really can't do CSS positioning. Not that you should care about those folks...

I'm still learning my way around CSS positioning and layouts, so I still find it's easier to use a table layout for a consistent look across numerous browsers. Then again, I don't do much design work. I expect you'd get the hang of it very quickly, as long as you're prepared to test across browsers and operating systems. My own site still looks lousy on a Mac, from what I'm told.

[Ron Carnell]

You trying to start a fight, OWG? This is one of those volatile issues where you'll find very little agreement. Can't we discuss something safer? You know, like religion or politics?

FWIW, here's my opinion.

CSS2 is definitely the way to go. Unfortunately, Internet Explorer, by far the most used browser today, does not support some very key elements of the CSS2 specifications. This imposes some serious design limitations and invariably results in "work arounds" (hacks!) reminiscent of the crap we had to do back in 1995-1997. At the end of the day, designers end up with a maintenance nightmare, users end up with pages that "all look the same" (a commonly voiced complaint with CSS2, though I think a questionable one), and 4.x browsers are left completely out in the cold.

The bad news is the bad news ain't going away. We're going to be stuck with IE's limitations for at least the next several years, because Microsoft has said they have no intention of ever releasing another stand-alone browser.

Me? I'll be using at least minimal table design for a very long time, I'm afraid.

[OldWelshGuy]

Cheers Guys, I will stick with tried and tested tables then.

I have heard so much of late that I thought maybe i was backing the wrong horse or something, and added to the fact that a table is so damn easy I thought maybe this can't be right

That's the price you pay for trying to keep up with the latest trends, you get more questions than answers, If it ain't broke, don't take it apart to see how it works I always say. Maybe i should practice what i preach a bit more, and have a little more faith.

Off we go then to do some work.

[domokun]

for me, i's go with css all the way.
not only is the code easier to update and maintain but the page size can be drastically reduced.

each to his own though, i suppose!

hope y'all had a good christmas.

[qwerty]

I don't know if anyone remembers this, but about a month ago I posted a CSS question. A client of mine had a site with multiple levels of nested tables, and I was trying to get rid of almost all of them.

Well, I got it working ok using CSS positioning, but then I found out that while I was working on that, they were doing a complete site redesign! It's still in a table, but it's only one table, nice and clean. So I figured why mess with significant improvement? I expanded their CSS to control the look of the table and reduce the file size, and I think we're going to stick with what we've got.

[Craig B]

What browsers do you have to support? There are a couple of great ideas out there that allow you to code with the latest standards and allow your website to degrade gracefully when viewed with older browsers. Here is how it works:

Have 2 style sheets...

<link rel="Stylesheet" href="simple.css" type="text/css" media="screen" />
	<style type="text/css" media="all">@import "sophisto.css";</style>

The first style sheet that is uses the <link> tag is picked up by all browsers. The second style sheet using the @import method is only picked up by modern browsers. Having two separate style sheets imported this way allows you to swap and override css statements so that your site looks great in all browsers and still realize the benefit of clean/lean markup.

If you would like me to post some style sheets as an example of how this is done, let me know!

-Craig

[SEO-Richard]

I'd be interested, Craig.

I use CSS all the time. I love it. I love the flexibility, the chance to update layout at any time. And of course, you can use TABLEs in DIVs, and have layers. You can use plain old TABLE's with IDs and classes. If I was worried about compatibility I'd use TABLE's as per normal, but give them classes and IDs for the added flexibility of margins, borders etc. on various sides ... well, I'm so used to using CSS I've forgotten what you're limited to with plain old HTML.

Get the best of both worlds, and learn CSS at the same time. Code up an HTML page, then give one of your TABLE's a class or ID, and link to an external stylesheet. Then mess around with the various style rules. For example, you could have

<TABLE ID="TESTINGTHISOUT">

and then in the external CSS you could have

TABLE#TESTINGTHISOUT {border-left:2px double red}

just to see what you can do with it.



The browsers that are used on my site go like this:

IE 6 57%
AOL IE8 7%
IE 5.5 7%
AOL IE 9 7%
Netscape 5 7%
IE 5 5%
IE 5.01 4%

The Netscape 4x come in at 0.15 %.

Don't worry about the browsers.

[Craig B]

Instead of pasting code, I'll point you to where I took a lesson or two from:

http://www.zeldman.com/c/basic.css
http://www.zeldman.com/c/sophisto.css

-or-

http://www.37signals.com/simple.css
http://www.37signals.com/sophisto.css

Both use the methods I was describing earlier, plus some extras including:

The IE 5.x/Windows Box Model Hack

div.content{
width:400px;
voice-family: "\"}"";
voice-family:inherit;
width:300px;
}

Be kind to Opera
html>body .content{
width:300px;
}

and more...

Basically, there are a few well known hacks to make sure that your code looks good in all browser/platform combinations. Have a look at those style sheets and let me know if you have any questions. Also, I would recommend Jeffry Zeldman's "Designing with Web Standards" (New Riders) as he really goes through and explains all of this stuff.

-Craig

[OldWelshGuy]

Cheers Craig your a top bloke :read:

[Discosis]

Just in case anyone is interested, here's a good article (IMHO) about CSS positioning I found on Apple's site last year... in the end the author reaches the same conclusion ("Nice, but...").

[ajeshnair]

hi disco!!!!!

That was a good article.

Ajesh Nair

[GeordieSEO]

This article is quite good, extoling the benefits of using CSS and XHTML over tables

Look Ma, No Tables

[K.S. Katz]

I did some experiments with CSS and XHTML, and found the several websites that we did in this manner plus optimizing before launch got indexed faster by the search engines. I overall was very happy with the results.

I felt like the search engines were giving me the

(This of course is all subjective cause I haven't done it on enough websites to measure over the long hall but still it's very encouraging and worth exploring further.)

[Ruud]

To me the question "Should I use TABLES or CSS" reads as clear as "Should I format my page using <br> and <p> tags or should I use TABLES".

CSS is extremely easy. If you can do <TABLE width="10%" align="left"> then you can also do <DIV style="width: 10%; float: left;">. Give your div an id, name or class (or all of the above, lol) and associate an external stylesheet with it and wham - you can change its position and style across thousands of pages with one edit. Try doing that with <TABLE widht... blah>

CSS combined with DHTML is even more joy.

http://www.alistapart.com/ has some pretty interesting articles on CSS and XHTML.

Ruud