IE6 adding large margin - why???

[superDk]

Hello,

IE6 is adding a large margin between my two containers (container1 & container2) everything works fine in IE7 and Firefox. I've been searching on-line for a fix but I've had no luck. It would make my day if someone could help me with this.

website- http://www.00dogtraining.com/

Thanks for any help,
Dave

css code:
@charset "utf-8";
/* CSS Document for 00 Dog Traing */

body{
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
line-height: 135%;
margin:0;
}

#Bgblue {
background-image:url(bg_blue_gradiant.gif);
background-repeat:repeat-x;
width:100%;
height:280px;
margin:0px;

}

#topleft {
float:left;
width:130px;
height:281px;
margin:0;
}
#topmiddle {
float:left;
display:inline;
width:575px;
height:281px;
background-image:url(bg_top_middle.gif);
margin:0px;
}




#topright {
float:left;
width:130px;
height:281px;
margin:0px;
}

#container{
width:835px;
height:280px;
margin-left:auto;
margin-right:auto;
text-align:left;
margin-bottom:0px;


}

#container2{
width:835px;
margin-left:auto;
margin-right:auto;
text-align:left;
margin-top:0px;

}

#container3{
width:835px;
margin-left:auto;
margin-right:auto;
text-align:left;

}


p {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
text-align:left;
padding-left:42px;
padding-right:20px;
line-height: 135%;
margin:0;

}


#left{
width:130px;
margin:0;
float:left;

}

#middle{
width:575px;
float:left;
display:inline;
background-image:url(bg_middle.gif);
background-repeat:repeat-y;
margin:0;
}

#right{
width:130px;
float:left;
margin:0;
}
#bgfooter {
background-image:url(bg_footer.gif);
background-repeat:repeat-x;
width:100%;
height:81px;
margin-bottom:0px;

}
#footer{
clear:both;

}

#middle ul {
padding-left:85px;
}

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:600;
color:#45aedb;
text-align:left;
padding-left:30px;
margin-top:15px;
margin-bottom:8px;
}

h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#45aedb;
text-align:left;
padding-left:35px;
margin-top:22px;
margin-bottom:8px;
}
.mainimage {
padding-top:23px;
padding-left:20px;
}



/*------------------- main navagation --------------------*/




th {
text-align:right;
width:55px;
height:25px;
padding-left:28px;
}
table {
margin-left:5px;
margin-top:34px;

}
a {
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
line-height: 110%;
}

a:hover {
color:#45aedb;
text-decoration:none;

}
.navup {
text-decoration:none;
color:#45aedb;
}

/*------------------- end main navagation --------------------*/

[AricC]

I didn't try this but in your body tag change margin: 0; to margin: 0px 0px 0px 0px; not sure if that will help your problem but then you can set your margins individually.