My CSS Layout Evolution (Help)

[peter893]

Waste of time...

[peter893]

So this is my CSS layout for the first page. If someone could have a look to see if something looks. the only place that things are all out of wack is IE6


@charset "UTF-8";
body {
font: 100% Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
background: #cdc9b6;
margin: 0;
padding: 0px;
text-align: center;
color: #c1c1a5;
}
.main #container {
width: 1016px;
height: 714px;
background: url(../images/bg/studio_page.jpg);
margin: 0 auto;
border: 0px;
text-align: left;
}
.main #mainContent {
padding: 0 0px;
}
#page-container {
width: 953px;
height: 700px;
margin: 0 auto;
border: 0px;
}
#invisible-content {
height: 23px;
font-family: Arial, Helvetica, sans-serif;
font-size: 2px;
line-height: 2px;
font-weight: normal;
color: #cdc9b6;
}
#header {
height: 144px;
margin: 0px;
padding: 0px 0px 0px 0px;
}
#main-nav {
height: 49px;
}
#main-content {
height: 480px;
}
#left-content {
float: left;
width: 360px;
height: 320px;
margin: 55px;
padding: 10px 0px 0px 0px;
margin-right: 15px;
margin-bottom: 5px;
}
#right-content {
float: right;
width: 410px;
height: 290px;
margin: 45px;
padding: 0px 0px 0px 0px;
margin-left: 15px;
}
#play1 {
position:relative;
background: white;
top:115px;
left:85px;
width: 28px;
height: 22px;
margin: 10px;
padding: 0px 0px 0px 0px;
}
#play2 {
background: white;
position:relative;
top:83px;
left:220px;
width: 28px;
height: 22px;
margin: 10px;
padding: 0px 0px 0px 0px;
}
#play3 {
background: white;
position:relative;
top:52px;
left:360px;
width: 28px;
height: 22px;
margin: 10px;
padding: 0px 0px 0px 0px;
}
#play4 {
background: white;
position:relative;
top:150px;
left:85px;
width: 28px;
height: 22px;
margin: 10px;
padding: 0px 0px 0px 0px;
}
#play5 {
background: white;
position:relative;
top:118px;
left:220px;
width: 28px;
height: 22px;
margin: 10px;
padding: 0px 0px 0px 0px;
}
#play6 {
background: white;
position:relative;
top:86px;
left:360px;
width: 28px;
height: 22px;
margin: 10px;
padding: 0px 0px 0px 0px;
}
#contact {
float: right;
width: 375px;
height: 39px;
margin: 68px;
margin-top: 20px;
margin-bottom: 5px;
padding: 0px 0px 0px 0px;
}
#social-links {
float: left;
width: 126px;
height: 41px;
margin: 10px;
margin-left: 300px;
padding: 0px 0px 0px 0px;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}