Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Garden and CSS News, Conspiracy Theorists Unite!

July 26, 2003

Note: If you’re looking for the comment Tantek has made about the CSS validator, due to archiving changes on this site you may now find it here.

If you haven’t been to the Zen Garden in a while, go! The current front page set of designs (Hedges through to Not So Minimal) is absolutely amazing, and way exceeds my vision of what this would become. Everyone who has submitted so far ought to be proud; this is a quite a thing we’ve got here.

As well, the translations list is growing. Twelve languages are complete, and I have four more in the works. I’ve learned a lot working with foreign character sets, and I’ll write about my findings in the future. For the time being, take a look at Jukka Korpella’s thoughts on multilingual authoring for the web, written after his experience translating the Garden to Finnish (coming soon!)

It’s getting a bit harder to keep up with the volume of submissions. I work with almost every designer to bring their work up to Zen Garden standards, and I’ve tried to give as helpful and constructive criticism as possible to the work that doesn’t make the cut. I have at least 10 submissions on hand right now, some will make it, most won’t. That’s 10 people I have to spend 5 to 10 minutes writing back; it adds up.

How am I doing so far? Consider this a chance to voice your opinion about the way I’m running the Garden. I’ve made many small changes along the way thanks to feedback, and I’m open to more. Just remember — I can tweak non-display code like titles and accesskeys, but there are far too many designs to modify structure. §

Seamus Leahy is at it again. Reminiscent to the Literary Moose’s CSS Destroy table experiments (look for ‘A Rose of Winds’), he’s come up with some really interesting alternative table formatting for browsers that can handle CSS-2’s Table Model. §

For anyone looking for a slightly less ambitious challenge than the Zen Garden, Nic Steenhout has written me about a contest he’s running. The Internet Bonsai Club is looking for a CSS makeover. 500 people a day visit his site, so it could be some rather respectable exposure. Take a look. §

Holy signal to noise, Batman. Like, what? Some days I start to wonder if Mark Pilgrim is on to something when he closes comments on older threads. §


Reader Comments

MikeyC says:
July 26, 10h

First of all Dave, you are doing a great job!

Now the feedback…

From the ‘CSS Zen Garden’ HTML page:

The media attribute specifies ‘screen’. This, of course, makes perfect sense as the designs are rich and visual in nature. They’re not meant for aural, print, small screen, etc…

However, some of the submissions use the ‘voice-family hack’ to deal with the IE 5 box model problem. While I definitely see the reasoning and value in using the hack (heck, I used it myself!), it ultimately results in validation error:

Property voice-family doesn’t exist for media screen : “"}"”

If I’m not mistaken (and if I am please feel free to correct me) but part of the reason that the Garden exists is to show the value of standards-based design. The ‘Garden’ page also uses a strict XHTML doctype so the assumption can be made that adhering to standards is paramount to making the case for standards-based design.

My humble solution: Include an (admittedly ugly) condtional statement in the head section if IE 5 must be supported. Yes it is an ugly hack (arguably not more so than adding extra div tags for purely presentational reasons), *but* its completely valid. Its not *valid* in the sense that its tricking the validator either, but actually valid in that its really just a comment in the mark-up to every browser but IE 5+.

This is what I use on my site Zeit.ca:

<!–[if IE 5]>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”/style/hacks.css”>
<![endif]–>

I do this to keep my main stylesheet free of hacks and at some future date it makes removing IE 5 support incredibly easy as all the hacks are stored in their own file.

This addition would not break any current designs and would allow authors the ability to support IE 5 in their design without resorting to hacks that prevent validation.

MikeyC says:
July 26, 10h

The commenting system stripped out a line from my last message:

“From the ‘CSS Zen Garden’ HTML page:
<style type=”text/css” media=”screen” title=”currentStyle”>”

Dave S. says:
July 26, 11h

Oh, for Pete’s sake. I just changed the media type last week from “all”, and hadn’t realized it broke the box model hack.

