Testing websites with multiple versions of IE

One of the most annoying tasks I have to do when I’m developing a website is to test it in the many different browsers and in some cases, multiple versions of each.

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….

Written by John in: CSS tips,PC Tips |

Getting a 1 Pixel high DIV in IE6

For a web designer, IE6 is a real prick of a browser. You are constantly having to use hacks on CSS to make it work for just one browser, which is now over seven years old.

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>
Written by John in: CSS tips |