By a roundabout route I happened on a post describing an Internet Explorer 6 bug (of course) in applying the :first-letter pseudo-element in CSS.

In IE6 there must be a blank between the selector and the declaration block.

/* does not work */
p:first-letter{property: value}

/* works */
p:first-letter {property: value}

Additionally, there appears to be a problem with IE6 (and IE7?) when separating selectors with a comma—include a space before the comma:

/* does not work */
p:first-letter, .extraneous {property: value}

/* works */
p:first-letter , .extraneous {property: value}

That explains a lot as I remove a lot of whitespace in my CSS files (and so may any compression tools) and unwittingly invoke the bug. 9am and I’ve already learned something new

In November 2006 I published details on my CSS framework and even talked about it at Refresh Cambridge. To recap, it was the solution to the problem for only being able to reference one style sheet in an old Content Management System (CMS) in use at work. I added YUI grids to the mix for rapid prototyping and hence I called it a framework. Thinking nothing of it, I called it My CSS Framework. You probably have one too if you find yourself reusing old HTML / CSS snippets. You might have thought nothing of it too and just didn’t blog about it.

Since then, CSS frameworks have been in the news a lot. Just last week another was made available in the shape of 960. Since then, my framework has evolved to fit my changing needs. I’m unsure whether there’s anything new to publish though. I use Eric Meyer’s new reset CSS, my standard typography CSS and then, mindful of grid design principles, create a layout with as little code bloat as possible. I think demonstrating my own solutions to common interface components might be better instead.

A year and a bit on and My CSS Framework is now listed on Wikipedia. Wow. Funnily enough (and the inspiration behind this post) is that it’s been picked up in the blogosphere (in several languages) and mutated in name to “My (not really mine) CSS Framework” in an attempt to make clear the framework was not created by the reporting author. I wish I’d called it TSG CSS Framework now

Good form UI is a real challenge for designers. Form elements need to be large enough that users can view and edit data, but fit within an otherwise great design. Over at CSS Zone, Joe Lippeatt provides a form element layout technique using CSS and Javascript that will shrink and grow with the available space. Although it isn’t complete, Joe provides a few code snippets from the CSS and HTML that may be useful to other developers.