Guess why I changed it? That’s right: accessibility concerns. Specifying media=”all” has issues with Fahrner Image Replacement in screen readers, since they’ll pick up the display: none;. I figured an easy way out was changing the media type, and as an added bonus it got me thinking about opening the floodgates for print media style sheet submissions too.

Well, I guess that’s out.

Dave S. says:
July 27, 01h

Alright — onload javascript dropped, and media type deleted. So that opens me up again to people complaining about FIR breaking JAWS, but in this case I’m going to have to choose valid CSS over a small accessibility concern which isn’t entirely relevant anyway.

July 27, 01h

The Zen Garden is well linked in a lot of german weblogs, as far as I read them. It was mentioned a lot of times in the css-d-mailing list (that’s where I heard of it the first time) which is pretty multinational.
It is suggested as reference in the IWA/HWG CSS Intermediate online course.
So I think that a far amount of potential submitters even outside US/UK/Canada should be aware of this project.

6
Didier Hilhorst says:
July 27, 02h

Dave - I understand your point of view. Besides, it’s absolutely not your fault that there is a lack of international submissions. And, of course, I understand that you’re not going to refuse outstanding submissions that fall within a certain geographic region that is already well represented.

Anyway, to make my point I decided it was time I roll up my sleeves and get to work to produce a submission. That way maybe Holland might get a place in that list (if it’s good enough).

MikeyC says:
July 27, 03h

Dave wrote: “media type deleted”

I am not “intimate” with the spec so please correct me if I am mistaken: If you don’t include a media type is that not the same as specifying a media type of ALL? Sure the CSS and XHTML will validate, but devices like webTV/small screen etc… would be correct in trying to render the site using the CSS provided when really they should not (WebTV renders it regardless, but that is besides the point).

Again, I completely understand your reasoning, however it just strikes me as being ‘incorrect’ (albeit pragmatic).

July 27, 04h

Just one request: is there any chance you could lose the status bar effect? It’s annoying in browsers that support multiple tabs as it tends to stick around on other pages, but more importantly it makes it impossible to see which images are being loaded while watching the page render, which helps the visitor understand how the design is structured (particularly when on a slow connection).

Dave S. says:
July 27, 05h

MikeyC - yes, AFAIK, no media type is the same as media=”all”

There’s really no elegant solution for this one. Either our CSS as media=”screen” breaks the validator when we use Tantek’s hack, or all devices get the same CSS and it validates.

I’d prefer to use screen, but not at the expense of validation. If someone can come up with an elegant solution that doesn’t involve stripping out all Tantek hacks and placing them in a separate CSS file, I’m all ears. Not only would accessibility concerns be solved, I’d be able to also add media=”print” and open that up for submissions too.

MikeyC says:
July 27, 06h

“There’s really no elegant solution for this one.”

Perhaps in a year’s time the act of simply hiding CSS from IE 5 can be assessed (using the high pass filter or whatever), just as CSS is currently hidden from Netscape 4. IE 5 currently has around 30-40% marketshare?? How low must it go before you would feel comfortable hiding CSS from it and its broken box model?

Dave S. says:
July 27, 06h

How low? Consider some still code for NN4.x’s 1.5% or lower market share… Me personally, on the Zen Garden? I’d say 10% or lower would be enough for me to start hiding CSS from IE5, but you can guarantee I’d get a lot of e-mail about that if it ever happened.

The Garden is seen in a lot of different lights; some think it goes too far and isn’t practical on today’s web, while others think it doesn’t go far enough and is overloaded with unsemantic junk. The majority gets it, but the splinter groups on either side seem to be the most vocal.

Still, it’s about practical CSS that can be used today (for the most part — I broke a few rules with ‘mnemonic’, and have bent them once or twice for other designs) and supporting IE5 is well within that definition.

12
Didier Hilhorst says:
July 27, 07h

I noticed you have an impressive list of translations available of the CSS Zen Garden. However, there’s not much of an international representation in the list of official designs. It’s mostly anglosaxon designers that dominate the list (errr, and Germany). I think it’s time the international webdesign community outside the US, UK and Canada wake up and submit their work. In the future it might be an idea to limit submissions to countries that are not yet represented. Of course this would mean (positive) discrimination, but heck, it would limit the number of submissions.

