Site not displaying correctly in IE6

[Sul]

Hi,

I'm working on a website that uses Joomla and it displays fine on every browser I've tested other than IE6.

The URL is: http://chailey.heymoscow.com/who-we-are-here-for and there are other pages which may not be working.

The url to the style sheet is: http://chailey.heymoscow.com//templates/chailey/css/style.css

I tried to put in some hacks but they didn't work. Unfortunately I don't have IE6 on my computer here (it's on the computer of my client).

Below is the screenshot of what's going on in IE6:

http://img98.imageshack.us/img98/213/image002bb5.th.jpg (http://img98.imageshack.us/my.php?image=image002bb5.jpg)

Certain layers are being shafted over to the right, however the main content bit is at the corrrect position (the "who we are here for" bit).

Here's an extract of the CSS - some areas have been commented out, as I was converting it to fluid design.

.contentWrap{position:relative; border-top: 1px dotted #E7E8E9; margin-bottom: 10px} /*added position relative so I can assign absolute below */

.sidebar_news {
/*float: left; /* since this element is floated, a width must be given */
position:absolute;
right: 230px;
top: 0px;
width: 206px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px; /* padding keeps the content of the div away from the edges */

}

.sidebar1 {
/*float: left; /* since this element is floated, a width must be given */
/*display:inline; /*for IE6 fix */
position:absolute;
left:0px;
top:0px;
width: 206px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 10px; /* padding keeps the content of the div away from the edges */

}

.sidebar2 {
/*float: right; /* since this element is floated, a width must be given */
position:absolute;
right: 0px;
top: 0px;
width: 215px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0; /* padding keeps the content of the div away from the edges */
margin: 10px;
}
.mainContent {
float:left;
display:inline;
margin-right:455px;
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
/*width: 50%; /*width was 470px in fixed width layout */
border-left: 1px dotted #E7E8E9;
border-right: 1px dotted #E7E8E9;
min-height: 400px;
}

.mainContent_forum{
float:left;
display:inline;
/*width:100%; /*allow forum to expand to full width previously was 660px */
margin-right: 240px; /*added a margin so it doesn't go underneath sidebar2 and removed margin 0*/
padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
border-right: 1px dotted #E7E8E9;
min-height: 400px;
}


I'm not really familiar with any CSS hacks for IE6... so any help appreciated. Thanks.

[Sul]

Think I sorted it out. Looks like it's yet another IE6 bug causing this. Set width:100% on the wrapper and it solved the issue after removing any other previous hacks I put it which weren't working.

Also since IE6 doesn't support min-height, adding height:auto and the minimum height I wanted it to go to by setting height property with pixels, seemed to give the same effect.

Can anyone test this in IE6 for me and post a screenshot? Thanks