IE6, CSS Debugging Issues

Since today was spent debugging a css issue in IE6 I would like to post some solutions and development tools that are useful for this sort of thing.

Firstly the main issue that I seems to have was that images inside a table cell left a white space gap of about 3 pixels between bottom of the image and the bottom of the table cell.

The problem was that the vertical-align of the image in IE6 was defaulting to baseline, which apparently means its aligned vertically to the baseline of the text, meaning 3 pixel gap is left to accomodate the trailing tails og letters such as lower case g and y.

To fix this you must vertical-align the image using vertical-align: bottom;

While trying to debug this issue I found two very useful tools. In Firefox you can download the addon, FireBug, that will let you debug a webpage. There are also tools identical to this for IE6 and IE7 which are more handy because in my experience its IE that has more trouble rendering a web page correctly.

IE Developer ToolBar

IE DebugBar