position: absolute - Design resources and inspiration.

It seems like problems concerning the W3C are arising, new standards are going nowhere and our great fathers of the W3C are sleeping. At least, this is the impression Björn Höhrmann gives us in his public statement concerning his departure from the W3C. Well-known and respected standards evangelist Jeffrey Zeldman seems to agree and adds his comments:

Beholden to its corporate paymasters who alone can afford membership, the W3C seems increasingly detached from ordinary designers and developers.

To those of us who are concerned about standards to help guide the web in everyone’s best interest, I consider this is a worrying issue. I’m waiting to see how and if the W3C responds to these allegations.

Update: it appears there is a response on the W3C’s QA Weblog.

(via)

The best web developer tool ever just got better! Chris Pederick has released the first stable version of his infamous Web Developer extension for Firefox. Version 1.0 boasts many new improvements, among others:

• Live HTML-Editting
• Display rulers and photoshop-esque guidelines
• More consistent and clearer menus
• Display hidden elements (this was my feature wish :) )
• New outlining features
• A comprehensive “Display Element Information” tool
• Small Screen Rendering
• Many more features that could fill up another page.

If you develop websites and you haven’t tried out Web Developer yet, I suggest you drop everything else right now and give it a spin!

Apples To Oranges presents some nice CSS-driven bar graphs that can be generated dynamically on a server-side basis. They could also be animated very easily via JS-libraries such as script.aculo.us. Fairly simple but it does a good job.

Alex Giron and R. Marie Cox have come up with a new dynamic image replacement technique: PHP + CSS Dynamic Text Replacement. What separates this one technique from the rest of the crop is the fact that you can style your headers with regular stylesheets and the PHP script will interpret and render them accordingly. Being able to use any font in a stylesheet regardless of web safe issues sounds like fun! No JavaScript or Flash involved, either. It has a few limitations at the moment, but maybe someone among my readers can help improve the technique.

Jon Meyer proposes a new feature for CSS: based-on, a method to significantly shorten your CSS files by using constants instead of repeating similar declarations over and over again. Basically you can add the “based-on” property to a rule, referencing a previous declaration, and thus inherit the formatting from the linked declaration.

In less technical terms, this means you can define a style that a lot of elements will have in common (such as a 1px border) in ONE rule, and just link to that rule from the other rules. As he mentions himself, this is very similar to Shaun Inman’s Server Side Constants.

I achieve the effect by assigning several classes to an element: one base class such as “messagebox” and then a specific class additionally, such as “success” or “error”. Jon’s method, however, seems more sensible, since it removes the need of adding more than one class to an element. I’d love to see this in CSS3. If this all sounds too confusing and technical, do go read the article, Jon explains it in a more comprehensible way with good examples. Definately worth a read!

I don’t care much for advent calendars myself, but this is one I think I’ll enjoy: 24 Ways to Impress Your Friends. Every day, they’re offering one new tutorial on standards based web ownage, starting with 1337 Ajax sk1llz and typographical finesse.

Yeah, you read right, it’s the CMS Zen Garden: CSS Toolshed. Similar to the famous CSS Zen Garden and the recent CSS Table Gallery, Toolshed promises to show how well CSS is suited for complete CMS-driven websites by means of user-submitted stylesheets.

This will show enterprise level CMS vendors that CSS can be used on a professional level (not only for smaller sites and blogs) and it gives CSS designers the chance to show that their skills go beyond designing an HTML document that was especially marked up to be style-able.

You’d think it’s a given nowadays, but even modern open source CMS’ such as Mambo/Joomla still rely on tables for layout.

CSS Toolshed until now only has one design according to creator Chris Heilman. This is where you come in. Start submitting your designs!

SiteVista, an alternative service to BrowserCam, has just released CSSVista. CSSVista enables you to edit and test your CSS simultaneously in Firefox and Internet Explorer via a split-screen layout. It’s free… unfortunately it’s only available for WinXP. With FF and IE, SiteVista covers a large majority of the browsers relevant for testing. Still, I find it’s best to cover a few more browsers. I test in the following browsers, though I don’t give too much attention to those that are redundant or outdated in the meantime. I’ve bolded the ones I try to get pixel perfect results in (except for Lynx, of course, which I use to test how the site works semantically).

• IE 4.01, 5.01, 5.5, 6.0
• Lynx
• Mozilla Firefox 1.0.7
• Mozilla Suite 1.3, 1.5, 1.6
• Netscape 4.74, 6.2, 7.2, 8.0
• Opera 7.11, 7.54, 8.0, 8.5
• SeaMonkey 1.0α
• WebTV Viewer

Just wish I had a Mac to test in IE5.2, Safari and Omniweb!

You can find a very comprehensive archive of older browsers for your downloading and testing pleasure at browsers.evolt.org.

As I am too lazy to come up with my own introduction right now, I’m just going to quote the source. I hope you don’t mind.

Pure CSS-based layouts have come a long way but they still have shortcomings that fail to address certain design goals without compromising the true separation of content and presentation.

In short, the problematic design goals are these:

Total Layout Flexibility
That is, the ability to order columns logically in the source while displaying them in any order desired. For any number of columns.

Equal Height Columns
Or more accurately, equal height columns without having to rely on faux columns.

Vertical placement of elements across grids/columns
Designers face the choice of relying on elements being a particular height, resorting to tables or simply not bothering.

Towards a solution
This article shows how to achieve each of these goals, and then how to combine them, creating what could be called the One True Layout™.

Read all about it at position is everything.

You may have already heard that a few of the most important CSS hacks are going to break in IE7. This is, in fact, a Good Thing™. What it basically means is that the IE team is getting its act together and trying to add as much standards compliance to IE7 as they can. All those child selector hacks we used to provide styles for non-IE browsers? Busted, since IE7 understands the child selector. On the good side, the browser finally does what it’s supposed to. And that’s what we wanted, right?

What it doesn’t mean, however, is that IE renders everything the way it should. We don’t know what will happen with those hacks. Will IE read them like Firefox, and then render them the same way? Doubtfully. If it did, the IE blog wouldn’t be sending out that call to action. In other words, we need to come up with alternatives to the current hacks. This could also mean going back to all those CSS websites we’ve done a while ago and replacing the hacks to ensure those sites work in IE7. Luckily, we’re all in the same boat, and to give us all a hand, position is everything has compiled a guide on how to work around those problems. Read it, you’re going to need it. With a browser of such major market share, there’s no way around it.