CSS "Standard"? More of a Suggestion...
Well, that noble intention has turned in to a world of hurt and I absolutely loathe CSS. I really do. It's nice for formatting text, but for laying out pages, I think I'll pass. I have spent this entire week trying to redesign one of our core pages and it has been a nightmare of browser inconsistencies, bugs, and words coming out of my mouth that would make even the saltiest person cringe. I've concluded that CSS positioning (aka CSS-P) really only exists for sites like A List Apart to brag that they're CSS masochists and for designers to rake in large consulting fees because they have the patience to handle the various quirks.
Rant aside, I did get to thinking about the W3C and their role in this mess. And the more I thought about it, the more I realized that I don't really understand what purpose they really serve. According to their web site, the W3C "is an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards." The key word I take from that is "standards." Oh really? Have they ever tried laying out a @#$!^% HTML page according their "standards!"
Now, I know that some of you are thinking about Internet Explorer and how Microsoft (intentionally or not) let it stagnate over the years while updated "standards" have been passed. Hence it is pretty terrible from a CSS-rendering standpoint. Well you know what? Firefox doesn't full follow the spec either. Neither does Opera (although it's apparently close). (I should note that I'm aware that Safari does fully comply from what I've read.) So what's the point of passing a "standard" if nobody's going to follow it? To me, an example of a "standard" is a power supply on a computer. Every power supply I see nowadays on a computer takes a standard three-pronged plug and you can you use any three-pronged cord with it. I don't have to use a Dell cord or a HP cord or a Toshiba cord for their respective machines. The vendors (and I'm guessing the IEEE) decided "hey, instead of fighting with each other, let's be consistent and make our customers' lives easier." (Read: a standard.) Why can't the browser vendors do the same? To me, the W3C's work is largely academic if they can't mandate that a product (in this case, a web browser) function according to what the consortium passed as a "standard." It doesn't have to be immediate, but none of the major browsers have any intention of complying with the spec either due to technical implementation difficulties. (See the IE team's blog entry for this and Robert O'Callahan of Mozilla's blog entry for more info.) That being the case, the W3C's work is nothing more than a "suggestion" and way for some people to feed their egos.
Is the W3C and the passing of a "standard" pointless? Certainly not. They've done some very good work and have at least provided a focal point for the major vendors to strive towards. But this is why the potential of Flex and Xamlon and Laszlo are appealing to me. (Yes, I know there's the forthcoming Windows Presentation Foundation, aka Avalon too, but my understanding is that'll be Windows-only and for Windows XP/Vista only, so vendor lock-in is not a standard to me.) With the other products, I can drag-and-drop my components, use pixel-specific layouts if I have to, and not worry about how Firefox or IE or Opera is going to lay it out. This is all thanks to the Flash player, which, to me, is what Java has strived to be but I think most would agree it failed miserably at: write once, run anywhere. Adobe is working very hard to make Flex 2 fully ECMA-compliant, and I hope they achieve that goal, without exception. Until such time (and the penetration of Flash-based apps becomes acceptable), I'm sticking with tables for my major HTML layouts with targeted use of CSS where either necessary or appropriate.
Remember the redesign I referenced in the beginning of this post? I spent nearly 2 full days trying to lay out the page properly across browsers and less than an hour actually implementing the business logic of the page, which can be pretty complex due to different entitlement levels, etc. What a waste of my time.
What do you think?
 |
 |
 |
 |
|
|
 |
 |
 |
 |
I feel your pain. Its taken me years of reading articles, going through sample sites, hacking good looking websites, to come up with a decent cross browser template of my own for layout.
CSS takes a lot of patience, thats for sure. Stick with it! I'm so used to CSS now, that tables seem "off"... keep looking at the CSS of websites you like, and you'll find ways to solve your problems.
Best of luck!
-Sami Hoda
You're absolutely right about that point. I'm hoping we can come closer to this goal with Firefox 2, IE 7, etc in 2006. W3C really needs to step up here as you suggested.
But then, all this started way back when IE supported html tags such as -marquee-, etc which were never a standard. Inconsistant display has been a problem, and existed pre-CSS, and its for the standards orgs to really push for common look and feel (and for developers to continue to demand it!)
Hope it helps to know your not alone on this one.
Sami
I feel your pain, but I'd encourage (no, beg) you not to give up at this point. Everyone who makes the transition from table-based designs to css goes through this stage of being so frustrated by inconsistent implementations that they just want to give up. It's a natural reaction to an illogical situation. But if you persist, you will get over this hump.
I've been exactly where you are, but now after practice and study generating a CSS-based layout from scratch is second nature to me, and it will be for you too. When you get a solid understanding of a few key concepts (basically: the float, positioning contexts and the layout rules for line boxes), you realize that the contortions you have to make to accomodate the browser inconsistencies aren't really any more onerous than dealing with spacer GIFs and row/column spans and the other contortions you have to make when you use tables -- it's just that you're familiar with them, so you don't think about it as such a pain. I bet you can look at a Photoshop mockup and just "see" how the table should be set up, where you need to shim it with spacer GIFs in case the content is too short -- everything that would seem just as incomprehensible to a person unfamiliar with table layouts as negative margins, absolute positioning, and floats seem to you now.
I would also encourage you to focus on the reason for switching to CSS layouts. It's not just because CSS is cool -- in fact, I would say it's not even for CSS's sake at all. What you gain when you switch to CSS layout is all the things we had to give up when we started using tables for layout in the first place - semantics, logical content layout, and to a lesser extent, page weight. This is where you start seeing what CSS gets you that tables can't -- higher search engine placement because your actual content takes up more of the page; pages that "just work" in screen readers and small-display browsers; and page maintenance that's a total breeze because the page contains only content.
So, please stick with it -- I promise you'll see the benefits once you're comfortable with CSS.
-Patrick
One bit of advice I was told a while ago was, 'Code to the standard, or as close as you can, and then go back and tweak what IE breaks'. I try not to use too much exotic stuff as that's where you get into compatability problems.
I echo everyone elses sentiments here. Making the transition to CSS based layout takes a huge leap of faith and a huge cahnge in the way you think about your page layout.
One of the best things you can do is to look at sites that use CSS-based layouts and then disect the page.
Here is a link to something I was working on before I left my previous employer, it may not be perfect, but it looks the same in IE, FF and Opera (or so I have been told) http://www.boyzoid.com/demo/. Keep in mind, I had nothing to do with teh graphics, I was just given the .PSD file so I could cut it up as needed.
Thanx!
10 minutes ago, i was struggling with a weird CSS layout bug in IE. I copied and pasted working code from one location to another, and for some unknown reason the text disappeared in IE unless i rolled over it with the mouse, as if i had set visibility to hidden on that class, and on hover, set visibility to visible. I of course HADN'T done any such thing, and after 15 minutes of struggling, you know what i did? Emailed css-discuss? Nope. I stuck it in a table and moved on.
I love challenges, particularly technical challenges. It's one thing if all I had to better understand was the difference between absolute vs. relative vs. fixed vs. static positioning. But since literally every browser available will treat my tests differently in a lot of cases, it's hard to discern bugs that are mine and those that are browser-related.
Again, I'll keep plodding through. I don't give up that easily. But I wish we'd stop calling things "standards-compliant" when it's clear there isn't much of a standard.
Sandy, thanks for pointing out the discussion groups. I'll certainly browse the archives.
Scott, good idea on the 'code to the standard' approach. I'll keep it in mind, but I'm not seeing much of a standard!!
There's a couple of specific things I can recommend to help you get through the inital pain. First of all, avoid (as much as possible) specifying a width on an element that also has margin or padding. Sometimes you have to add additional non-semantic elements to do that, but the only alternative is always remembering to put in hacks for IE's incorrect box model. Second, get to know the most common IE bugs by reading http://www.positioniseverything.net/ie-primer.html... so you'll recognize them when you see them.
This pretty much sums up my feelings on CSS-P as well. A lot of my site's customers still use older browsers like IE 4 and 5 and even some older Netscape variants. I just lack the time and patience to deal with those issues AND work on getting the "modern" browsers to render content the same.
So, for now I'm using CSS mostly for adding formatting to my table based layouts, and I will continue doing so until the standards support in the commonly used browsers improves. If I was running anything other than an e-commerce site I would probably feel differently, but the reality is that my customers don't care if I use CSS-P or tables, they just want the site to work.
In other words, I'm going to let all of YOU guys deal with the hacks and tweaks and headaches, and I'll jump into CSS-P once its as easy as table based layouts are now. :)