Self Clearing Floats in CSS

Jim Neath — Sat, 15 Nov 2008 11:02:17 +0000

This is a quickie mainly to remind myself. My friend and fellow Fudge developer, Mike “1312” Byrne showed me a CSS trick to have divs clear themselves.

div#container
{
  height: 1%;
}

div#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Brilliant. This works in Safari, Firefox and IE6+ as far as I know.

More Usable Forms

Jim Neath — Mon, 12 May 2008 15:50:36 +0000

I just thought I’d post about a few things that you should be doing with your forms and also a few things I just like to do.

Use Labels

I still don’t understand why there are a load of people who don’t use labels within their forms. They’re more semantic that using strong tags like alot of people seem to do. They’re also more user friendly. Also they’re useful for styling your forms.

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.

And here’s how you’d use it in your code:

Username

Which gives you:

Now, when a user clicks on the label it will focus on the form item specified by the for attribute. Hooray.

User the Pointer Cursor

Here’s the CSS:

label, button, input.button
{
    cursor: pointer;
}

Easy. It does require you to add a class to submit and reset buttons, but hey it’s a small sacrifice.

Focus on the First Field

Having to click on the first form field I want to fill in is a pain in the ass. Don’t make me do it. Here’s a quick jQuery function to do it for you:

$(document).ready(function() {
    $('input[type=text]:first').focus();
});

No Confusing Buttons

If you have a submit button and a reset button, or anything similiar, make sure people can tell the difference. I don’t want to fill in your huge form and then find I’ve accidentally clicked the reset button instead of the submit button.

An example is shown below:

Submit buttons on the left and sub actions on the right, see:

Always put the Submit Form button on the left and on the Clear Form button on the right. Never, ever put the Submit Form button on the right and the Clear form button on the left.

See?

I’ll post more when as they come to me, in my bizarre usability dreams. Feel free to post your own tips. Or to tell me that I know nothing at all about anything.