Div Problem in IE6

[Tom_Cash]

Hi all,
I have searched for a solution to my problem and found an answer regarding margins here:

[webmasterworld.com...]

However, despite my problem being similar the above answer did not help me...

Here's my CSS:

#container {
width: 990px;
margin: 0 auto 0 auto; }

#content {
width: 770px;
float: left;
margin: 20px 20px 0 0;
color: #333;
font-size: 10pt; }

#side {
width: 200px;
float: right;
margin: 20px 0 0 0; }

.side-box {
width: 180px;
padding: 10px;
margin: 0 0 20px 0;
-moz-border-radius: 5px;
border-radius: 5px;
background: #69C;
color: #FFF;
font-size: 10pt;
line-height: 150%; }

I'm sure my CSS and math are correct. Perhaps I'm wrong...

Could I have any help, please? It'd be much appreciated.

Thanks in advance,
Tom.

[Major_Payne]

Not sure how many of those divs you have lined up side by side, but content is 770px and one side box is 180px. The container is 990px. You have 10px of padding all around. IE never gets the dimensions correct.

Easiest way to see whether you are too wide for your divs, put a border of different colors for each. Then take a look in the browser(s) you are having problems with. Recommend getting it right in Firefox and tweak with IE's Conditional Comments to make IE behave.

Could also add at the very TOP of all the CSS the Universal Selector. Clears all browsers before your CSS takes over:

 * { margin: 0; padding: 0; border: 0; } 

Should always post the HTML being used with the CSS.

[Tom_Cash]

Thanks for the prompt reply MP. I did as you said and noticed that it's the side divs with the forms in that are wider. The forms are stretching the side divs.

I've tried clearing the default attributes but with no sucess. The form STILL streches the div by around 10px in IE6.

Any ideas?

Here's my CSS for the forms used.

form { margin: 0; padding: 0; }
input { margin: 0; padding: 0; }
select { margin: 0; padding: 0; }
textarea { margin: 0; padding: 0; }

/* Bespoke Form Stuff for the Side Bar */
.side-txt{ width: 176px; padding: 2px; color: #333; margin: 0; }
.side-btn { width: 176px; padding: 2px; margin: 0; }

Thanks in advance for any advice you can give,
Tom.

[Tom_Cash]

I've figured it out for those who may need to know in future!

IE6 adds a BORDER to form fields. I set border to 0 on my form fields and wala!