CSS Browser Compatibility issues

Question

I recently designed a web application for a client. I used CSS for a layout of the application. I tested the layout on IE7, Mozilla 3.0.1, Google Chrome 2.0.xxx, Safari 3.1 and Opera 9.51.

They all displayed correctly without problems. After the delivery of the application my client noticed it had compatibility issues with IE6. The site was not displayed correctly.

How do i get to fix this problem? I don't have IE6 on my system to even try and fix it. Each time i try to downgrade my browser to IE6,IE will stop working. Is there a way i can get an environment that can simulate IE6 online.

Secondly, is making use of css frameworks going to solve the compatibility problem and even if i want to use a css framework, which one is better apart from blueprint css.

Thanks for your time.

Answer 1

I guess, Under the W3C box model, a box having a width of 100px, with 2px padding on each side, a 3px border, and 7px margin on each side, will have a visible width of 114px. not 124 as W3C excludes the padding and border from the width/height of an element.

Answer 2

IE 6 has a number of bugs in its CSS box model, causing sites that are correctly coded to break under that browser. It is possible using the box model hack and other workarounds to resolve these issues, so its a matter of getting IE 6. Here is a list of common fixes for IE 6 box model problems

1. To Solve the IE 6 Problem - my favorite option is to install an IE emulator that lets you run multiple versions of internet explorere. This one is pretty good, although there are others. Another common way is to create a virtual machine running IE 6 or dual booting (both can be time consuming and a pain, but vertainly doable). I prefer to use an emulator when I can.