Internet Explorer is the most difficult to test. Windows typically only allows one version of IE to be installed and no two versions will render a page the same. Add to this the frustration that a huge percentage of users still use Internet Explorer version 6 (Come on people, IE6 will be 8 years old this August!) and you’ve got a real problem on your hands.

Until now….

I stumbled across IETester and I must say, it’s very good.

Here’s a screengrab straight from their website:

You can easily test a website using IE 5.5, 6, 7 and 8 (beta 2) to sort out all those alignment and rendering issues.

Still, users of anything prior to IE 7 could just do the developers a favour and simply upgrade.
Firefox Safari Opera Internet Explorer 7 Internet Explorer 8

I was having problems with the following code (inline styles used for simplicity):

<div style="height: 1px; background-color: #000000;"></div>

In most of the “real” browsers (Opera, Safari, Camino, Firefox and even IE7) this showed up perfectly as a one pixel high black line. In IE6, it comes up as a line around 16 pixels high.

To make it render correctly in IE6 (And still work in the “real” browsers) you need to add a non breaking space inside the DIV and supply the line-height style.
Here is the fix:

<div style="height: 1px; line-height: 1px;
background-color: #000000;">&nbsp;</div>