Testing a site in different browsers and on different operating systems is essential if you want to produce a professional looking site that can reach the widest possible audience.

Here are a couple of sites that can help.

browsers.evolt.org is an archive of old browser versions for windows, mac, linux and other operating systems. You can download virtually every browser that has ever existed and test your sites with them. Handily, the old versions of Internet Explorer can be installed as ’stand alone’ applications so they don’t interfere with your current IE version.

If you don’t have access to browsers on different operating systems, Browsershots.org is an excellent free service that generates screenshots of a webpage in different browsers on Linux, Windows and Mac. Of course, this only shows that a page is displaying correctly, it doesn’t show anything dynamic like hover effects etc, but it’s better than nothing.

Don’t you just hate those default form submit buttons? No hover effect, no match with your site design. Yuck.
This article at www.digital-web.com explains the solution - use the <button> tag and add a little javascript to cover Internet Explorer’s lack of support for the :hover pseudo class.

This virtual Christmas card demonstrates the power of this technique.

It should be easy to center a page horizontally in the browser window.

All you have to do is wrap your content in a div, give this div a width (say 760px so it fits nicely on a screen resolution of 800 x 600) and set the left and right margins to ‘auto’.

#centeringwrapper {
width: 760px;
margin: 0 auto;
}

This works in Firefox and other browsers which display CSS correctly, but of course with Internet Explorer nothing is that straight forward.

IE doesn’t interpret the automatic left and right margins. However we can use another incorrect CSS interpretation to achieve the desired effect in IE. If you apply a centering text alignment to the body tag, IE applies it to all divs within the body, thus centering them. However, this also centers all body text on the page so we need a further fix to reset the text to align to the left.

Finally, the body tag needs to have a minimum width equal to the width of the centering wrapper. This deals with an issue in older Mozilla browsers where reducing the size of the browser window results in half of your centered div hanging off the left of the page.

So the final CSS looks like this:

body {
text-align:center; /* IE centering fix */
min-width: 760px; /* Mozilla resizing fix*/
}
#centeringwrapper {
width: 760px;
text-align:left; /* Negates IE centering fix in other browers*/
margin: 0 auto; /* Ccentering in non-IE browers*/
}