Wordpress IE6 CSS Problem

This is a site I'm working on - fibroid-research-treatment.co.uk

When viewed in IE6 the header is pushed down making any content have a large white space above them. (See attachment).

I've tried the double margin fix (display: inline but he hasn't seemed to make things worse for firefox.

 

No attachment, can you repost it with the attachment?

 

Sorry my bad, added the image now

 

any help would be greatly appreciated!

 

This should be a start. In your style.css try changing it to this:

From:
.Header { width:1024px; margin:auto; padding:0; height:206px;}

To:
.Header { margin:auto; padding:0; height:206px;}

From:
.Menu { padding:0; margin:0; height:45px; width:170px; float:left;}

To:
.Menu { padding:0; margin:0px 0; height:45px; width:170px; float:left;}

 

Correction for the Menu class.
Should read:

From:
.Menu { padding:0; margin:20px 0; height:45px; width:170px; float:left;}

To:
.Menu { padding:0; margin:0; height:45px; width:170px; float:left;}

 

1. Go to folder of wordpress theme you use
2. Open file header.php with Dreamweaver or your favorite text editor
3. Just above </head> tag add this:

<!--[if lte IE 6]>
<style type="text/css">
.CON {
margin-top: -59px;
}
.Header {
width:851px;
}
.SRN {
margin-top: 4px;
}
</style>
<![endif]-->

4. Save file and test

I hope that this will solve your problem.
This is tested with IE 6 but probably will work with IE 7 .

 

Thank Leron & iv5rovic!! I will try both method help better my understanding.

thanks again

 

I tried both methods, leron's method didn't work but thanks. I ended up using both methods to make things more precise. I had to include the 20px to the top margin because the navigation was shifted to the top of the page and the time stamp for the post also moved up out of position.

I'm going to create a version 2 with the navigation on the left hand side of the content instead of the header, hopefully it won't cause me too many headaches.

Thanks again guys