Cross browser equal height that works

Note: This article was first posted to the Lemon Digital Blog. Since its dawn, CSS has been plagued with the lack of a bullet proof technic to produce equal height columns, boxes and grids. The fortunate few have been able to avoid this problem by “designing for the Web” — no crazy fonts; no equal [...]

Targeting Safari 3

Found this CSS hack for Safari 3 today which can be handy from time to time: @media screen and (-webkit-min-device-pixel-ratio:0){ /* Safari 3 specific styles go here */ } Most of the time if something looks good in Firefox 2 there’s a 99% chance it will in Safari 3 too. So use this hack sparingly [...]

Oops, stripped too early!

I’m sure no one noticed but Yelotofu got naked for about 1 hour today because the CSS Naked Day plugin I had installed last year thought today was the day to strip off! Well, this years’ CSS Naked Day will be held on the 9th of April. This time Yelotofu will be getting butt naked [...]

CSS Diagnostics

What is CSS diagnostics? It’s a method of applying styles to elements in your markup to catch standards compliance issues. A way of ensuring you don’t leave any serious accessibility holes and a visual deterrent for web authors editing pages with diagnostics switched on. Here are some resources I found useful in understanding the practicality [...]

7 Ways To Write “Better” HTML

BarCamp came and went, I’m still experiencing the aftermath; making new connections on Facebook daily and checking the BarCamp Hong Kong 2007 Flickr Group constantly for new photos! Anyway, It’s about time I catalogued my talk before it’s too late! The original presentation slide show was created with S5 (a standards compliant and accessible slide [...]

Form Layout using Definition Lists

As you may well know, using a definition list (DL) to layout forms with labels and fields side-by-side could be a bit flaky at times; forms don’t seem to scale nicely and numerous layout problems could occur with dynamic content. Typical pitfalls are situations where a label or field takes up two or more lines [...]

Building an Unobtrusive, Accessible and Standards Compliant Numeric Stepper

First off, if you’re looking for a quick solution feel free to skip directly to the download link at the end of this article. For those who are interested in the intricate details please read on… What is a Numeric Stepper? Well, the answer is simple. It’s a form control and looks like this… It [...]

Proof that IE6 is crap

I have more than often had to fire-up IE6 out from the “un-loved” software repository to get kicked right back in the face with weird CSS bugs. I believe those reading this must be aware of at least one CSS quirk in the IE6 browser. For example, the PNG Alpha Transparency bug, fixed by Microsoft’s [...]

CSS Drop Down Menus

Recently, I’ve been having fun creating pure* CSS drop down menus for Lemon, see: example 1, example 2 . These things really get the brain juices going. These menus are fully Accessible and supports IE6, IE7, Firefox, Flock, Opera, Netscape 8 and Safari. I’m going to keep at improving the code to make it re-usable, [...]