Hi there

I've been building a new page on our site that has bascially the same layout as all the others. It works fine in IE7 and FF, but in IE6 the layout goes a bit wrong.

There should be a green box that lines up with the top of the content and sits to the righthand side, however, in IE6 the green box moves to the bottom of the page and sits on the left hand side.

I thought it may be something to do with the table, as this is not on any other page, so I tried removing it, but it made no difference.

Anyone know if there's a quick fix without affecting all the other pages with the same layout?

problem page: caravanguard.co.uk/test/tracking.php

Thank you in advance

You'll need conditional comments and a separate css file to fix this in IE6.

1 - you're triggering the doubled-float margin bug in IE6 with the float:left and the 5px left margin on #nav. IE will DOUBLE that margin to 10px, which means there's not enough space for the #contentright to sit where you want it so IE6 DROPS the box to where there IS room.

In a separate css file for IE6, add display:inline to #nav and it will correct the problem. Do the same for any other boxes you have floated and added a margin that goes it the same direction as the float - right with right margin and left with left margin.

You also need to validate your code, you've got an extra </div> on that page that may be contributing to the problems.

When you float a div, you MUST define a width - and you have no width defined on #contentright.

I also face the same problem. But already solved out with your suggestion. Thank you Lady . To make the web page layout display best on any browsers, which one we should use?
But, I still got another problem, why IE6 can't display my background image which is repeat-x on my header? On FF and others browsers work fine.

I think my thread has been somewhat hijacked! Abu - your site appears not to exist

My problem was fixed by moving the code about, so the green box appears above the table in the code. This fixed the problem in IE6 without changing the CSS. Thanks for your help LadynRed - I used your advice to fix the text alignment issue in the #nav section at the same time.