Archive for August, 2007

IE6 Image WhiteSpace Bug

Friday, August 31st, 2007

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 :

Internet Explorer Image WhiteSpace Bug

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

Preview of the bug and the fix

IE6 / IE7 Bug with ClearType Turned On

Wednesday, August 29th, 2007

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:
Internet Explorer Cleartype bug

ClearType bug – Proof of Concept

WAI / XHTML Valid Input Fields Watermark

Wednesday, August 29th, 2007

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
< script type = "text/javascript" > 
 
<!--
// This Javascript is written by Peter Velichkov (www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
// 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);
 
//-->
< /script>

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

Input Watermark Example page

Broken Links

Wednesday, August 29th, 2007

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)

The very first post !

Saturday, August 18th, 2007

Hi all, as this blog has just started its existence i will be pretty short.

The idea is to have my technical stuff written here, so it will be mostly about Web – AS3, Design, XHTML, CSS, JavaScript etc.

Hope you like it!