The big CSS fans keep going on and on about how it can do just about every aspect of a web page and how terrible tables are. Well, I spent like three hours today beating my head on a full-page three-column CMS template with a header and a footer that renders in both Firefox and IE6. Sounds pretty traightforward, doesn't it?
Well, the first rude awakening was that the CSS jockeys routinely use bugs in things like comment-parsing to work around differences in how various browsers interpret CSS. And nobody thinks this is at all odd. And there are a lot of these little differences. And they usually involve chunks of your layout not quite sycing up or getting kicked off the screen, jumping around when you resize, and so on. Now let's say you got it just right... in both browsers... and you alter the size of one block container by one pixes. BOOM! Nice big blank gap above your header for you. That's not what I call a robust approach. Another example... do you know how they make a column with a colored background extend to the bottom of the page when the content doesn't reach there? They cheat by using a background image that has a strip of color on one side... but at least it's 'pure' CSS. Heck, if they're going to do that why not just an image map for 'precise positioning' of the whole darn page?
Now compare that with the table approach. 100% size table, break it up into three rows, break up the middle row into three columns, bare-bones CMS layout ready to go in five minutes flat. Did I mention the columns resize automatically just by setting their width to 'auto'? Then I just assign IDs and classes to the various elements of the table, create a few divs to subdivide content as necessary and do the format tweaks over the basic layout as specified by the table.
Because don't get me wrong, CSS is great for text formatting. I never use <font> elements anymore... but for layout, tables are still the way to go. They've been around long enough that browsers have pretty much learned to stop screwing them up.
In the final analysis, who cares if a page is 'pure' CSS? The customer only cares that it look good. And you should only care that it be easy to generate and keep up to date. Spending hours kludging around obscure browser inconsistancies just so you can rewrite your stylesheets the next time Microsoft or Mozilla fix a few bugs doesn't sound like a labor-saving strategy.
Read this presentation, and you'll understand...
Always done me proud and pretty easy to do
CSS alone doesnt do what I want it to do and tables can become clustered and overpowering. Foe example the simple 3 columns I like them to all the same height and show that way which I cant do with css. Dont know if you can but if you can I aint worked it out yet!
I have always been one of those aforementioned CSS Jockeys. I design my sites for Firefox and no other.
I despise IE and refuse to use IE only features such as Transitions and certain Java features.
So, for me, CSS is the only way to go.
I think that you should use the best tool for the job. This is usually CSS, but sometimes its not. If the CSS required to produce the same effect as tables is significantly larger and more complicated, for example the three column thing or a "wraparound" menu where the header, navbar, and footer appear to be all connected without a border, use tables. Don't get me wrong, CSS is my prefered tool. But I'll probably keep using tables where they're needed until HTML includes a "header", "navbar", "footer", "content", etc tags.
I did. It's a well designed, well argued presentation and I agree with it. Including the part at the end about things tables do better than CSS.
I'm familiar with the arguments for content/presentation separation, but what that's overlooking is that I'm writing CMS templates. All my content comes out of a database. I'd have content/presentation separation even if I wrote the whole thing in static, 1990's HTML with no styling at all.
I'll give 10 FRIH$ to anybody who can explain to me how I can make a layout with a header that sticks to the top of the page with no gap, a footer that sticks to the bottom of the page with no gap, and no gaps between the header, the central content, and the footer even if there isn't enough content to fill the whole page. In both IE and Firefox.
The fact is that you are not able to do some stuff in CSS and then you say that it's CSS fault. That's stupid
I didn't say it's CSS's fault. I just said that CSS is not the most convenient tool to do gross layout, especially if content/format separation is not an issue (like in CMS template design for instance).
If I'm not able to do something in CSS, or that it's a big pain in the butt to do it in CSS, yet I can do the same thing using a different method very easily with no disadvantages for my purposes... then that suggests that CSS is not the best tool for my needs.
To put it a different way, if I installed Linux with no window manager on the lady next door's computer and said "Don't worry, you can still read your email using Elm, browse the web using Lynx, and do your writing using Emacs" it's not Linux/Lynx/Elm/Emacs' fault that she won't be able to do those things as effectively as she used to. It's just that for what she does, it just ain't worth it to fiddle with these tools even though there are scenarios where they would be more powerful and entirely appropriate.
But thanks for the links. I'll read them over the weekend and if they do what I'm trying to do, those 10FRIH$ are yours! If you can think of something useful to do with them, lemme know. ;-D
What I ended up using is this...
...with some of this thrown in to fix IE's stupid 'italics inside justified text' bug that mysteriously breaks otherwise perfectly good layout...
In the final version, I'll remove all the IE-specific hacks and put them inside a stylesheet that gets called from within <!--[if IE]> tags as discussed here...
I'll still be left with an ugly, ugly stylesheet. But I'll break it up into two-- one for the 'touchy' layout and one for the safe formatting-- fonts, colors, backgrounds. That second one will be given to developers who I'm not yet sure about to work with so they can't do as much damage.
Hey ! Who deleted my post ?
[quote="Ranfaroth"]Hey ! Who deleted my post ?
Depending on why you care about content/format separation. If you care about it because your users access your site through things like cell phones and voice-readers, then I agree with you, it is a client-side issue. If the reason you care about content/format separation is just because you want to be able to have the content and format maintained by different people, then the CMS already separates the content for you-- it stores the content in the database and the template gets applied to whatever content it retrieves. The template could be written in static HTML and you'd still never have to touch the content in order to change the format of the whole site (but again, it's probably going to look like crap on someone's cell phone, PDA, or Elvis Decoder Ring... and I'm not going to lose any sleep over that).
At any rate, most CMSs populate the templates with tables and other crud of their own, so all those people killing themselves writing 'pure' CSS templates are wasting their time.
I'm sorry, I'm probably being a bit dense, but what are the disadvantages in using it for a CMS?
CSS can probably do anything if you put in enough hacks... but it's not always the most elegant, maintainable, succinct, or robust solution. Just like Linux. Sometimes it is but not always. Beware of people who tell you some tool is universal.
Anyway, the original problem that prompted all this is more or less solved now. I have a 3-col/header/footer layout now and in typical CSS fashion it has a sheet full of browser hacks which is many times longer than the document. At first I looked at it and went 'no way am I going to trust someone who is even less experienced than me to edit this'. I ended up dealing with the maintainability issue by isolating all the unmaintainable CSS in one sheet and putting the maintainable stuff (fonts, colors, a few layout elements, background images) into a separate file which is the only one the site maintainer should ever touch.
CSS and XHTML tables..
but I prefer using pre-made systems and modifiying them a little bit.
As a beggining programmer, I don't like messy code.
And if someone has done something for you, accept it and say thanks on the way.. that is if the soft is under GPL =)
You egoist server-side point of view is nothing compared to web point of view.
To repeat some : tables are heavy, non accessible, slow...
Claming that a technology is bad because some outdated and no more maintained tools don't support it is so stupid..
Basically, CSS is the way forward. Gecko-based browsers (Firefox) are becoming increasingly popular, and use CSS properly, so the era of ugly compatabililty hack is almost at an end. Using CSS makes pages easier to update, easier to theme, faster to load, look better and also doesn't involve an ugly hack at its very core (tables, I'm looking at YOU). It's not hard to get a decent CSS layout - you just need a bit of patience. And deciding that all users of IE don't matter is another way of making CSS design easier.
Standards schmandards! I'm fed up! Jumping through hoops just to make a tableless 3 column, header, navbar, footer design is not my idea of fun. One of my tableless design sites actually has a whole separate stylesheet just for the collection of hacks I have to apply to keep the layout looking the same in IE, Mozilla et al and Opera.
I remember a while back someone did a survey on how many W3C members' sites could pass the W3C online validator and over 90% of them failed! I wonder how many member sites could pass the validator today? I say when they get on the bandwagon then so will I.
I use flash, css, and tables.. sometimes all 3, sometimes just flash sometime just css and table.. ive actually made sites almost fully in css too
I'm afraid I'm strict CSS and XHTML.
Tables are not for layout... they are for tabular data... You don't need to misuse tables when using CSS (which isn't even hard to use).
I don't like WYSIWYG's either. Although the recent version of dreamweaver is doing it better, they don't make very standards compliant websites.
I'm a web standards advocate. Creating websites using the proper methods will ultimately result in a better environment for everyone.
I don't know if you noticed this (this is a tangent.. so skip if you like) but the w3c browser usage is showing a slow increase of people moving back to IE. IE 7 is out shortly, so people will go and use it, at least for a while. We can't ignore the IE users forever....
We can and should. People will keep moving away from IE as long as it's worse. When you say shortly, it's another year or so, and in the interimFirefox is still progressing. People are getting fed up with IE.
I was using the term people quite generally. People like you and I won't ever go back to IE I shouldn't think, but I mean people like.... my mum... who just use whatever comes on the system... or people who just use whatever is the newest thing on the block, believing foolishly that it'll be the best because it's new.
Actually, quite a few moms and grandmas out there are on old systems-- Win2k, WinME, and even Win95/98. Will IE7 be available to them? Nope. So what will they use to view new websites that don't render properly in old version of IE?
They'll have to switch to FireFox, which supports damn near every platform in existance. And, you know they're going to be asking you to help them, so start brushing up on those mad FireFox skillz.
That will probably be offset (at least partially) by all the web designers who will be forced to upgrade to IE7 strictly for development purposes.
When I layer a page using css the whole page looks so much cleaner. Besides with css I have total control where things can be placed. Not to mention a faster loading page. So much more can be done with a lot less code using a style sheet.
The heck you do. This is only true for certain types of layouts. I dare you to find a pure CSS layout that has all the following features:
1. Looks the same in IE6 and FireFox (this is a hard challenge; good luck!)
2. No CSS hacks (this is a hard challenge; good luck!)
3. Left column, right column, center area
4. Header and footer that span all three columns
5. Every one of these fields is fluid-- i.e. resizes and redistributes text depending on the size of the window; not fixed-width
6. If none of the columns reach the bottom of the page, the footer sticks to the bottom of the page; if one of the columns scrolls off the page, then the footer is at the bottom of that column (this is a hard challenge; good luck!)
So until you can post a link to a site that does all the above, there is no reason we should take you or any other pure-CSS zealot seriously.
I don't know for whom you program websites guys, but there are still close to 90% people outthere that use IE, in older or less older versions. So even if the firefox community is growing, an d growing fast (and I'm a passionate user), websites will have to take IE browsers inti account.
Exactly. That's why I'm using tables. Even IE can display a table properly. And I agree with you-- I'm not going to set any website loose on the world unless it looks good in IE.
And you still can make Wc3 strickt pages with that,only you need more patiens and time.
Random tip:Did you know,that you can add to images 100% attribute to fit the screen.
You can't have both conditions.
If you choose only one, I already gave you the answer to your request.
(By the way, why are you against CSS hacks ?
I am against them, because I don't care IE. But you, you care IE, so I don't understand...)
digibluez : just because you failed to write right code you claim that the HTML inventors are wrong ? That's a bit stupid...
Tables are for tabular datas. It's in the name, it's in the spec. You just have to accept it.
I am not an expert in the matter. I just know what I have tried with CSS, and I like the results that I get.
I am not trying to disagree with you, just adding my thoughts.
Have you tried using topstyle css editor?
Yup. I kind of like it actually. Still, CSS is so much simpler than a scripting language that it's easier for me to just write it in a text-editor and have a browser window open next to it that I can keep reloading to see previews.
Isn't one of the main points of CSS cross-browser compatibility? Something that the majority of computers use is by definition not deprecated-- web developers and standards oragnizations don't get to say what's deprecated. The market makes that call. Now, when I come accross a target group of users who didn't use IE, I won't bother supporting IE in sites that I write for them.
(By the way, why are you against CSS hacks ?
I am against them, because I don't care IE. But you, you care IE, so I don't understand...)
I'm against CSS hacks because they do not validate. Furthermore, they are exploiting parsing bugs in various browsers to show different browsers different directives. The problem with this is that bugs get fixed (even, occasionally, IE bugs). Therefore, if your page depends on hacks to render properly, it will eventually stop rendering properly. Tables have been around for a very long time, and all the major browsers interpret them in the same exact way. They don't actually violate XHTML standards. The only thing tables violate is the sensibilities of a few semantic-web purists who care more about what's theoretically better than about what actually works.
And, btw, FireFox isn't 100% compliant either. It's much, much better than IE, but it still needs a few of these browser-specific CSS directives in a few cases.
Heh. Specifications are for syntax, not for content. If my page validates, it meets the spec and it's nobody's business what's in those tables. I don't have to accept any standard I don't feel like accepting-- the only people whose opinion matters are me, my customers, and their customers. The opinion of W3C only matters insofar as it helps me make my customers and their customers happy. That's the difference between a standard and a law.
Might want to read this...
It's the counterpoint to the link you posted earlier. Which I read, btw, and learned from. Which is not the same thing as agreeing with 100%.
Here is a layout with Heddar, Footer, and 3 colums that displays the same in a mozila browser and IE
egnore the banner on the sample. it is on brave host and it comes with the free space. http://3nails4me.bravehost.com/3rowsample.htm
I set this page at 800px wide by I think about 650 high. of course that can be set to any size.
Nice try but that's fixed width. (Which is used lots in css sites as a cheat. Look at ALA.)
The current site I'm working on uses only tables for layout, and damn is it messy. It does display properly in both IE and Firefox though, and in resolutions of 800x600 and up.
I'm not really sure where to start with CSS. I use it a bit for text and table formatting, but for nothing else. Converting tables into divs sounds rather tough, I have at least 10 images on my page all lined up perfectly, and somewhat optimized for size (ex: 1pixel high repeating backgrounds).
Keeping content seperate from the layout isn't a problem at all for me, because the content is just on pages by itself, and the alyout is loaded around it.
If a browser refuse to implement CSS, how could it be compatible ?
(You can imagine how I hate invalid hacks )
For instance, have you ever heard about Conditional comments ?
Example with this spec or that one, you should look at.
But read this particular one, and this one
It's even said that the validator has limitations... (syntaxic limations)
And how could it validate those points for example ?
One thing for sure, the web just like our OS's,computers, and Internet connections are for ever changing. Having a interest in web design it is my desire to change right along with it. When all of this started all we had was dos. Now look what we have now. I hope that I never become one sided about anything as far as web design and authoring goes. I will always keep my mind and ears open to learn what ever there is to offer.
By no means am I or do I consider my self an expert. There is always something new to learn.
On paper your arguments sound very reasonable. In practice, CSS does a good job of everything except layout. When browser support improves, I'll switch to 100% CSS.
You're also right about there being multiple web standards... so why should I pick the one least suited to what I'm doing? Web standards exist for web designers, not the other way around. If a standard doesn't do what people need it to do, they will abandon it, and it will become a failed standard. It's not like this is some kind of moral or political issue... the word "should" has absolutely no place in this discussion.
Hmm... that gives me an idea. I think I'll write up my own DTD for a new standard-- the Common Sense Hybrid Markup Language standard. Basically XHTML 1.0 transitional, but it minds its business about what parameters you put within tags and without the retarded insistance that ampersands within <a> tags be written as & (these so-called standards guys clearly didn't bother to talk to anybody who makes heavy use of scripting when they made this asinine decision). Right off the bat most of the script-based CMS's and BBS's will validate against it, tables and all... a standard that reflects how people do make websites instead of how someone out there thinks we should.
In fact, you've got first a testcase, then the theoric render, then the renders obtained with various browsers
For instance, I hate wasting bandwith and RAM because a stupid web designer still use old (and heavy) tables instead of CSS.
I was a tables only person because I did not understand CSS. DW made it easy to (for me) to design away. It was messy, hard to read, etc. I was working in DW so who cared. I tripped upon this site:
It inspired me to finally learn a little CSS. I was off to the races and have not looked back.
I found this great program (IMHO) and furthered my web designs:
As far as layouts in CSS check this out:
The site will let you do a very good search.
Remember it's about getting info out, design comes second in my opinion.