...

View Full Version : Who decided we should be using CSS for layout?



[m] at
07-11-2005, 04:50 PM
I was spending some time fussing with a site last night trying to get all my divs to line up properly across multiple browsers. The operation I was doing was quite simple, just a two column layout, one of which with headers and subsections, and one with straight content.

Anyhow, once I got everything to line up properly in one browser, it would go all funky in another, and I got to wondering who it was that decided that in order to be "good" web designers we need to use CSS to do things that are easily taken care of my tables? Consistently when I posted code using tables for the layout, I'd get snide remarks about how I should be using CSS and not tables. What's so bad about tables?

What does CSS do better as far as layout goes than tables? Can CSS easily set up a fluid matched height two column layout? Absolutely not. Can CSS guarantee predictable results across multiple platforms? Absolutely not.

To me, it seems like CSS simply isn't ready to be implemented as the main contender as far as website layout goes. Too often I'm finding myself either limited by the confines of CSS, or finding myself frustrated by the lack of sense involved in creating a website with CSS (for example, last night I was trying to give a div a background which stretched up slightly higher than the content within. not only did the padding attribute do absolutely nothing, the div only stretched out to its pre-defined static height when I applied a border to it! THAT'S supposed to be the new standard in web design?! :confused: )

Can someone please explain why I'm spending all this time doing things in CSS that could be handled much easier and with better result with a simple table layout? And don't say "just use tables" because thanks to the new attitudes among web-savvy types, I've got clients requesting that I do their sites in CSS :(

nikkiH
07-11-2005, 04:58 PM
Because CSS is the ideal solution. In a perfect world where all browsers supported standards, CSS allows for the separation of layout / presentation and actual data. It is much, much easier to change things if you use pure CSS.
To see really, really neat examples of this, see the CSS Zen Garden. Ultra cool.
http://www.csszengarden.com/

This allows for designers to design and coders to code. Perfect for the business world where the MVC methodology is used extensively. XML/XSL and all that jazz. Big sites with big teams. You get the picture.

Arguably the biggest reason, though, is accessibility. User agents that render visual content in a audible manner are very, very confused by tables used for layout.

Using pure CSS is something I strive for, but due to browser limitations, I do still use tables for layout for some things. CSS solutions simply take too much time and energy to do well and they simply can't do some things cross-browser yet. It will come. It is worth your time to learn CSS and to separate data and presentation as much as possible.

[m] at
07-11-2005, 05:10 PM
Because CSS is the ideal solution. In a perfect world where all browsers supported standards, CSS allows for the separation of layout / presentation and actual data. It is much, much easier to change things if you use pure CSS.
To see really, really neat examples of this, see the CSS Zen Garden. Ultra cool.
http://www.csszengarden.com/

This allows for designers to design and coders to code. Perfect for the business world where the MVC methodology is used extensively. XML/XSL and all that jazz. Big sites with big teams. You get the picture.

Arguably the biggest reason, though, is accessibility. User agents that render visual content in a audible manner are very, very confused by tables used for layout.

Using pure CSS is something I strive for, but due to browser limitations, I do still use tables for layout for some things. CSS solutions simply take too much time and energy to do well and they simply can't do some things cross-browser yet. It will come. It is worth your time to learn CSS and to separate data and presentation as much as possible.

So we should be using CSS simply to push the major browsers to support a standard of CSS? I guess that makes sense. It doesn't help much at 2AM while trying to match div widths though!

nikkiH
07-11-2005, 06:30 PM
Not exactly.

We should use it because it is simply better coding all around. It makes your life easier later when you want to change things. It makes life easier for other people who come after you to change the layout of the entire site by changing one CSS file. It helps people with disabilities use your page. It forces you to write well-designed pages that are as easy to render in a PDA as MSIE (you do check that your page renders intelligibly with stylesheets off, right??). And so on.

The push for standards is a result of all that, not the other way around.

JamieR
07-11-2005, 07:07 PM
CSS allows designers to create websites which look better, load faster and a lot more versatile that its table counterparts. The W3C decided that CSS should be used for web layouts, and the concept of standards compliant web development is really catching on now ;)

eelozano
07-11-2005, 07:11 PM
It's more intuitive. After programming with CSS for a while you will see that it is easier than tables. When you start nesting tables within tables with image spacers you stop seeing the downsides of CSS.

nikkiH
07-11-2005, 07:23 PM
It's more intuitive. After programming with CSS for a while you will see that it is easier than tables. When you start nesting tables within tables with image spacers you stop seeing the downsides of CSS.

