Browser portability problems

Question

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

Answer 1

I'm afraid there is no easy answer to this problem. My advise to you is this:

1. Code using the smallest set of techniques you need to do what you want.
2. Make your code standards compliant.
3. Do at least some testing in each browser (+version) you need to support.
4. Write a letter of Complaint to Steve Balmer of Microsoft about IE. (Every self respecting web developer should do this).

Regards

Answer 2

Use the IETester to test it yourself :)

Answer 3

Multiple IE lets you easily install/run multiple versions of IE side by side.

Answer 4

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.

Answer 5

Welcome to the world of browser CSS quirks. It is difficult indeed to get a nice working CSS based website that's consistent across browsers. You'll need to experiment a lot.

Sometimes you may be better off using a CSS framework like BlueprintCSS

Try viewing your site in various browsers under various platforms by using the BrowserShots service.

Answer 6

I've had a look and one of your stylesheets set the height and width for #logopic

#logopic{
width: 50%;
height: auto;
vertical-align:bottom;}

Try the real hight and width of the image in there instead

width:699px;
height:126px;