Slashdot Mirror

The "simple" CSS Complex Spiral Demo does a good job of demonstrating some of IE's broken CSS. I also like the distorded edition too - very creative usage of CSS!

The "simple" CSS Complex Spiral Demo does a good job of demonstrating some of IE's broken CSS. I also like the distorded edition too - very creative usage of CSS!

Jeez, quit your whining!

Oh, and if you want to see how well IE renders W3C compliant sites, try opening This or this in both IE and Mozilla. IE is the most uncompliant piece of crap browser out there when it comes to CSS and DHTML. ...and quit your whining!

Good HTML means separating content from presentation as far as oossible.

Er, no. It means separating structure from presentation. See Douglas Bowman's piece on the topic and Eric Meyer's reply.

If you're really smart, you'll name them after what they represent { and are more meaningful than and

You're kinda defeating your own purpose with that. Much better to use a semantically meaningful emelent like address or similar and style or add classes/IDs to that. Just using a bunch of meaningless spans obviates the advantages of using a structural markup language in the first place.

For the most part, IE 6 supports CSS "well enough". It is possible to create a site that uses XHTML Transitional and CSS that degrades well on all browsers [including the cursed NS4].

The real problem is that UI designers and programmers want to do what they know how to do, rather than consider the alternative.

Take a look at the following sites for additional information:

• http://www.alistapart.com/
• http://www.zeldman.com
• http://www.realworldstyle.com/
• http://www.meyerweb.com/eric/css/edge/

Pay more attention to good information design? That would be great. But that doesn't make it any less annoying when I finish making a webpage on my box at home, only to find out at work that all the stuff I did looks crappy in ie. Yeah, that's really going to turn me into a Microsoft-fan, because now I more-or-less have to redesign my site, or else just allow 90% of internet-users (okay, so 99% of the internet-users will NEVER visit my site, but whatever) to think that my site was designed by an infinite number of monkeys in my attic.

I'm trying to be reasonable here, if I said what I really thought, this would probably me modded flamebait. Yes, content should be more important than style; straight HTML will put more or less the same content on any browser. But if CSS is going to be supported at all, shouldn't web developers be able to expect the same behavior across multiple browsers, just like they did from HTML? Why should CSS or newer standards be different from HTML? If IE didn't support HTML properly, would you consider that broken or would web developers still just be whining about nothing?

Sheesh. Okay, rant over.

I know most of the /. crew thinks of web design as a frivolity [the people who manage /. certainly do] but adopting CSS [yes, even for layouts] is important for a number of reasons. It introduces structure to the content that makes it easier to generate, maintain and manipulate. It means that people using old/weird clients [yes, even line-mode browsers] can still use your site. It means that search crawlers have a better chance of getting good info from your site. It means that engineers won't have to support wonky javascript for rollovers or browser sniffing. It also means that programmers never get that Friday at 4:30 pm phone call from angry marketroids who are upset that something is a pixel off. Isn't that worth it?

For designers this is important as well, as it can make your job easier in some ways. It can also make it more difficult, explaining to your client/marketing person/product manager that it's not going to look identical in every browser is a tough sell at this point. Also, web design is finally becoming its own discipline. As designers we are now responsible for helping our clients and coworkers structure their information in ways that is more flexible and useful. We're not painters anymore, we're part of the construction team.

Is support perfect across all clients? Nope. Will it ever be? Hell no. Is it good enough? YES.

• CSS Edge
• Taming Lists
• The CSS Zen Garden

I almost forgot, be sure to check out http://www.zeldman.com and http://www.meyerweb.com for ongoing debates on these subjects and more.

Apple has apparently improved CSS in Safari. The Complex Spiral Demo previously mentioned via the Mac Browser Smackdown, which in turn was mentioned on slashdot, now renders correctly in Safari. (Previously Safari was coloring black the parts which weren't in the blue box and were off the screen when the page finished loading.)

(As a side note, I couldn't load the Ars Technica article without turning off Javascript. It kept sending me to some crappy ad that was supposed to redirect me back to the article but didn't.)

Hehe, Slashdot's not really a shining example of web accessibility, but it's a good place to ask for help none-the-less.

The first stops for help (as someone's no doubt pointed out already) should be:

Section 508

Mark Pilgrim's excellent "Dive Into Accessibility"

The W3C's web accessibility guide

The UK Disabled Rights Commission website, paying particular attention to the superb Interactive Demos (e.g. Inaccessible Website Demo).

Buy these books:

Constructing Accessible Websites

Building Accessible Websites

Oh, and a copy of Zeldman's Designing With Web Standards for good measure.

Write your pages using validating HTML or XHTML, and style the pages using CSS.

Validate your webpages using the W3C Validator and your CSS using the W3C CSS Validator. Use Watchfire's Bobby to validate your pages, and aim for AAA rating (also note that Bobby has some helpful hints when it does find errors).

Other excellent resources (in no particular order):

http://www.webstandards.org/
http://www.w3.org/WAI/References/QuickTips/
http://www.mezzoblue.com/
http://www.meyerweb.com/
http://www.simplebits.com/
http://www.whatdoiknow.org/
http://www.stopdesign.com/

While designing your standards compliant sites if you have netscape/mozilla a really useful sidebar to have is the devedge multibar. Along the same lines, here's an interesting site about css design.

Another great site demonstrating what CSS is capable of is Eric Meyers' CSS Edge. There are a few examples that refuse to work in IE because IE's CSS support sucks, but even for those, Eric usually shows a way to hack it to get IE working at least semi-properly. He's also very much a promoter of standards, so everything on the site is W3C validated CSS. Some very cool stuff.

Witness the recent Taco IRC interview where his response to "when will Slashdot validate at the W3c" was "Whatever. Next."

The only reason to use tabular layout (like Slashdot does) is to make things look good in Internet Explorer.
Switching to pure CSS (as the W3C recommends) saves bandwidth (as all of the formatting and layout information can be stored in a separate, cacheable file), gives you the freedom to create far more interesting and visually powerful designs, and makes the page accessible.

Slashdot should take a hint from Wired's excellent example and move into the new millenium.

Example menu?
Wouldn't surprise me if it is screwed up code on your part. I mean, making a menu isn't exactly complicated but people still manage to screw it up.

What, you mean like a petition to Instead, round up as many people as you can to petition Microsoft to get them to support the PNG format as well as Mozilla does.

What, you mean a petition like Aaron Adam's petition for Proper PNG Support in Internet Explorer for Windows, as endorsed by the likes of Zeldman (designer extraordinaire), A List Apart (who have an article describing various workarounds, which are simple but ultimately impractical), Eric Meyer (CSS guru - excellent books BTW), Owen Briggs (the Noodle Incident), and the like? I'd highly recommend that you take the time to sign it, it'll only take a few seconds...

I'd also encourage you to give Microsoft some product feedback (no registration or e-mail required) on IE/win's crappy PNG support ;)

As for resources describing each browser's level of support, check out this excellent listing of each web browsers' PNG support over at Gregg Roelofses LibPNG site.

Cheers,

ManxStef

How do these things get modded up? They're neither funny nor insightful.

"...Technologies are tools, not religions. Use the best tool for a job. Show other people how to better use a particular tool, if you can. No matter how skilled you are with a tool, please don't hit other people with it." --Eric Meyer

Have you checked out Eric Meyer's complex spiral demo? It's an example of a two-column layout using only CSS and working in all browsers. In addition, he links to sites that have readymade CSS for most popular site layouts (on the "links" page).

I used his code as a base for my CSS-only site, and it works perfectly in all browsers.

Wow, such a complete misunderstanding of CSS... CSS is intended to separate content from presentation. That's it. It has nothing to do with Flash or "exciting animated graphical effects".

It's unfortunate that CSS is so misunderstood, as it is really a quite elegant model for web presentation.

• http://developer.apple.com/internet/css/introcssla yout.html
• http://www.alistapart.com/index.html
• http://www.meyerweb.com/eric/css/edge/

My hope is that when the Safari development team sees an issue with a site that has poorly coded pages, they contact the maintainer of the site rather than coding a work-around.

Interesting you should mention that - I believe that the Mozilla team has an explicitly defined standards evangelism crew, populated by such luminaries as Eric Meyer.

It's their job to find big-name sites that break in Mozilla due to non-compliance with w3c standards, and make direct contact with their webmasters to explain the benefits of coding to standards.

In contrast [to Mozilla] Opera was ... supporting CSS better...

Better? No, just differently broken. Maybe Mozilla doesn't support CSS counters, but Opera has it's own problems. CSS/Edge's Complexspiral Demo is mangled by the latest Opera available for MacOS and Linux. (I'm told the latest Windows release handles it better, but that's not an option for me.)

Taken on the whole Gecko has the widest support for the endless number of standards on the web.

As far as styling XML goes, your XML apparently does have to have the DOCTYPE stuff set up correctly. This means you get no joy with the stuff on the w3c Styling XML site; safari won't display the xml files there at all.

Oh yeah: it's a bit faster...not that you're likely to notice.

As far as styling XML goes, your XML apparently does have to have the DOCTYPE stuff set up correctly. This means you get no joy with the stuff on the w3c Styling XML site; safari won't display the xml files there at all.

Oh yeah: it's a bit faster...not that you're likely to notice.

Hey, noob, It's spelled "drivel"

http://www.meyerweb.com/eric/css/edge/complexspira l/glassy.html
that also does not work in my latest patched IE6, and it never has.

Extend and enhance (also known as extend and extinguish) is not the way to go about making a standards-based system. There are standards. They are not mutable, they are not extensible (except where stated).

In this particular case, they purposely serve a messed-up CSS stylesheet to Opera. If you browse with CSS turned off, the site looks fine. So, regardless of their adherence to standards (which is not very good), they purposely try to monkeywrench Opera. That's the point of this story, really. Every page should render identically on every browser. All information should be visible on every browser. Purposely hiding your text under a graphic is unacceptable behavior.

1. Netscape has been completely redone and is now the same thing as Mozilla (except that Netscape is crippled by AOL Time Warner).
   
2. Mozilla is far superior to Internet Explorer. Internet Explorer does not have support for even basic Internet standards like CSS 1.0.

• Improved CSS support -- CSS menus now work pretty much as expected, overflow: scroll works better, and numerous other fixes.
  
• Opera now has a password manager! Both HTTP auth and login forms can be saved and filled in automatically later. "Wand" is a bit of a cheesy name for it, though :)
  
• Quick Download -- now instead of right clicking, hitting Download, waiting for file dialog to pop up and hitting Save, you right click, hit Quick Download, and it's done for you.
  
• Links bar, similar to Mozilla's Page Info -> Links tab. It's a bit primitive at the moment, but it's nice to see they're working on stuff like this.
  
• Fast Forward -- fancy <link rel="next"> UI gadget -- if a site uses said links, the Forward button is turned into a Next button, which is nice for browsing things like search results pages and blogs.
  
• Improved skins support -- auto-install for new skins, more flexible for users (no more .ini editing if you want to rearrange your buttons, for instance), etc. Someone badly needs to Opera 7-ize Minimalist, though, I'm not a fan of the Aqua look, or the bare-bones "Windows" skin that ships with this beta.
  
• The bookmark manager is back, and looking nicer than the Opera 6 one.
  

I have seen some really tricky, innovative CSS designs that challange those complex designs created using tables and such... for example:

Wired.com
http://www.wired.com/

Joe Gillespie's Box of
tricks
http://www.wpdfd.com/editorial/wpd1102 .htm
See the sample sites he created in this article.

Botbomb
http://www.botbomb.com/

CSS/edge
http://www.meyerweb.com/eric/css/edge/

And there's undoubtedly more out there...

Accessible pages don't have to be boring - it just depends on the skills of the CSS coder.

• 2002-10-11 14:09:06 Wired redesign to use XHTML and CSS (rejected)
• 2002-12-06 16:39:05 W3C redesign to use XHTML and CSS (rejected)

Almost all css sites I have used have been really slow when scrolling (this was on Opera and Mozilla, I don't know about IE). With a different div for each comment I imagine this might be fscking slow, although I should point out I'm a programmer not a web developer.

stylesheets are implemented differently in different browsers, and the implementations are bound to be more dynamic than tables. The bugs for tables have been worked out why do it again for css.

Isn't slashcode opensource? Why don't you go in and fix it yourself if it bothers you?

See Eric Meyer's CSS Edge site for the original and details of how it is done.

+1 Informative. I thank you 8-)

no, that doesn't allow you to do what I want. That allows you to turn stylesheets on and off, and it allows you to set the user stylesheet.

If a page provides multiple stylesheets (for example, wired.com's new design has different stylesheets which specify different font sizes) IE will use the default stylesheet and not give you any method of choosing another one.

Mozilla, on the other hand, will list each of the stylesheets in the View->Use Style menu. (try it right now.. go to Wired.com in Mozilla and look at the View->Use Style menu. You can choose between four different stylesheets for that page.)

To do the same thing in IE, you need to go to favelets.com and grab the "choose stylesheet" javascript.

Another cool site which shows off the ability to have multiple stylesheets on the page is this page .. it's much more interesting than Wired's font size changes. :)

Yes, I submitted a story on this to Slashdot, but apparently it wasn't considered "newsworthy".

Nevermind that it's probably the biggest milestone for XHTML and CSS supporters yet. Nevermind that it proves that a large, popular, high-traffic website can successfully design and implement a site that makes itself accessible and easy to read in Lynx, that doesn't need to use tables for layout, needs less bandwidth to run, with less server load, will be easier to maintain, and will be viewable in every browser, whether Netscape 1 or a Pocket IE. Nope not newsworthy. Instead we get articles telling us how duct tape can remove warts, great... Alright, alright, I'll stop whining now!

There's a couple more comments on the Wired changeover at the Web Standards site and CSS guru Eric A. Meyer's site (both excellent examples of XHTML themselves BTW).

Cheers,

So one of the main reasons to switch to one is identical on the other.

I'll not dwell too long on this; Your analogy to Esperanto is flawed. Mozilla speak's the Queen's HTML/CSS/DOM/etc, while IE speaks a slang popularlized by MTV & friends. Those who understand the slang might not understand all your fancy words or be confused when you respond positively to a double negative, but you're speaking pure English.

I see you don't claim to be a web designer. A casual speaker of English wouldn't care at the misuse of a semicolon. A professional writer wishing to write to a casual audience might curse that he can't convey the exact meaning a semicolon would bring, because the causal audience wouldn't pick up on it. So he curses and writes longer sentences that everyone will grasp.

Web designers writing for the causal, apathetic, audience have to write so that IE understands. IE is the 7th-grade English level that novels need to be written for. IE doesn't understand what a comma splice is, but it understands "UR K-KOOL DUDE", even though "UR" should be "U R".

I see many pages that IE renders blatantly wrongly, but then, like most web designers, I've usually written those pages: The next 75% of my job is getting IE to display it the way my other 7-10 browsers do. Successful web designs are done this way because it is impossible to start with an IE-specific design and go to a design everyone can use.

Your last paragraph is curious. The standards are set, and people build implimentations off those standards. Because I impliment the standard in a sub-par way, but I market well, should the quality of the standard be lowered and invalidate the work of dozens of higher quality projects?

It has been a long time since I saw a web site Mozilla does not render properly, by the way. css/edge is one I usually point out when arguing for standards acceptance. These designs are beautiful and elegant, but fail in IE and old versions of Opera. These are simple things. This copy of the OGF's SRD demonstrates one of the simpler things IE just can't grasp.

Anyhow, I understand your run-with-mob perspective, but I don't believe it can apply rationally in this case. It's a quick step to communication lockdown if we allow our method of communication to be controlled entirely by a single corporate entity, whoever the hell they are.

The latest versions of Flash have support for accessibility.

There is an interesting website called css/edge which attempts to explore all the possibilities of doing "neat stuff" using only standards-compliant HTML and CSS. There are some really stunning demonstrations, such as the complexspiral demo. This demo shows a page that has a two column menu/content layout, complete with alpha-blended translucent background that seamlessly glides over a fixed background image as you scroll, with the translucency changing for mouse-over events on the buttons. The text size can be gracefully sized, and the layout works for any window size. This is done only with pure HTML, a stylesheet, and four JPGs -- no javascript, alpha-channel PNGs, half-screen GIFs, etc.

Thing is, if you visit this site with Internet Explorer on Windows, the above demo and most of the other demos look like crap. This really opened my eyes to IE's lack of CSS conformance. But visit the page in Mozilla, Konquerer 3, or IE5/mac, and it's beautiful.

There is an interesting website called css/edge which attempts to explore all the possibilities of doing "neat stuff" using only standards-compliant HTML and CSS. There are some really stunning demonstrations, such as the complexspiral demo. This demo shows a page that has a two column menu/content layout, complete with alpha-blended translucent background that seamlessly glides over a fixed background image as you scroll, with the translucency changing for mouse-over events on the buttons. The text size can be gracefully sized, and the layout works for any window size. This is done only with pure HTML, a stylesheet, and four JPGs -- no javascript, alpha-channel PNGs, half-screen GIFs, etc.

Thing is, if you visit this site with Internet Explorer on Windows, the above demo and most of the other demos look like crap. This really opened my eyes to IE's lack of CSS conformance. But visit the page in Mozilla, Konquerer 3, or IE5/mac, and it's beautiful.

• Navigation Lists (<nl>), with a default rendering not unlike a DHTML menu. This will likely be controlable by CSS using display: and :hover as seen on CSS/Edge
• <q> becomes <quote>, a new <dfn> element, and <b> and <i> have been completely removed. <br> is going in favour of <line> which will help with DOM and CSS. <hr> is still there for some reason. (Text Module).
• New <section> element. <h1> and friends are still in the draft, but are accompanied by a new <h> element to go with each (nestable) <section>.
• <a> is still here; no XLink in this draft, despite it being a recommendation.
• Forms are now replaced by XForms, also a Working Draft.
• No more <img> or <embed>. They're replaced by the technically superior <object>. Let's hope certain companies can actually be bothered to impliment it properly.
• Frames replaced by XFrames (nothing public yet).
• A few more global attributes, and the use of XML Events for scripting events.

Not really. IE has a screwed up box model, doesn't interpret the [] selector, and doesn't allow for fixed backgrounds of elements |= body. See Eric Meyer's CSS/Edge pages

Nice effect. I wouldn't have thought one could have a fixed background image under a moving foreground, and have the image changed by the moving foreground. Wild. I have to look up CSS one of these days..

That's not possible, because that's not what the page is doing. It's a neat optical illusion, but all the site is doing is attaching a fixed background (shifted to match the real background) to a non <body> element. The interior image is just the shell under a frosted glass layer (simple Photoshop stuff), the <body> background is just the shell itself. When you scroll the interior element, it just looks like frosted glass moving over the shell. Check out the real image here. The darker bands are also separate, fixed images.

Neat stuff, but not quite as fancy as you think it is.

And the fact, is, IE does *NOT* render most of them correctly. If you really stick to standards, and use some of the newer ones, you start to see exactly where IE is lacking. The fact is, most people (even those who write to standards) do it to fairly conservative ones.

If you want to check out IE's problems, visit Eric Meyer's CSS Edge. Or, hey, show yourself one of IE's biggest bugs by creating a 24-bit transparent PNG and watch IE color the background grey...

Those of you using IE will need to switch to Mozilla. Those of you using Mozilla won't even notice the part that doesn't work under IE, it feels so natural.

Cool effect that works only under Mozilla and just feels right. Now who's at the disadvantage?

Not everything will work correctly in IE try this link in Moz and IE

Says who? IE6/Windows and IE5/Mac both support all of CSS1, and I believe also DOM0 and DOM1.

Not really. Have a look at css/edge. Actually, have a look even if you don't use IE. It's got some very cool stuff.

Take a look at the ComplexSpiral demo at css/edge. IE gets 'background-attachment: fixed' completely wrong.

Okay, let's drive this point home. Even if you don't care about DOM scripting, there are other reasons why Mozilla is considered the most compliant of all current browsers.

FYI, the founder of Opera is also the chief author of the CSS1 standard. So you might be surprised to know that Mozilla has better CSS support than Opera.

Wow, that IS interesting. I tried it in both IE6 and NN6, only the NN really worked.

Mkoenecke's link is a little bit broken, if anyone wants to visit the page he recommends here's the correct link:

http://www.meyerweb.com/eric/css/edge/complexspira l/glassy.html

Please give some examples. So far, in all your posts on this matter, you've skipped that detail. Tell us where these sites that Mozilla/Netscape renders horribly are.

Here, I'll do you a favor...
Check out This Site (CSS Edge) in IE6 (or any IE), watch how many things IE gets wrong. Mozilla on the other hand... is perfect. You don't see many of IE's CSS problems normally because people have to code around them, even when by standards definitions, they should work.

That's Microsoft tricking you. They just drop the leading "0." from their version numbers to get the idiot market. It'll be at least another 4 releases before they get their rendering engine up to standards compliance. CSS in particular. (look at those pages in both mozilla and IE for an example of what I'm talking about)