You could have an “International Submission Month”, a month where the only submissions that will be accepted or those of designers from countries not yet listed. Sure, quality matters. It still has to be good! After that month, submissions can resume to normal. Ah well, just a suggestion.

Dave S. says:
July 27, 09h

Good points Simon - I’ve had others complain about that too. It may yet go.

Didier - If designers outside English-speaking countries need to be better represented, it’s up to them to submit. Maybe the Garden needs to be better-promoted on non-English webogs; I can’t do this on my own, not the least reason of which is that I pretty much speak English only.

I’m not playing the political game, so if you see a deficiency, it’s only because I haven’t received anything. Your ideas are interesting, but I’m not going to start denying good work just because it doesn’t match my geographical criteria ;)

Seamus says:
July 27, 09h

I have now create a second example for the reformatted table.

Jai says:
July 28, 02h

The problem I’m finding is that as soon as I put any position (relative or absolute) on the extra divs, they imediately assume relativity to the top and left of the entire page body (as they should, based on what they ARE relative to). So the furthest down on the page I can get them is where bottom of the initial screen loads (and after that they stick there and don’t move with the scrolling).

If you know a way around this, let me know. My suggestion of a few extra divs within the #container would be a viable workaround, but if there’s a way to do it without that change, I want to know what it is (so I can use it!).

(It’s very possible that I just am overlooking something. Any suggestions from anybody?)

16
Grammar Wank says:
July 28, 02h

The Garden is fantastic, a real eye opener for people who think that using CSS imposes a boring sameness. However, I do have one little grammatical weed to point out. The first sentence is either in the past tense, which seems a bit odd, or you have mispelled “lie”. In other words, the sentence should be:

“Littering a dark and dreary road lie the past relics of browser–specific tags, incompatible DOMs, and broken CSS support.”

See this page for an explanation of “lay” versus “lie”.

Dave S. says:
July 28, 03h

Jai — maybe it’s your floats. If large parts of your design are floated, it’s possible the extra divs are starting from a different spot than the bottom of the document. Since position: relative; completely relies on where the element starts from, this is relevant.

Try this:
#extraDiv1 {
position: relative;
top: -20px;
left: 20px;
}

If it’s showing up anywhere but the bottom of the page (possibly overlapping elements on the bottom) then something’s wrong.

The first sentence is either in the past tense, which seems a bit odd, or you have mispelled “lie”.

Possible. I can’t remember what process made me pick “lay” over “lie”, but I seem to remember struggling with this one. Do others concur?

MikeyC says:
July 28, 04h

Dave wrote: “I’ll take a closer look at this when I have some time. It looks promising, but I’d a) have to throw IE6 into Quirks mode (which would involve heavy retro-fitting)”

Would it really? Wouldn’t it simply require adding an xml prolog to the beginning of the document (above the doctype) to throw IE 6 into quirks mode while leaving Mozilla, Opera, Safari in standards mode…

” I’d have to write a special section on using it instead of the Tantek hack.”

Let’s not forget that we end up in the same place anyways: validation error. Using CSS 3 is not valid as its not a final recommendation yet. Even if it were: Using the vendor-specific -moz- won’t validate either. I think it just makes the situation worse quite frankly. As you stated before: as long as IE 5 must be supported there really is no “elegant” solution.

Dave S. says:
July 28, 04h

Would it really?

Yes it would. Notice how adding -border-box-sizing forces Mozilla into using IE5’s broken box model, rather than vice-versa. Consider the Tantek hacks at work in the Garden, and that the designs take for granted the proper W3C box model. If we go and swap box models on them, they will break.

Let’s not forget that we end up in the same place anyways: validation error.

This is the more relevant of the points; I haven’t tried out the technique in any capacity yet, so I was taking Brownstone’s word for it that it doesn’t get flagged as an error. I wasn’t even aware box-sizing was a CSS-3 property, actually; -moz-box-sizing obviously isn’t.

