Css – Browser portability problems

cross-browsercss

I have a problem with my CSS on a website I'm working on.
For some reason the website's CSS works for FF 3 and IE 7 but of course MS complicates things as this doesn't work for IE 6.
The header looks squashed.
The trouble is that my client owns IE 6 and I was yelled at without knowing why.
My questions are:

  1. Where can I get a test suite for all browsers?
  2. How do I fix it? Can someone test it for me?

Here is the CSS for IE: 

/* CSS Document */

#presentation{
position: relative;
margin: 0 auto;
width: 689px;
height: 586px;
z-index: 0;
}

#pretext{
position: absolute;
padding: 20px;
}

#cleft{
width:97px;
height:665px;
position: relative;
float: left;
}

#cright{
width:97px;
height:665px;
position: relative;
float: right;
}

Here is the html:
EDIT SO messes up with html.
Here is pastebin

Best Solution

To solve your first problem: I'd recommend using a browser-specific style sheet.

Since you're using XHTML, you could use the following:

  <!--[if lte IE 6]><link href="lte-ie-6.css" rel="stylesheet" type="text/css"><![endif]-->

The CSS file lte-ie-6.css would then only be read by IE6. You can use it to easily override other CSS that causes visual mishaps in IE6.

There is software, such as MultipleIE, Internet Explorer Collection and IETester, that can emulate different versions of IE. However, this doesn't always give accurate results. Microsoft's official answer to your last question would be: install Virtual PC and run IE6 on it.

Lately, Microsoft has been working on SuperPreview, an official website preview utility that does the same, but with reliable results. Read about SuperPreview and/or download it.

Related Question