Jquery UI breaks layout in ie7 & 8

I developed a good site layout which works like a charm in Webkit and FF based browsers... 开发者_开发问答but in IE 7 and 8 everything get broken up like.

I've never seen so much difference between Safari/Chorme and IE. I tried different DOCTYPEs but there was no difference.

If I remove all the jquery css everything works fine. You can see it working on [removed]

Can anyone hint me on how to solve this mess?

You have a compatibility issues, I think you need to override the ui-state-default and .ui-state-hover classes on the buyitui.css file to fit IE.

You can use firebug in firefox to go throught the css files.

To overide the css, create one css file and put all the overrides on this file and place it on the bottom of all the css files. Assuming you make sure you are not using inline style sheet.

EDIT:

You need to override this three:

<div class="clear"/>
<div class="separator" style="width: 950px; margin-left: auto; margin-right: auto; float: right;"/>
<div id="pie" style="float: right;">

The Problem seems on the clear class you have above the separator. When you do clear both, all the floating is cleared and the separator is getting up of the page with the height exanding almost all over the page.

Try to change this and you will see the changes:

This could not be the exact solution, but it really points out the problem on your pages.

on the clear class

remove the clear:both; or make it clear:none;

on the separator class

add float:right and margin-right:200px;

on the pie id

add float:right; and margin-right:200px;

the jquery accordion was what was breaking everything, regeneratd and problem solved (just the regular no standars on IE)