The goal: a validating box model hack that allows me to use media=”screen” without having to add a secondary style sheet specifically for the hacks. Will this do it? I don’t know. I’ll investigate when I have time.

MikeyC says:
July 28, 04h

Dave wrote: “Consider the Tantek hacks at work in the Garden”

Yes, I didn’t account for current submissions…my oversight… otherwise i think its sound:


IE 5 in quirks mode using IE box model;
IE 6 in quirks mode due to XML prolog, therefore using IE box model;
Mozilla in Standards mode using the CSS-property & vendor-specific -moz- gives you the IE box model;
Opera in standards mode using the CSS-property gives you the IE box model (Opera in quirks mode would give you the IE box model too, btw)


You could serve up a legacy page for existing submissions and a new page for anything from here on out…just a suggestion… ;)

July 28, 05h

As you stated before: as long as IE 5 must be supported there really is no “elegant” solution.

But there are easier ways to overcome IE5’s limitation. Tantek’s hack, while ingenious, adds an awful lot of confusing guff to a CSS file. Which brings me to…

If we go and swap box models on them, they will break.

But you wouldn’t have to sit down and think out new values, because they already exist as part of the hack — those “broken” box-model values are already in place. You just have to remove the W3C box-model values and the voice- hack specifics and you’re home free. But then, I would say that, since I’m not the one who has to do it. ;o)

I wasn’t even aware box-sizing was a CSS-3 property, actually; -moz-box-sizing obviously isn’t.

Only Opera supports box-sizing as far as I know, and yes; the -moz equivalent is proprietary to Mozilla of course. Even so, the validator didn’t even raise an eyebrow when I tested it.

MikeyC says:
July 28, 05h

“You just have to remove the W3C box-model values and the voice- hack specifics and you’re home free.”

Personally, I don’t like the idea that authors would be restricted from using the correct box model for the sake of IE 5. I think if you travel down that road it has the potential to severely undermine the Garden’s credibility.

July 28, 05h

They do not have to be restricted; you can leave all the current styles as-is, and just draw attention to the above solution for those who would create a Garden design in the future. All Mr. Shea would need to do is add the XML prolog to the top of the HTML file, and Tantek/Non-Tantek hacked style-sheets could live happily on the same server.

Where designers would be restricted is if the box-sizing hack were added in-line to the HTML file, before the @import statement to load the chosen style.

July 28, 05h

Addendum to the above post — Bugger; does the Tantek hack work in IE6? If not, then I guess the XML prolog thing wouldn’t work. I didn’t think of that before I posted.

MikeyC says:
July 28, 05h

Mr. Brownstone: “They do not have to be restricted; you can leave all the current styles as-is, and just draw attention to the above solution for those who would create a Garden design in the future.”

But if you add the XML prolog it throws IE into quirks mode and because it lacks the same parsing bug as IE 5 the voice family hack has no effect. Therefore existing submissions that use the W3C box model would break .

MikeyC says:
July 28, 05h

“Bugger; does the Tantek hack work in IE6?”

hehe…i guess i was writing my submission while u were writing your appendum…see my previous post where it appears I am stating the obvious.

Jai says:
July 28, 06h

Hey Dave, would it break anybody’s existing CSS submissions if you threw in a few extra blank divs within the #container div? I just think that could be helpful for people who want to position things on the bottom of the page (like bottom corners).

If it would break current designs, forget I said anything :)

Dave S. says:
July 28, 08h

Jai — the blank DIVs are already at the bottom of the page; I don’t think another set within a specific DIV will help very much. And if I do that, I should put them in the header as well, so it’s balanced, right? ;)

The 6 extra DIVs are for hacks, basically — creative use of CSS should mean they’re not needed, and most designs don’t use them, but they’re around just in case. I’ve made use of them on occasion, so they are definitely valuable; just against the spirit of what CSS should do.

