CSS compatabiltiy between IE, Firefox and Chrome (wordpress)

I've built a site using the contempt theme (wordpress) and I'm changing it's CSS to make it wider.

The problem is that I can make it look great on either Internet Explorer or Firefox and chrome but not all 3 at the same time.

If I remove the sidebar tag:

#sidebar {
width:200px;
padding:20px 200px 10px;
}

the page looks OK on IE (as it now - physiocall.co.il) but the sidebar is hidden in Firefox and chrome.

If I add this little tag to the css - The site looks great on Firefox and chrome (the sidebar pushed left to it's place) but on IE it go开发者_StackOverflowes down - below the entire page.

Any ideas how can I change the css to make it look correct on both IE and Firefox. Any ideas what cause FF and Chrome to render the css in one way, and IE in another way ?

Thanks.

the entire CSS:

#content {
float:right;
width:649px;
margin:-50px 30px 0;
padding:0 0 20px 45px;
}

#topbar {
max-width:950px;
height:25px;
line-height:23px;
background:#FFFFE6;
overflow:hidden;
border-bottom:1px black solid;
margin:0;
}

#pagebar {
background:url('images/blue_flower/pagebar.jpg');
width:950px;
height:35px;
border-bottom:1px black solid;
margin:0;
padding:0;
}

#pagebar .children li,#pagebar .sub-menu li {
min-width:105px;
border-left:1px #e1e1e1 solid;
border-bottom:1px #e1e1e1 solid;
margin:0;
padding:0;
}

#pagebar ul a {
background-color:#f1f1f1;
width:101px;
}

#page {
width:950px;
}

#sidebar {
width:200px;
padding:20px 200px 10px;
}

sorry to say that, but you should start from scratch and completly rearrange your html output and css. maybe this is a coding practice due to rtl but your #content appears before the sidebar and has a float:right while your sidebar is positioned left to the content with a margin-left:530px.

and your content has a 640 width..

that can't work out and is not to be fixed by some niffty css trick.

sorry.

Since it works in IE but not the modern browsers, this tells me you used IE as your initial test. Never, ever do that. IE is 12 years behind all others in modern standards and compliance. Inept at best, you should never trust IE to do anything right.

It's been a long time since I've used frames so I'm not sure that the lack of a doctype on your index page, which puts you into quirks mode, is causing the problems.

So, while reworking your markup, use any browser but IE for the initial test. Then look to see how IE screws it up. The quirks and bugs in IE are well known, as are the hacks to fix it.

The solution was

#sidebar {
float:left;
width:200px;
margin:-20px 10px 5px 5px;
}

It looks like IE and FF had the opposite default value to the float parameter, hence making it impossible to set it straight. once given a float value, the margin fixed the rest for both browsers.