Please Review my CSS ZenGarden Entry

sorry about the triple post

Can a MOD please delete the other 2 threads - either my connection was lagging or something went buggy and my message was unintentionally posted three times.

The other two duplicates have been removed.

Well if you want me to view your Zengarden code you'll have to get them to put it up at the Zen Garden, which I only check rarely it is true, but do occasionally just for fun.

The entry I have submitted can be viewed at http://www.nrindian.info

Since it's CSS you can easily view the source from your browser. Hopefully the entry will be selected, but seeing as their standard is quite high (and this is my first attempt) i wouldn't be surprised if the site didn't make the cut.

Very gorgeous design. My husband said Wow too when it first loaded.

Code-wise, it could be slimmed down, but that's just a personal thing. For instance

position:inherit;
margin:inherit;
padding:inherit;
text-align:inherit;

I'm not even sure what that's supposed to do... if text-align was already Left, you've wasted a line of code saying Inherit. If you did need to say text-align: left, then it's the same amount of code, so why not make it more obvious when you're looking at it 3 years from now? Same goes for all the others, you're not saving a line of code so you might as well say the properties you want out loud.

I'm also not a fan of using relative positioning to move stuff around a page. Depending on what needs to go where, it either gets set from the document flow (margins and padding), or gets absolutely positioned.

font-size:9px;

h1, h2, #explanation h3 span, #participation h3 span, #benefits h3 span, #requirements h3 span, #preamble h3 span {
display:none;
}

Personally I prefer image replacement... since that can't happen here, because you can't change the HTML, my second choice would be moving the text a bazillion px offscreen instead of display: none. This is due to (what I think is) a bug in some screen readers, who strangely honour display: none and won't even read the text out. Moving the text off-screen, though, doesn't seem to hide any words from them.

margin-left:auto; margin-right:auto;

There's nothing wrong with that, but it's a good idea to pick a style and stick to it. You've also done margin: 0px auto 0px auto; and margin: 0 auto. Pick one and stick with it-- helps you read better a few months or years later, and makes code look... neater, I think. Same goes for stuff like padding: you've grouped your margins together; you should do so with your padding too:

	padding-top: 15px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 5px;

p {
	font-family:Georgia, Palatino, Times, Times New Roman, serif;
	font-size:0.7em;
	margin:0px 185px 0px 185px;
	color:#999999;
	font-weight: bold;
	line-height: 1.6em;
	text-align: justify;
	padding-bottom:0.8em;
}

After writing code, try to see what you can remove. There's stuff you just don't need:

#linkList {
...etc...
	visibility:visible; <--this is a default, why mention it?
	display:block; <-- divs are already display block, and even if they weren't, absolute positioning makes them so automatically
...etc...
}

I don't know what Zen Garden people look for in code-- certainly the design, and does it work cross-browser. Your design is, again, gorgeous. Your code is not atrocious, but it's not Zen (simple) either. I dunno if they even do more than glance at it, unless you're doing a neat trick (like in The Zen Of CSS Design by Dave Shea and Molly Holzschlag). There's nothing wrong with your code, as it renders fine. But if you wanted someone to be nitpicky, here I am : )

Not that the HTML is all that nice, since it's old code and they were trying to make it as flexible for designers as possible (can't have both beatiful code AND template-stlye flexibility I don't think).

The design is solid and looks the same in Konqueror, FF1.5, FF2, FF3, Opera 9.27, Opera 9.5, IE7, IE6, and Safari-for-Windows. I think they'll take it. And if you haven't been selling web design services, do so!

Stomme poes : Thank you very much for that excellent critique and also the kind words regarding the design. It's immensely appreciated! I agree with you on almost all points regarding slimming down the CSS. I was just in such a rush to submit the design (I had a few days between other more tedious programming assignments) that I didn't go back and refine the code. Now that you've pointed out some of the more glaring errors I'm going to take a few hours and iron out all the kinks.

The HTML as you correctly judged is standard and is inflated to allow maximum flexability for the designer, but beautiful CSS is upto the designer and although my prime concern was making it 'work' for all browsers now I'm going to focus on trimming all the unnecessary fluff.

Regarding the image replacement for the 9px font. I did at one point want to go that route, but then i faced the problem of how to include the links. Some designs on Zengarden have used the -1000em text indent hack (if you can call it that) and opted for a full-on image replacement. I didn't because I feel links should be honored above images when it comes to html. Still, I appreciate the problem a 9px font causes when you're viewing the site on a 21+ inch monitor. I will play around with an image replacement and see how it looks (and more importantly how it feels

Once again, thank you for taking the time and effort to help me out. It's a great confidence boost to read that your work is appreciated from someone who knows a great deal about what they're talking about.

Sid

Ah, about image replacement-- if the links aren't

and as far as I can see they aren't, so the left -bazillion px might be the best way to do it. If the spans didn't have the text inside them, they could hold an image right over the link. But, they can't-- I only wanted to say that left -bazillionpx would be better than display: none simply for screen readers (who don't go to CSS Zen Garden anyway, at least not to look at the designs : ) So, more of a habit of writing as accessibly as possible, not meaning it matters too much on a visual-design site.

The 9px thing is a separate complaint. We all see designs, design submissions, and whatnot in very tiny fonts. I guess it just looks more professional or something. The problem is, it's damn tiny, even on a low-rez monitor. Most Zen Garden submissions don't do well on text-enlarge, due to the use of images (set sizes) and absolute positioning. So, one tries to usually start with a font that's not too small. Again, though, this being a design submission, don't change it-- but never ever use it on a web page that you want the general public to actually read. In fact, px sized text itself is not something I'd recommend, except when the text must fit within the area of a background image (and even then...). IE doesn't let users enlarge px text (probably a correct thing to do, as px means px, and is a set size).

Remember whenever you read anything written by me, a lot of it just air from my butt. They are mostly just opinions : ) Still, good luck with your submission.

Yeah sort of :?

The design is very nice, I must state that and the fact that my following dislike of zengarden is no reflection on your efforts and I hope it goes rewarded with acceptance.

I really wish that zengarden would quietly fade way to be frank it's had it's day, I have long long ago lost my love for it and it's stated purpose to draw graphic designers into css development, It has little place in the scheme of things from a coding point of view, static markup, example CSS are all drawbacks and do not present markup and css as I would like it represented. the whole zengarden concept is not aimed at coders but at graphic artists and this doesn't really sit well on this type of forum.