Layers vs Tables...!

[Toly]

Just a quick fact, users using IE still make up for 90% of the hits on my site :\

I think users using IE make up for 90% of the hits on most sites, something that won't change anytime soon.

[Egor]

Sorry! i mean DIV tags. And if you use photoshop, i recommend you to use Fireworks MX, its a better soft for webdesign

Really? Could you please list some better features of Fireworks for web design that Photoshop doesn't have?

And the crappy way it optimizes graphics, no way...

[Dark Tranquility]

I think users using IE make up for 90% of the hits on most sites, something that won't change anytime soon.

yes totally agree for me IE users form up to 81% of my total visitors and Mozilla users are only about 12%

[vgarcia]

The off topic posts have been split and moved here. If you want to continue the Photoshop vs. Fireworks discussion there, feel free to but keep it civil.

[PMenard]

Ah. Very to good topic. I for one have been working on getting tables removed from my pages. My biggest issues is with forms. I had built so many forms buried in tables over the years I just cannot grasp doing this in pure CSS. Does anyone have a suggestion on a good intro tutorial?

[Egor]

PMenard Just use floats for them, vertically alligned by padding.

[Paul O'B]

The best thing with forms is to keep them simple and try not to be too clever.

Heres an example form I did for a firm last year.

http://www.pmob.co.uk/lamberts/main/contact.htm

Its just very simple and logical and I think all the better for it

Paul

[AlexW]

I think users using IE make up for 90% of the hits on most sites, something that won't change anytime soon.

I would think even 90% IE would be quite low for most sites (though I'd love to be told otherwise). I'm guessing we (SP) have a larger percentage of FireFox and even Opera users than most sites and we still have IE at 95%+ last time I looked.

On a related note, we've actually got an article coming up by a new writer - Sergio Villarreal comparing using each method on the same project. "Tables vs.CSS - A Fight to the Death"

Dramatic title but a good read. Admittedly, the guy has a preference for CSS in his daily work, but the comparison comes off as quite balanced.

I think G says it published next Thursday (27th).

[AlexW]

Ah. Very to good topic. I for one have been working on getting tables removed from my pages. My biggest issues is with forms. I had built so many forms buried in tables over the years I just cannot grasp doing this in pure CSS. Does anyone have a suggestion on a good intro tutorial?

Kevin has a quick tutorial in this edition of the Tech Times from last year.
http://www.sitepoint.com/newsletter/...?id=3&issue=58

Ian Lloyd, who is a huge accessibility buff, wrote this pretty cool tute
http://www.sitepoint.com/article/acc...-online-forms/

Rachael Andrew uses tables in this article, but has some nice tips on CSS and forms.
http://www.sitepoint.com/article/style-web-forms-css

[Toly]

I would think even 90% IE would be quite low for most sites (though I'd love to be told otherwise). I'm guessing we (SP) have a larger percentage of FireFox and even Opera users than most sites and we still have IE at 95%+ last time I looked.

Wow, that's a very high number if we take in consideration the way Firefox is promoted by members in this forum. But yes, 90% is low. For my sites I have 92%, 95% and 96% using IE.

[Paul O'B]

Hi,

Kevin has a quick tutorial in this edition of the Tech Times from last year.
http://www.sitepoint.com/newsletter...p?id=3&issue=58

Its a shame thought that the very first bit of css in that article is invalid

form p {
  width: 400px;
  clear: all;
}

There is no value all for clear! The allowed values are none|left|right|both|inherit.

Just thought you'd like to know

Paul

[AlexW]

Nice spot, Paul.

I'll point that out to Kev. Surprised it wasn't spotted before. I didn't re-read it when I found it, but it just looks weird now.

(I'm guess it's meant to be 'both')

[Kevin Yank]

Whoopsie. Fixed in the archived copy of the issue now.

[Paul O'B]

. Surprised it wasn't spotted before

Its amazing how these things creep in when you're not looking lol

[carrotflowers]

I think as a result of this thread, someone has posted a new thread asking if he should use CSS or tables or this new thing called layers. I noticed some stuff not corrected in this thread that I think is misleading. I'm just going to reprint what I wrote there because I think anyone who didn't already know would be confused.

For instance , it was stated that css is an overused term, stylesheets on their own don't do anything and that it is the combination of a style sheet and, say, a <div> tag that creates layers.

Not exactly. CSS stands for Cascading Style Sheets. Anything you put in a stylesheet, including a way of using CSS that some call "layers" is CSS. Layers are not their own technology or tool. Layers as presented in CSS are part of CSS, and really are they are is a way to absolutely place an element on your page. Layers in CSS is just a way of how to implement CSS to treat elements on an HTML page as if they were on different layers, overlapping each other etc...(see this link for someone explaining "layers" in CSS--they call it layering...it's just CSS http://www.echoecho.com/csslayers.htm)

It's confusing, yes, because there are other "Layers" in web design.

1. Layers as developed by Netscape a long time ago: http://www.htmlgoodies.com/beyond/layer.html
The thing to take from this, he is actually placing elements in things called layers, a la <LAYER NAME="under" LEFT=250 TOP=500>

There is no "layer name ="this"> in CSS.

And note where he says it only works in Netscape.

2. Layers in Dreamweaver:
Layers in Dreamweaver is CSS. Period. It is not a separate thing. thanks to Dreamweaver giving it a separate tab from CSS and calling it "layers" I believe it creates the confusion that CSS is just styles but when you get into positioning etc it's something else. However it's not, it's CSS. Note that the code produced by Dreamweaver when you create a layer is CSS code.

On a related note, we've actually got an article coming up by a new writer - Sergio Villarreal comparing using each method on the same project. "Tables vs.CSS - A Fight to the Death"

I look forward to reading this.

[Paul O'B]

Note that the code produced by Dreamweaver when you create a layer is CSS code.

And the worst kind of css code (inline styles).

Although I like dw I also dislike its terms of "layers" as you say which confuses everything and why oh why does it make inline styles that are as bad as nested tables.


Paul

[julik]

One of the best things you can do to work out CSS is the following.

First, take a decent HTML editor that shows source code to you (Dremweaver in source mode is a good start).

Then deliberately REMOVE all of your markup - you will see that your HTML was about 10 to 15 times bigger that your actual content.

Then add tags by necessity where you need them to implement a CSS hook (for example where you need a contaienr with a "class" or a big block with an "id").

For a few days it will be extremely painful, but then you will be surprised to see that your HTML before was nothing but a bloat.

One of the best things that come with CSS is that your HTML code becomes human-readable (and very lean). I.E. first you can read this code yourself!

Layers - forget them. When you go pure CSS you can position almost anything, froma heading to an image to a table, and no - you don't need layers for that.

And run a Google search on "markover".

This is a popular term used for this kind of work these days.