Dave S. says:
July 28, 08h

Also, Finnish and Japanese translations are now up.

July 28, 08h

I would like to suggest an alternative for Tantek’s IE hack, which I use myself and does not seem to be caught by the validator. (Even though most of my personal CSS files are riddled with other kinds of errors, this doesn’t seem to be one of them ;-):html * {
box-sizing: border-box;
-moz-box-sizing: border-box;
}All this does is force Mozilla, Opera, – and any other CSS3 savvy browser that understands box-sizing – to work with the IE-based box-model rather than the W3C default. Since IE’s model makes much more sense to most people, it’s quite a convenient hack. You need only specify one value for width, height, and so on, and these values in turn are easier to figure out.

The inspiration for this hack came from Peter-Paul Koch’s box-model tweaking and * selector pages. Indeed, it is simply a rip-off of both to get the result I wanted.

I hope a viable solution can come of it.

Jai says:
July 28, 10h

I hear what you are saying, Dave, but hear me out a moment on the extra divs.

The Garden page is kinda like this:

-Body
-container
-intro
-supplemetal text
-end container
-extra divs
-end Body

I understand eth value of having the extra divs under everything- so they can be absolutely positioned from the top:0 and left:0, but on designs that scroll down (which is most of them), nothing can be attached to the bottom (unless there is a property I am unaware of- I know Mozilla can relatively position divs with a “bottom:” command, but IE seems to ignore that). If there was one or 2 extra divs in the #container, that would allow relative div alignment to the bottom of that container.

I agree, in the “Real world” of designing, extra divs just don’t make sense,- but for the purposes of a very customizable CSS demonstration, I think that they do make sense.

Of course, it’s your garden :) Plant whatever tomatoes you want! I’m just suggesting that cherry tomatoes would grow nicely in it ;)

Dave S. says:
July 28, 11h

I hope a viable solution can come of it.

I’ll take a closer look at this when I have some time. It looks promising, but I’d a) have to throw IE6 into Quirks mode (which would involve heavy retro-fitting) and b) I’d have to write a special section on using it instead of the Tantek hack. It will most likely be too much trouble, but you never know.

Jai — think about it a bit more; those DIVs are already at the bottom of the document. Using relative, not absolute positioning, or even just using them in place without modifying the positioning, you should be able to accomplish whatever you need to down there. They’re outside of #container, granted, but that shouldn’t be much of a problem with some creative CSS.

July 29, 04h

I use the following solution, it’s spawn off from Tantek’s hack:

div#name{
width:400px;
padding:10px;
}
body > div#name{
width:380px;
}

And off course you need to put IE6 into quircks mode, but that isn’t a big deal.

MikeyC says:
July 29, 05h

More of the same:
Vermin in the Garden

I’ve basically just reiterated my personal stance on dealing with the problem.

Tom says:
July 29, 08h

No updates for 3 days makes baby jesus cry.

MikeyC says:
July 29, 10h

Dave wrote: “The goal: a validating box model hack that allows me to use media=”screen”…”

Just brainstorming here and haven’t really twisted my brain all the way through the scenerio:

Wouldn’t specifying media types of screen & aural be a possible solution?
eg: <style type=”text/css” media=”screen,aural”>

I have no clue about any actual implementations out there, but in theory, a “screen reader” should ignore the stylesheet altogether considering that a “screen reader” is not the equivalent of a “browser that understands aural style sheets”. TV devices, handhelds, etc should in theory also ignore the stylesheet as its marked specifically for either screen or aural capable devices.

If this is so, then surely its a better bet than specifying a media type of “all” (which “screen readers” do pick up).

The hack should validate and the ‘voice family’ is essentially meaningless as used in the hack so it shouldn’t cause an aural browser too much difficulty.

Dave S. says:
July 29, 11h

Interesting thinking, but two flaws I can see off-hand (feel free to correct me if they don’t apply) — the biggest is that aural IS, in fact, intended for screen readers. The official word on the CSS2 spec is that aural is for speech synthesizers, which is more or less exactly what a screen reader is. JAWS audibly dictates the screen to you.

