THINK

Inline img tags by default is positioned such that it has an additional bottom spacing relative to its parent block element. If the parent block element e.g. div have zero padding and the img have zero margin, the img height will not equal to the div height as the additional spacing will push the parent border further downwards.

This is because the inline img tries to compensates for character decendants when positioned inline with adjacent text. charater decendants are the “tails” in “g”, “j”, “p”, “q” and “y” that extend downwards.

To remove the spacing, set the img vertical-align to bottom. In the absence of adjacent text, this would make img ignore the compensation, resulting in equal-height div and img.

The CSS :hover event is only supported for the anchor element <a> and hence to simulate the correct :hover behavior for other elements such as td:hover, we need a javascript hack.

The idea is to change the class of the hoverable element so that the CSS can be applied to the class i.e. td.hoverable.

To do this, we attach a function to the onmouseover and onmouseout events of the element to add an remove the class name respectively.

c FireFox will glady center the div with just

div {
 width: auto;
}

but IE7 will keep the div aligned at its default. Hence we need a little trick here to make it the way we want it. What we do is we create a div wrapper using another div, and have the css code like this

div.wrapper {
 text-align: center;
}
div.wrapper div {
 text-align: left;
 width: auto;
}

The text align left is optional and is used to explicitly redefine the text alignment for the inner div so that it is independant of the wrapper div’s text align attribute value.

Had been playing around with CSS a lot lately just to practice conforming to the WC3 best practices. Especially for the past few projects I have done, I try very much to use 100% CSS for layouts. And only define HTML tags in a top down fashion to markup the content. I think i’ve improved very much since the first time I’ve done this.

One of the things that frustrates me is that there are a lot of obscured CSS properties and strange behaviors in different browsers. One such element is the table. For all the times I used a table with CSS, a strange margin will always appear around the table even though margins and borders are set to 0px. Just keep in mind that tables have an extra border-collapse property and setting it to “collapse” will give you more intuitive results.