I have always been slightly wary of CSS frameworks, put off by non-semantic class names, and a nagging feeling that CSS simply isn’t complex enough to require the hand-holding a framework offers.

But today I came across Scaffold, a CSS framework that made me rethink my position.

Here is a little CSS trick that allows you to align content to the bottom of its container, in a similar fashion to how vertical-align="bottom" works in table-based layouts.

Let’s say we want to display an image with a title aligned to its top right corner, and a caption aligned to its bottom right corner:

Perhaps it is common knowledge, but until today I was unaware that the CSS first-child pseudo-class fails in IE7 when the child element is immediately preceeded by an HTML comment.

I spent an hour yesterday sprucing up the ‘file download’ icon I use on one of my websites, and I’m putting my Photoshop file up here for you to use if you like. I’ve made it very easy to change the color scheme of the icon, or to modify the graphic on its label, so you’ll have no trouble adjusting it to suit your own needs.

CSS Advisor is a newish community website from Adobe. On CSS Advisor users can post their own CSS tips, or pose questions which other community members can attempt to answer. This question/solution format promises that CSS Advisor will remain more focused than the average forum, and provide a practical resource to call upon when faced with a sticky CSS issue. Within a few minutes on the site I discovered a potential solution to a long time CSS bugbear of mine – Safari’s ‘Wmode flicker’ when DHTML dropdown menus are displayed over a Flash movie.

Well it looks as if Microsoft has screwed up royally with Outlook 2007, at least insofar as the way HTML emails are rendered. Instead of using the not-too-shabby Internet Explorer 7 rendering engine to display HTML emails, Microsoft opted to use a customized version of the Word 2007 rendering engine. That’s right, from now on your beautifully constructed HTML newsletters are going to be rendered by the crime against layout known as Microsoft Word. That fact alone was enough to send shivers down my spine, but when I dug a little deeper I discovered just how dire the situation really is.

For a long time I was wary of designing email newsletters. I had read how difficult it was to construct an HTML newsletter that displayed as intended in all the popular email clients. I had heard about the horrors of creating layouts using tables. I had been warned about the perils of using CSS. But this year I have had several clients request that I design email newsletters for them, and had no choice but to school myself in the arcane art of HTML email design.

Last week I was putting the finishing touches on a small website I created for a friend. Specifically, I was jazzing up the image gallery with an ‘Image loading…’ animation, so that visitors knew to hang around while a new image loaded. In the process I made an interesting discovery about the way Safari (Safari 1.2 at any rate) handles javascript image source swapping.

If you’ve not already done so, it’s time to ditch pixels as a unit for sizing fonts. Sizing fonts for the web using ems and relative dimensions is easy and accurate. No really, it is.

Since adopting a standards based approach to web design, I have wasted numerous development hours struggling with inconsistencies in the way web browsers implement the CSS spec. Sure, you can use CSS hacks to serve different CSS rules to different browsers, based on their own quirky interpretation of CSS, but that is a dangerous path to tread.