| SitePoint Sponsor |
After delving deep into CSS design and learning all the ins and outs - I don't get why people are trying to use CSS instead of tables. I know a bunch of people will jump on here and post all the "benefits" of using css, but the benefits just don't outweigh the hassle you go through trying to get your layout to work.
I'll also add that if you are familiar with design using tables, and you are thinking about making the switch to css - try learning css real good and using a combination of tables and css. You'll be much happier, and you'll waste a lot less time.
One major advantage of CSS layouts is it's easy to completely change the look of a Website without even touching the HTML, an excellent time-saver.
Take a look at the examples at http://www.csszengarden.com/
Layouts are all different, but all share the same HTML. Only the external stylesheets are different.
Oh yeah, and somehow, CSS manages to disable your ability to highlight text and copy/paste it, as is apparent in your example. I guess that could be both good and bad if you didn't want people copying content from your website, but I'm going to call it bad since it disables the browser to some extent.
This website IS a good example of how, if you had multiple pages, you could update your layout by only modifying the CSS.
This isn't a time saver to me however, the design must be so meticulously put together that in the long run you'll probably spend more time on the CSS layout making sure that everything updates properly.
You'll have to fogive me for playing devil's advocate here. I know that CSS is superior to table layouts in many ways, but I just don't think it's good enough yet to replace the tried and true tables. They need more options for people that design websites with complex layouts. Right now you have to employ so many workarounds or "Band-Aids" to get things how you want them.
CSS does *not* disable text highlighting. I highlighted, copied and pasted the following text from CSSZenGarden using MozFirebird:
*****
The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser–specific tags, incompatible DOMs, and broken CSS support.
Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators.
The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time–honored techniques in new and invigorating fashion. Become one with the web.
*****
hhmmm, works for me!
CSS does have issues, I won't deny that. Making a CSS layout cross-browser compatible sometimes requires hacks; I think hacks are a bad thing.
However, I disagree about your comment about time saving. A modern Web document should be separated into two parts: structure and presentation.
This creates cleaner, easier-to-maintain code and more accessible Websites (http://www.tsbvi.edu/technology/accessible-css.htm).
Scenario: you have a 100-page Website that uses tables for layout. Redesigning or revising the entire the site would require editing all 100 pages (except if you use server-side includes). A significant amount of the HTML would have to be rewritten, too.
On the other hand, if you used external stylesheets instead, you only have to edit ONE file to change the look of the entire site. You don't even have to touch the HTML. Much easier, IMO.
That's my take on CSS.
I have encountered the highlighting text on certain websites. its really strange sometimes.
The full effects of css wont be seen for some time, because so many websites use tables, plus there will be more support for different styles and attributes.
Here is another key issue. Consistency. By fiddling with 1 style sheet, you can make sure all fonts, links, and more give the site a consistent feel.
I am no expert, but I am sure some solid CSS people like John Colby, Vinnie Garcia, Redux, and more will make their way to this thread
I used to use tables all the time and refused to use CSS to design my sites. But now, I actually prefer CSS. When you say in the long run, we'll end up spending more time trying to get webpages to appear exactly the way you want them, it can also apply to using tables also. It just depends on how experienced you are with tables or CSS. I like CSS better because it separates content from design and there is no need for that ridiculous transparent filler gif used to create blank space.
Of course, now is a time of transition and slowly people will migrate to using CSS. At the moment, for the majority of the time, I am still using tables to design layouts
I assume you mean CSS-positioning, and not just CSS, unless with your <table>s you like <font>s, <center>s, and <b>s.
Love it? Hate it? Helpful? Useless?
Use the rate button to let me know what you think of my post!
Eh... I defintely see emstro's point, and feel his frustration. I for one do not use CSS hacks. I'll tweak my stylesheet until the website I'm working on looks relatively the same in all the latest browsers. I don't look at anything lower than IE 6.0, Opera 7, Mozilla 1.5 (6, now) etc. I do this mainly because I agree that to get a stylesheet working in ALL the "major" (obviously some are a lot less major now) browsers just IS too much of a hassle. Who cares if your stylesheet looks good in Netscape 4?
I love it when people talk about being backwards compatible. I just smile at them. I'm all for forwards compatibility. Makes my job easier anyway.
This is why using tables for page layouts is a bad thing. Using tables for page layout is a hackOriginally Posted by naveed
[mmj] My magic jigsaw
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Bit Depth Blog · Twitter · Contact me
Neon Javascript Framework Jokes
Count me in the converted table designer to CSS design now. It did take a bit of tweaking to get just what I wanted, but no more than I had to do when learning tables and what works when you nest etc. between different browsers. After only a couple CSS layouts I now am pretty fast at dong it I think, and lots of thanks go to these forums and to Paul O B. Plus, even if you have only 15-20 pages...CSS time saving edits make it far superior to table based design.
does too
oh, wait, perhaps it could be because i'm using IE6, only the most popular browser on the entire planet?
my bad
don't get me wrong, i'm a css advocate, i code in xhtml1 strict without tables, but that's one thing that has always p1ssed me off -- on some css sites, you have to view source if you want to highlight a certain portion of text
I have never experienced this with any version of Internet Explorer, on any website. I've never even heard of this happening. You should look into making sure your version of IE is up to date.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The Bit Depth Blog · Twitter · Contact me
Neon Javascript Framework Jokes
True.This is why using tables for page layouts is a bad thing. Using tables for page layout is a hack
Why using tables for layout is bad: http://www.webreference.com/programm...chap1/1/2.html
windows 2000 pro, version 6.0.2800.1106
Updated Versions: SP1; Q328970; Q324929; Q810847; Q813951; Q813489; Q330994; Q818529; Q822925; Q828750; Q824145;
if i am missing an update, then it could only have come out in the last 6 days
do yourself a favour, take your latest version of ie6 and go visit the css zen garden, and see if you can highlight a portion of a sentence out of one of the first three paragraphs
I just tried to highlight text from CSSZenGarden using IE 6.0.2800, and it's the strangest thing. When I try to highlight just a single letter, it highlights the entire page!
First time I experience this problem.
Highlighting works just fine with MozFirebird 0.8pre and Opera 7.
IE bug?
Its an IE bug related to absolute positioning.
Besides, tables aren't as cool as some people make it out to be either. CSS and table based design both have learning curves, to say that CSS sucks because you have always used tables and thus know more about tables than CSS is a bit silly.
CSS is "superior" because its clean and semantic and all that. It aids in removing content from presentation, which just feels good from an engineering standpoint. It saves you bandwidth because your layout and formatting is cached in a file instead of being sent down the wire every time.
Back in October 2001 I set up my own domain for a conspiracy site and at the time I was just discovering these sites:
http://bluerobot.com/web/layouts/
http://glish.com/css/
http://www.thenoodleincident.com/tut...son/boxes.html
And all the other sites like ALA and Zeldman. I was very excited about the possibilities and decided to try and implement a 3-col header and footer for the layout of the site. After a whole lot of headaches and struggling with both floats and absolute positioning I decided to fall back on the old trusty table layout.
With the basic table template designed in no time, I went to work building up over 200 pages based on it. Now I haven't updated it for a year and absolutely dread the fact that I will have to convert all these bloated pages into a more manageable standards design. I've started, and it's going very slow. The knowledge that I have now allowed me to come up with a 3-col float layout in a few hours that proves to be stable, and cross browser compliant, even at small window sizes. And indeed, I make these sorts of layouts for clients every day and there is an increasing market for this knowledge - it's proven to be a skill that is very valuable.
I'm not sure what the moral of this story is but I wish I would of stuck to my original intent back then when I first got hooked on css positioning.
I use Mozilla 1.6 and have had troubles highlighting text on certain CSS websites - including one featured in the Zen Garden.
This layout specifically:
http://www.csszengarden.com/?cssfile...075.css&page=0
After delving into the world of fully css layouts, some other people have created some amazing stuff, but at the level im at i wouldnt attempt to create a fully css layout if i was to say sell it. I would stick to a hybrid layout. And on zen garden alot of the 'wow' factor comes down to the images, the css just sticks the thing together.
Css does have issues, but lets not try to blame css itself, its really the browsers than cause the problems.
I generally think there is a huge over-trust in table-less layouts. They an excellent way to make fanstastic layouts with very little code. However, currently, I feel that browser adoption is not wide enough for it to work well enough. Currently, I have to spend more time making a CSS layout work than I spend with fiddling with tables.
Mattias Johansson
Short, Swedish, Web Developer
Buttons and Dog Tags with your custom design:
FatStatement.com
I'll second that.After only a couple CSS layouts I now am pretty fast at dong it I think, and lots of thanks go to these forums and to Paul O B. Plus, even if you have only 15-20 pages...CSS time saving edits make it far superior to table based design.
I prefer positioning absolutely with css, rather than trying to make a fluid site. It's alot easier than both tables and fluid css layout. It's a shame that most other browsers don't have a similar zoom feature as Opera, it enables alot more versatility. IMO
Reasons: Objects can be placed in any order. The headers and main text can be placed first, for SEO, and there is no need to place objects relatively, no "this must follow that".
No need for innerHTML or other ways of changing or creating objects within another object. You just place it where you know it needs to go. Useful for adding js created objects before or after the HTML has loaded.
You can create a visual "map" of where you want your objects to appear, splitting the page into a grid of objects.
This can be done with em's in a way, but the relation between sizes when the browsers font size is changed is not consistant, and you cant work with windows componants in ems.
Alot more work is needed when using em'sI tried to convert my site to em's using a ratio of 16px to 1em, the results I obtained where similar to the problems above.Code:<div style="position:absolute;top:1em;left:2em;width:7em;height:4em; background:red;padding:0em;margin:0em"></div> <h1 style="position:absolute;top:1em;left:2em;font-size:2em;padding:0em;margin:0em">Header</h1> <div style="position:absolute;top:216px;left:32px;width:112px;height:64px; background:red;padding:0px;margin:0px"></div> <h1 style="position:absolute;top:216px;left:32px;font-size:32px;padding:0px;margin:0px">Header</h1>
I find both tables, and fluid css, a pain in the......
Last edited by Markdidj; Feb 7, 2004 at 07:24.
LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
That is exactly what I said on a thread similar to this. At this point, there are still browsers out there that do not support all of the CSS features or display them differently on each browser.
I'm really looking forward to create a fully CSS website without tables, but with so many projects, I can't afford to spend all the time and I don't have the experience either that it takes to create a CSS design.
I recently started to completely combine tables with CSS on my designs. So far, I couldn't be much happier, and it does save a lot of time.
Community Guidelines | Community FAQ
"He that is kind is free, though he is a slave;
he that is evil is a slave, though he be a king." - St. Augustine
if that's how you feel, emstro, than by all means stick with tables...there's already too many of us here at the cutting edge of the next generation of web design
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
WaSP Accessibility Task Force Member
splintered.co.uk | photographia.co.uk | redux.deviantart.com
Posting Permissions
Bookmarks