The second and more obscure is that your method might actually knock out IE6 as well. Seemingly, it doesn’t pick up multiple media types.

Roger says:
July 29, 12h

Dave, since your contact form is still broken, I’m using this to tell you that if you don’t have anyone working on a Swedish translation for the Zen Garden I’d be willing to help.

July 30, 02h

Does that also count for media=”” or only for @import, btw you should use media=”screen aural” without ‘,’.

MikeyC says:
July 30, 06h

Dave wrote: “the biggest is that aural IS, in fact, intended for screen readers. “

This could, indeed, be correct. I just happen to recall reading something to the contrary…but I might be confused ;)

As long as it doesn’t trip up IE 6 then its at the very least a better solution than media=”all” as small-screen devices and TV devices will ignore it.

41
XzertX says:
July 31, 06h

>Consider this a chance to voice your opinion about the way I’m running the >Garden.

I think you should add anchors to the css Zen Garden — Design List page to make it easier to link to the different sections. Individual submission anchors would be even cooler ;)


themes and look–alikesconceptualminimalall others

Dave S. says:
July 31, 07h

Good idea, now that the list is getting so huge. Thanks, I’ll try to do that soon!

August 01, 03h

I think it’s impossible to change now, but HTML is not an acronym….

Claire says:
August 04, 10h

Hiya all

I’ve noticed some designs in the garden have a “clipping” problem in NN7 when window is reduced in size. Mine did too that’s how I came across it. ;)

The problem is triggered by putting a width on the container div and then using margin: 0 auto;
e.g.

#container {
position:relative;
width:732px;
margin:0 auto;
text-align:left;
}

this can be corrected by also adding a min-width to the #container element or to the body element

just thought I’d share this as I found someone else speaking about it on their website and can’t remember who..sorry

Tantek says:
August 06, 06h

A couple of quick points:


1. The CSS Validator is buggy with respect to media specifc properties

> Property voice-family doesn’t exist for media screen : “"}"”

This is an error in the CSS validator itself and has been reported. The validator should report a warning, not an error.

http://lists.w3.org/Archives/Public/www-validator-css/2001Jul/0086.html http://lists.w3.org/Archives/Public/www-validator-css/2001Oct/0070.html

My advice: validate your style sheet as an media independent file, and then @import it within a media dependent element as necessary.


2. box-sizing

>I wasn’t even aware box-sizing was a CSS-3 property, actually;

http://www.w3.org/TR/css3-ui/#box-sizing

which is expected to finally go to CR in a month or so which will make it officially ok to implement/use box-sizing.

>Only Opera supports box-sizing as far as I know

IE5/Mac has supported box-sizing since March 2000.

Slime says:
August 07, 11h

While it wouldn’t fix the Zen Garden issue of dealing with already-made designs, couldn’t the Tantek hack be implimented with a property other than voice-family? As long as the property can be assigned a string, and is allowed in screen-media style sheets, it would work without causing validation issues.

How about the ‘text-align’ property, which is allowed to take a string ( http://www.w3.org/TR/CSS2/text.html#propdef-text-align ); or the ‘quotes’ property? Something like this:

width:380px;
text-align:”"}"”;
text-align:inherit;
width:400px;

Is there anything wrong with this idea? I haven’t actually tried it out…

MikeyC says:
October 06, 04h

This is quite possibly old news by now considering it hit the web yesterday ;)

http://tantek.com/CSS/Examples/midpass.html

Tantek’s “Mid Pass Filter” could be a possible solution to the problem touched upon in this thread. Unfortunately, it would require reworking existing Garden Designs in order to validate, but it would allow CSS Zen Garden to use the proper media type: “screen” and at the same time allow authors to feed IE5/5.5Win unique style rules to deal with its incorrect box model.

Here’s an example that validates:
http://www.zeit.ca/external/midpassfilter/

Note: There are no actual IE5/5.5Win style rules in the example. It’s just to show that validation is possible.