It's not the code which will give you validation trouble. It's the CSS that won't validate when you get into semi-transparency.
I like semi-transparency. I've been messing with it for a couple of years. Sometimes through the opacity filters in CSS (like here) and other times using graphic "screens" (like in the tables and sidebars here).
Until opacity filters are officially supported in the standards and those standards widely supported in the browsers that most people are actually using, no matter what method you choose, there will be compromises and weirdnesses.
For instance, in the opacity filter method, everything works fine (in current browser versions) but the issue is that when you make a div semi-transparent, everything you put into it becomes semi-transparent as well--the text, borders, images, everything. In the opacity example above, we decided just to go with it anyway, even though a semi-transparent picture of a person is a bit unsettling.
I may be misinterpreting the cascade, but I would expect that in a div with opacity of <100% that all elements included in that div would inherit that transparency, unless I turn it off (opacity = 100%) in a certain element. However, neither IE nor Gecko does this. Am I misinterpeting, or are they? Either way, it can be problem.
With the graphic screen method, that's not a problem, and the CSS validates. But no matter what your monitor resolution and dot pitch, pixels are pretty big and depending on the background colors and screen colors, it can really screw up text readability. In the example above, it works pretty well and only a critical professional eye can tell that the background screen is messing with the text, even at 9px. I've done others where the screening effect just jumps right out at you.
I like the transparency and encourage you to work with it. It's an effect that leaves a positive impression in the visitors' mind. You'll have to pick your poison with regard to which technique, but go with it.
Meanwhile, I'd love to hear of other methods of acheiving semi-transparency.
On other stuff, the color scheme is fine. The body text is a little hard for my 48-year-old eyes to read. For me, I'd suggest a san-serif or larger type size or both. I understand the argument that with smaller text you get more content "above the fold". And that's okay in a site where there isn't much content to be read.
The argument continues that "people don't like to scroll". This is where I disagree. In the bad old days before scroll-wheel mice, I'd swallow that argument. But these days, vertical scrolling is no biggie. I see ordinary, non-geek people scroll all the time. It's become a non-issue.
I don't know where you're going with the site, architecture-wise, but the one thing I see is a desire to push the envelope in one direction--semi-transparency. But it's remaining tied to 3-column convention. I'd encourage some envelope-pushing experimentation in that area as well. I've found 3-columns to be unnecessary in most sites. In many, even two columns are twice as many as are needed. Try something different here as well. You can always go back if need--rather than convention--demands it.
My two cents, for what they're worth.
(Edited by brucew on 01-28-2006 03:59)
posted 01-28-2006 02:41