Now, see, to me it's the opposite.
When I try to nest things with CSS, I assume divs will stretch like tables, and they never do it quite right.
My biggest problem one time was with a div that then had a real table in it (result of a query, like a report). Damn table would stretch outside the div and get all funky.
I won't pretend CSS isn't a pain in the ***. It's just a worthwhile pain in the ***.

edit: Oh, is *ss a swear word, even though they say it on TV? My bad.

bazz
07-11-2005, 08:35 PM
heh heh, I know your pain :)


(for example, last night I was trying to give a div a background which stretched up slightly higher than the content within. not only did the padding attribute do absolutely nothing, the div only stretched out to its pre-defined static height when I applied a border to it! THAT'S supposed to be the new standard in web design?! )


Try the margin attribute. 10px or -10px and see if that helps you.

A lot of your difficulty seems to come from the transfer from tables to css. I found that it took me to adopt a different mental approach to achieve the results I wanted in css. I think this was a good example:



When I try to nest things with CSS, I assume divs will stretch like tables, and they never do it quite right.


Divs stretch to accommodate their content but I agree, they do so differently from tables.

Don't worry. You'll get the hang of it soon and see things differently.

Bazz

[m] at
07-11-2005, 08:37 PM
It's more intuitive. After programming with CSS for a while you will see that it is easier than tables. When you start nesting tables within tables with image spacers you stop seeing the downsides of CSS.

I've done a fair share of designing with both methods and I can tell you that laying out tables is way easier than laying out divs. Give me spacer images over container divs any day.

Plus, once you get everything laid out in tables, you generally don't have to do it all over again to get it to work in IE :D

jkd
07-11-2005, 10:45 PM
Nobody told anybody that they have to use CSS for layout. The W3C says that HTML (XHTML) is a semantic markup language, and that you should not abuse semantics to achieve presentation.

Now, we have CSS. We use it because that's what is commonly available between browsers. If you wanted, you could use XSLT and XSL-FO to layout your pages. Or you could do XSLT+SVG. Nobody says you have to use CSS.

With that out of the way, CSS is hardly an ideal solution as one put it. Many of the layout models are effectively crippled until CSS3 becomes mainstream, and even then I'm sure some people will complain about it. CSS2 is good, and I use it when I can, adding hacks to bring IE up to par. And if you're creative, it's usable. But I wouldn't call it necessarily great.

mcdougals4all
07-12-2005, 01:21 AM
I was spending some time fussing with a site last night trying to get all my divs to line up properly across multiple browsers.

The thing about CSS is it relies on the foundation created by your HTML. Make sure you're using the appropriate DOCTYPE (http://www.alistapart.com/articles/doctype/) and validating (http://validator.w3.org/) against it as you go.

Until I understood the difference between quirks mode and strict mode (http://www.quirksmode.org/css/quirksmode.html), CSS was just frustrating. It's not always straight-forward, but you're in the right place if you need help.

glenngv
07-12-2005, 01:26 PM
Why tables for layout is stupid: problems defined, solutions offered (http://www.hotdesign.com/seybold/)
Making the Jump to tableless design (http://www.andybudd.com/@media2005/)
Fluid, Downgradeable, Three-Column CSS Layout (http://cross-browser.com/toys/csslayout_3col.html)

nikkiH
07-12-2005, 02:39 PM
With that out of the way, CSS is hardly an ideal solution as one put it. Many of the layout models are effectively crippled until CSS3 becomes mainstream, and even then I'm sure some people will complain about it. CSS2 is good, and I use it when I can, adding hacks to bring IE up to par. And if you're creative, it's usable. But I wouldn't call it necessarily great.

I'm sorry; you misunderstood what I meant. I guess you only read my first sentence.
I didn't mean CSS is currently ideal and should be used exclusively. One look at my sites would show you I don't do that -- I agree with you. Many browsers are effectively crippled right now. I'd like to use pure CSS, but some browsers just don't support all the coolness of CSS right yet and mucking about trying to hack crap to support all the eccentricities of the various browsers is a waste of my time.
I meant that the ideal most would like to reach is the complete separation of presentation and content, and in theory, CSS would acheive that ideal. If every browser supported standards perfectly. Unfortunately, that is not yet the case.

mrruben5
07-12-2005, 11:29 PM
It all depends on how you learned webdesign and coding.

If you are an IE user from the begin and only support that, you almost certainly use "quirks" to your advantage, for example, text-align:center will center all childs of the parent whic has that text-align setting. But if you look at the function, it's meant for aligning inline objects, not block level objects!

If you start out with a browser which (almost) doesn't have quirks, you are doing everything right, and you only have to fix certain bugs for browsers with bugs.

Also the lack of coding knowledge can lead you to not use the best way to code something. I've had someone who coded his websites with padding-top:0px;margin-top:0px, etc etc etc, while he could just use margin:0;padding:0; and have a very short time changing values.

So to make a story short, it depends on how you learned it, and that's the only reason you are supporting your statement.

]|V|[agnus
07-13-2005, 01:06 AM
I'll just say this:

Your position and feelings are not unique. Everybody goes through that initially. Well, mostly. I never looked back at tables, because I understand the reasons for CSS. If you don't, I highly suggest thinking it over more and talking to more people who know the score. But I sure as hell got frustrated like all get out trying to work that stuff. But if you're serious, and if you're good at what you do (meaning LEARNING), then it will come. And once it does, life will be beautiful.

I don't use a single table anymore that isn't presenting tabular data. Some people think you NEED to use SOME tables still, but that's utter bull****. Those people are not designing for the web as much as they should and most importantly CAN be.

Keep at it, man. You'll start to see the light.

nikkiH
07-13-2005, 01:38 AM
Wow.
I guess you all don't use ebay, paypal, bankone, or amazon if you've never seen tables still in use for layout.
Gotta love the people who see the world in black and white.

There still is no cross-browser solution that works as well as tables for a simple header, 3 columns, and a footer, so that the 3 columns all auto-stretch (across and down) even when text and/or the window is resized by the user and do not wrap around to the bottom of the screen, and the footer is below all three columns (not below just the middle one).
If anyone HAS found a solution to that, I'd love to see it.

/ I'd love to be a CSS convert, but I find way more problems than solutions

]|V|[agnus
07-13-2005, 01:52 AM
a) I never said tables aren't used, simply that they don't NEED to be. Your logic is like saying that gas guzzling, environment destroying vehicles need to be used because they're already everywhere. Ludicrous.

b) Your example of the "there's no solution" for this is another example of designing against the web, not for it. If the desired layout can't be achieved with responsible design, then maybe it's, how do you say... a BAD design. Hard to swallow, I know, seeing as many BAD designs are considered the status quo. But we're talking about changing mindsets with all this too. You don't seem like you actually have any interest in doing that, rather you simply are looking for justification to keep on standing still.

I and many others will continue to move forward. Maybe we'll catch you around the next curve.

nikkiH
07-13-2005, 02:48 AM
I apologize. I misread what you wrote.

"Your logic is like saying that gas guzzling, environment destroying vehicles need to be used because they're already everywhere."

Um, no, it really isn't. But think that if you like.

I am all for moving ahead. I am also all for pleasing my clients, who have time and budget constraints and definite ideas of what they want. If they insist on a certain layout, and I can't accomplish it with CSS (or to do so would take 3 times as long and still not be as good), then I will use tables.

I don't see the world in black and white. I will go pure CSS when the major browsers all support it properly. I do use pure CSS when I can. If I can't due to buggy browsers, I find a workaround. If that involves tables, so be it.
You seem to find this idea insulting for some reason. Allrighty then. Have at it. LOL

I notice you didn't post a solution to that problem other than "don't do it". That works great in theory. Doesn't get me paid too well, though.

[m] at
07-13-2005, 03:05 AM
|V|[agnus']
I don't use a single table anymore that isn't presenting tabular data. Some people think you NEED to use SOME tables still, but that's utter bull****. Those people are not designing for the web as much as they should and most importantly CAN be.

Keep at it, man. You'll start to see the light.

How do you center a div in internet explorer without using a table?

And I'm definitely going to keep at it... I don't want to still be using tables when CSS is actually properly implemented among all the browsers! It's just crazily frustrating now.

_Aerospace_Eng_
07-13-2005, 03:07 AM
The most common way to center a div is to use margin:auto; in the CSS for that div. In order for this to work in IE, you need a full valid doctype on your document as previously discussed in this thread. If your page messes up with a valid doctype then you need to rethink your coding.

nikkiH
07-13-2005, 03:14 AM
at']
And I'm definitely going to keep at it... I don't want to still be using tables when CSS is actually properly implemented among all the browsers! It's just crazily frustrating now.

Thank you!
That's all I was trying to say.

I'm going to shut up now. :D

]|V|[agnus
07-13-2005, 03:56 AM
I am all for moving ahead. I am also all for pleasing my clients, who have time and budget constraints and definite ideas of what they want. If they insist on a certain layout, and I can't accomplish it with CSS (or to do so would take 3 times as long and still not be as good), then I will use tables.

So, if they are making the design decisions, what are you there for?

Of course clients will make demands, but sometimes those demands are unreasonable as decided by you the professional. Would you tell an architect how to design a house? No, you would tell them how you want it to look, be setup, etc. If any of your requests were unreasonable due to the way houses are being built(or simply CAN be built) at the time, they would tell you, and unless you were a raving psycho, you would accept their judgement.

You seem to think that I don't understand working with clients, or that my claims of having abandoned tables are some crazy delusional fantasy?

Here is one recent example of my work: Lakes Area Motors Auctions (http://lamauctions.com/)

Not a single table used for anything other than tabular data. Bugs? Some minor discrepancies that could easily be hacked into submission, but it is not worth even that little extra bit of weight for a few pixels. One has to draw the line somewhere. Reasonable web designers understand that there is no such thing as pixel perfect. Reasonable people in general accept flaws here and there as the circumstances demand. And considering the sorry shape of even IE6, I think a few pixels that NOBODY will know are an error is beautiful.

IE5? Looks considerably worse, but nothing is inaccessible or critically off. And considering the declining, minute market share of IE5, this paragraph is almost too much attention.


I do use pure CSS when I can.

No, you don't.

The site linked in your signature is a very simple layout that does not need tables. Period.


You seem to find this idea insulting for some reason. Allrighty then. Have at it. LOL

So? Does it bother you that I take my work seriously? I am not offended (certainly not personally) so much as I am disheartened and a little disgusted to see people carry on the way you and too many others still do. It perpetuates and unecessarily low standard of quality and possibilities.


I notice you didn't post a solution to that problem other than "don't do it". That works great in theory. Doesn't get me paid too well, though.

*shrug* I'm getting paid.

And as for your solution, I gave you one. Somebody else mentioned the amazing CSS Zen Garden. There are literally hundreds of examples of table-less layouts than span a wide range of design decisions in that site. And what's even more fantastic about that is that they all use the exact same HTML.

Frankly, I think, like many, you are just wanting to make excuses to keep treading water instead of taking the harder but more fulfilling road ahead. Like I said, this stuff is exceedingly annoying to learn, especially since almost nobody is teaching it even today. But to act like it's not possible, or like the benefits are a lot of hot air is just delusional.

One last point about time constraints: this is a very real and sometimes hard to navigate dilemma. Maybe you simply don't have the time to learn a new skill for a particular project. That is reasonable. However, sometimes you have to take risks to make meaningful progress, otherwise you'll just keep doing the same stuff over and over again. Early on when I was learning CSS, I got reamed by the higher ups on a couple occasions because I was taking too long on the project.

Yet... here I am. Still working. And my sites are far superior to the tag soup I was dishing out then.

_Aerospace_Eng_
07-13-2005, 05:58 AM
Every point made on this thread I think has been valid for the most part. To keep in context, I get paid to do my job. Ironically my job is to convert table ridden layouts into CSS/Div layouts. Seems like many template sites are starting to convert their templates to tableless layouts.

nerdbyte
07-13-2005, 06:14 AM
Although I understand it is the standard to use CSS instead of tables, I personally feel comfortable using tables instead. If it ever comes to a point where I am constantly working with multiple designers, I might change my mind for efficacy, however, I can zip through using normal tables than I can CSS. I still use CSS for other things. But tables, I want my tables please :thumbsup:

]|V|[agnus
07-13-2005, 06:39 AM
You're missing a lot if you think CSS is only for team-based development.

But Aero... that's a sweet job. Why is that all you do? (Just curious.)

_Aerospace_Eng_
07-13-2005, 08:36 AM
|V|[agnus']You're missing a lot if you think CSS is only for team-based development.

But Aero... that's a sweet job. Why is that all you do? (Just curious.)
Because its what I was hired to do. Turning a psd layout into CSS/Divs is my specialty. I can do php, javascript, mysql (to an extent), graphics, C programming which happens to be the 2nd programming language I learned.

]|V|[agnus
07-13-2005, 09:36 AM
"Because its what I was hired to do."

:-|

Anyway, I just wondered if you were in a highly specialized environment or worked for a company that mostly did redesigns of legacy sites using modern techniques or something like that.

I'm used to wearing several hats. I'm intrigued by the notion of doing a single thing all the time, yet leery of it. All in all, just curious...

_Aerospace_Eng_
07-13-2005, 10:29 AM
|V|[agnus']"Because its what I was hired to do."

:-|

Anyway, I just wondered if you were in a highly specialized environment or worked for a company that mostly did redesigns of legacy sites using modern techniques or something like that.

I'm used to wearing several hats. I'm intrigued by the notion of doing a single thing all the time, yet leery of it. All in all, just curious...
Well if you consider table based templates a legacy site then yeah thats what I do.

]|V|[agnus
07-13-2005, 10:32 AM
And once again you didn't address my curiosity! Okay then!

:thumbsup:

</this-thread>

nikkiH
07-13-2005, 01:50 PM
Here is one recent example of my work: Lakes Area Motors Auctions

That breaks in my firefox.
I have visual problems and have a high font size. The text gets invisible for parts of the divs (welcome) and goes outside the bounds for the others.

Your points are well taken, but had you looked at my linked sites on the about me, you'd see the two commercial ones (real estate) use pure CSS, not tables. I have three other commercial sites in development (not linked yet) that also do.
I am all ears as to how to make my main site without tables IF the text won't EVER run outside the containing divs.

channy
07-13-2005, 02:13 PM
well, I'll toss my two cents in (Canadian so they aren't worth that much )

It's not that you have to use CSS, it is the presentation standard. People are reacting like CSS is a new thing. It isn't. It's been around for years now, but browsers have not been properly supporting it.

The first version of CSS was originally recommended and released in 1996 (gawd I was in my first year of college then! :eek: ) . The standardized support of CSS with modern browsers has allowed designers to use code as it was intended. HTML and XML as the Structure Language and CSS as the Presentation Language they are.

Not only that but the web standards organization been around since 1998. They have been working to make standard adherence an important part of software development. Working with browser developers and other software companies (such as Macromedia) to improve their standards support.

With their fine work the gap between how browsers display our work has shrunk as more and more browsers have become standards compliant. We have been given the opportunity to stretch our legs as designers and use the code as it was intended.

As I teach my students, using CSS separates style from content, making it easier to manage. As a designer supporting the language standards should be one of your goals because it makes your work easier in the long run.

Quote taken from: WaSP:Learn:FAQ (http://www.webstandards.org/learn/faq/)

Web standards are not arcane laws decreed by ivory-tower organizations. As we have described, the standards are for the most part decided by representatives of the same people who use them - browser makers, Web developers, content providers, and other organizations.

Side Note:

As far as my research goes tables did not exist in HTML prior to the 3.2 version.

meep! I'll stop my rambling now.... :o
Edit: took out a duplicate word :)

]|V|[agnus
07-13-2005, 02:19 PM
nikki,

Haha? :confused:

"Local Homes for Sale" is riddled with tables, and I dunno if you noticed that one of the main navigation links returns a 404?

And this is the source that loads when going to ForSaleByOwnerAdvertising.com:

http://sethrasmussen.com/common/images/funky-source.gif

Did I miss something?


</this-thread>

Sshhh... ;)

p.s. Oh yeah, I almost forgot: I wouldn't mind seeing a screenshot of the font size you use. And if you're feeling charitable, maybe throw a few shots of some other major sites. Those awesome table-based ones. Research and all that.

And I see the masthead has reappeared. :thumbsup:

nikkiH
07-13-2005, 03:33 PM
And this is the source that loads when going to ForSaleByOwnerAdvertising.com:

What browser are you using?
No one else gets that that I have heard yet. I'd like to fix it. Maybe I need to set encoding?

"Local Homes for Sale" is riddled with tables,
My bad on that one. I inherited some really bad cold fusion that I'm fixing. You should have seen it before. Frames and all. Invalid html. Really, really bad frontpage-looking design with no CSS at all in it.
I'll get to converting those other crappy tables that are there for no reason at all soon.
Okay, flyboy :D , what do you think of these so far:
(I'm still playing with them, so try not to be TOO mean)
http://www.jb-ads.com/
http://www.fsbo-ad.com/
http://www.fsboinc.net/

I wouldn't mind seeing a screenshot of the font size you use.
Just increase your font size to super-duper big. I can't post screenshots from work.

Um, masthead?

I really don't mean to be an *ss.
I just think the whole tables vs CSS debate gets a little too heated sometimes.

[m] at
07-13-2005, 08:59 PM
I think one thing that would make CSS way, way better would be better support for the height: 100% or width: 100% call. I simply can't understand why calling height: 100% can size something to the height of its containing div.

mrruben5
07-14-2005, 08:43 AM
Because you don't want a header that fills the whole screen ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum