IE6 problem, Three Pixel Jog or float drop

I used CSS sculpture v3 to create this site - index.htm - which is almost ready to go live.

However i have a problem when the page is viewed in IE6, the content div drops below the left navigation div. I have searched the internet for solutions to this, i think its called Three Pixel Jog or float drop but none seem to work. Can anybody offer any solutions?

Thanks in advance

Roy

try adding display: inline; to the two css rules as hown here:

#outerWrapper #contentWrapper #leftColumn1 {

	background-color: #ACCC6E;

	float: left;

	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */

	width: 170px;

	text-align: right;

	display:inline;

}

/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */

#outerWrapper #contentWrapper #content {

	margin: 0 0 0 170px; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */

	padding: 0px 0px 0px 0px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */

	width: 790px;

	height:610px;

	background-repeat:no-repeat;

	background-position:top right;

	display:inline;

}

this will not affect any browser apart from IE6

Hi Dave

Thanks for your prompt reply.

I added the code but it had no effect.

Roy

Are you testing locally as I do not see the changes in your css files online

Hi

I have moved it all to test page with test css file and uploaded it.

test.htm

Still got the dropped div in IE6 plus now FF, IE8, Chrome and Safari pages are all over the place

Roy

ok let me look at it further

I am sorry but at the moment I do not have a solution for you, all the normal fixes for IE6 that I use do not solve this issue.

Perhaps one of the WA support teams knows of a solution that applies to this situation.

Add the following:
<!--[if lte IE 6]>
<style type="text/css">
#outerWrapper #contentWrapper #content {
width:787px;
}
</style>
<![endif]-->



just before this line:
<!-- InstanceEndEditable -->
</head>

Hi

Thank you Jason & Dave for your help

I need to add some more rules to the conditional statement, to correct a couple of other minor probs with IE6

Roy