Tag Archives: CSS

You are still using IE6?

I recently ran into the issue of having to find a machine that was still using Internet Explorer (IE) 6. Keep in mind that IE 8 is currently in beta. This problem arose after going through a remote troubleshooting session with a client for which I designed a Website. They were seeing errors in the site’s layout that I did not see. While I diligently tested the site in most of the major browsers (IE 7, Chrome, Firefox, Safari), I neglected to test it in IE 6 because I did not have it anywhere around. Plus it is old and I did not think it was still used. But much to my chagrin, there are some companies still using it.

The problem I had with IE 6 is that it does not render padding and margins very well.

So I had two choices; either tell the client to upgrade their browser to IE 7 or find a machine with IE 6. In this case telling the client to upgrade was inappropriate. Therefore, I had to find a way to install IE 6 on a PC that already had IE 7 installed. So I browsed the Web looking for some help when I came upon a rather datedMSDN blog that discussed my dilemma. It stated that virtualization via Microsoft’s Virtual PC 2004 was the best way to go.  Virtual PC lets you create separate virtual machines on your Windows desktop, each of which virtualizes the hardware of a complete physical computer. This would allow me to install Windows XP with IE 6 on an XP machine without having to uninstall IE 7.

So I installed Virtual PC 2004 with IE 6 and was finally able to see what the customer was seeing.  Next I had to fix the layout issues. I needed to create two different styles (one for IE 6 and one for all other browsers) for the same element. To accomplish this I had to hack the CSS. I created one set of styles using an underscore to start the padding and margin style names. These coexisted with the standard styles because while IE 6 does not ignore the underscore, all other standard compliant browser do. This worked and now the layout is cross browser consistent, but hopefully the customer will upgrade soon.

Before:


 .test {
 padding: 60px 0px;
 margin: 20px 0px;
 }

After:


.test {
padding:60px 0px;
_padding:40px 0px; /*IE 6 hack */
margin:20px 0px;
_margin:10px 0px; /*IE 6 hack */
}