Something that really stops tableless layouts is the lack of ability to make two or three columns the same height. There are a lot of tricks but the solution I prefer is with Javascript.

Description of the solution: I used the mootools framework since it provides lots of useful predefined methods, selectors etc.

Usage: Just include the latest mootools js file (don’t need ajax, json, fx and other) and the following js. Than add the class defined in the function (class=”equals” in the example) to the columns you want to be in equal height.

function equalHeight(cl){
	var className = '.' + cl;
	var maxHeight = 0;
	$$(className).each(function(el) {
	if (el.offsetHeight & gt; maxHeight) {
		maxHeight = el.offsetHeight;
	}
	});
	
	if ($$('.dummyExtender') != '') {
	$$('.dummyExtender').each(function(el) {
		el.setStyle('height', maxHeight - el.getParent().offsetHeight + el.offsetHeight);
	});
	} else {
	$$(className).each(function(el) {
		var curExtender = new Element('div', {
		'class': 'dummyExtender'
		});
		curExtender.injectInside(el);
		curExtender.setStyle('height', maxHeight - el.offsetHeight);
	});
	}
}

window.addEvent('load',function() {
    equalHeight('equals');
});

Example: Equal Height DIV Columns

Update: Also since Internet Explorer 6 adds silly spacing in DIVs add the following lines to your css:

.dummyExtender{
font-size:0;
line-height:0;
padding:0;
margin:0;
}

Something that really gets me out of my skin is this silly bug. I often need some area with no padding, no margin or any other space bellow the image that is contained in it. Here is how it looks before and after applying the fix :

Fix description: Just add font-size:1px; in the definition of the area’s style

Preview of the bug and the fix

If you have seen some strangely cut off ‘W’ than you know what is all about.

Description of the bug: If you have some word ending with ‘w’, you are using Verdana font-family, font-size 10px, your words are in table and most of all you are using Internet Explorer with your Cleartype turned on – you get this:

ClearType bug – Proof of Concept

Have you ever wondered how people put text in their input fields and when you click on it, it disappears. This process is called input watermarking.

Bellow is the JavaScript I’m using on my sites. It is **XHTML** 1.0 transitional and **WCAG** priority 1,2 valid.

// Defining array that holds the IDs or Names of the inputs and the default text to display
// If you are using Names remeber that I am taking only the first one.
// The format is : 'ID1','VALUE1','ID2','VALUE2'....var inputs = new Array('firstname','firstvalue','secondid','secondvalue','thirdid','thirdvalue')
// Defining "indexOf" function for Internet Explorer
// It returns the index of the first occurance of an item in the array

if (!Array.indexOf) {
    Array.prototype.indexOf = function(obj, start) {
        for (var i = (start || 0); i < this.length; i++) {
            if (this[i] == obj) {
                return i;
            }
        }
    }
}

// Defining addEvent function since Internet Explorer does not support the official way of adding events

function addEvent(obj, type, fn) {
    if (obj.addEventListener)
    obj.addEventListener(type, fn, false);
    else if (obj.attachEvent)
    {
        obj["e" + type + fn] = fn;
        obj[type + fn] = function() {
            obj["e" + type + fn](window.event);
        }
        obj.attachEvent("on" + type, obj[type + fn]);
    }
}

function inputWatermark() {
    if (inputs.length < 2 || inputs.length % 2 != 0) {
        alert('Wrong usage - please read the source comments!');
    }
    for (i = 0; i < inputs.length; i++) {
        if (i % 2 == 0 && (document.getElementById(inputs[i]) || document.getElementsByName(inputs[i])[0])) {
            var cur = (document.getElementById(inputs[i])) ? (document.getElementById(inputs[i])) : (document.getElementsByName(inputs[i])[0]);
            cur.value = inputs[i + 1];
            addEvent(cur, "focus", onFocusHandler);
            addEvent(cur, "blur", onBlurHandler);
        }
    }
}

function onFocusHandler() {
    var inpname = this.id ? this.id: this.name;
    if (this.value == '' || this.value == inputs[inputs.indexOf(inpname) + 1]) {
        this.value = '';
    }
}

function onBlurHandler() {
    var inpname = this.id ? this.id: this.name;
    if (this.value == '') {
        this.value = inputs[inputs.indexOf(inpname) + 1];
    }
}

addEvent(window, "load", inputWatermark);

Usage: Just fill the array with the IDs and the values. Instead of IDs you can use names

Input Watermark Example page

Kuangwei pointed out that the current servebeer links do not work. This is due to the reason that the servebeer server has stopped redirecting properly to sc18.info which is the temporary domain for Nvidia patched drivers for Linux kernels 2.6.21 and 2.6.20 with paravirtualization turned on.

Will try fixing it today – stay tuned

Thanks Kuangwei

update : fixed (10x Jul)