[html] archive category

960gs Grid Templates for Fireworks

When starting a new grid-based design I use Adobe Fireworks for the initial screens. Here are my starter files for the 960 grid system in 12-column, 16-column and 24-column formats. I actually have never used the 24-column one but I made it anyway. Right click these and save them to your local drive.

Vertical guides only

Vertical and horizontal guides

Licensed under MIT & GPL licenses (your choice)

Tags: , , ,


hasLayout falsehasLayout true

I was building a little demo tonight to show how to create a multiple document interface (MDI) using divs, some image files and the “script.aculo.us” JavaScript library. Of course, when I was just about finished, Internet Explorer 6 starts acting up.

Firing up the old IE Developer Toolbar I discovered that my lil’ol div didn’t “have layout“. This one property (unique to Internet Explorer) has given me more grief than all of WCAG, CSS, div-hell and XHTML combined – well, that’s pushing it – but, you get the idea. Okay, give the little guy layout (sets height to some value) and voila; it works. The MDI article will have to wait another day; I’m going to bed.

MeeboMaker: for valid XHTML Meebo Widgets

Valid HTML Meebo Widgets with MeeboMakerMeebo is a web-based instant messaging client that allows users to integrate their instant message clients into one easy-to-use web interface. Rather than chatting from the MSN, AIM or Yahoo desktop clients, Meebo allows you to chat from a lightweight Ajax interface. You can also generate Meebo widgets that allow IM interaction from web sites or blogs.

The problem is that the code generated by Meebo’s widget factory is non-valid XHTML. This can be a problem for people who build web sites that require valid HTML. The Meebo widget factory produces a Flash container based on the embed tag which is not part of the XHTML 1.0 Transitional specification. I was able to build a valid container based on the object tag which will pass automatic validation.

Rather than get into the messy details, I have created a simple application that extracts the important bits of information from the embed tag and builds a new object tag. It is still kind of temperamental, but it works well as long as you don’t try to feed it bad code. Give MeeboMaker a try and let me know what you think.

Labels with hover events

A form label with a hover styleI created a small example showing how to use the ‘label’ HTML tag to make it easier to click radio-buttons and check-boxes. People are used to being forced to click the little tiny boxes (with little margin for error) so they may not realize if a clever web designer has implemented labels for their form controls. By clicking the label, the focus shifts to the input element without forcing the user to demonstrate superior fine-motor control.

Note: The hover event does not work in IE6 or earlier without a JavaScript hack. **sigh**