IE 6 Positioning Disaster

[nicky77]

Hi there, I've uncovered a problem which I only have with IE6, surprise surprise. I have a centered layout for the main content of my web page and I am populating the main section with tabulated data pulled from a database. However, in IE6, the main section of the page is pushed to the left, while the background image (a gold box) i've used to contain the table data has been pushed out to the right.

The strange thing about this is that my other pages display fine in IE6, it seems that the dynamically created table is causing mayhem on this one page. I've checked through my code and can't see any problems - if anyone could help that would be greatly appreciated.

The page and source can be viewed at www.ttfgolf.com/members/top_courses.php (apologies if the table coding looks a bit messy, php is generating this for me and don't think i can affect the output format)

the css is as follows...

body {
    background-image: url(ttf_background.jpg);
    background-repeat: repeat-x;
    font-size:1em;
    height:100%;
}
 
.container {
    background-image: url(members_bground.jpg);
    background-repeat:no-repeat;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    width:843px; 
    margin-left: auto; 
    margin-right: auto;
    text-align:center;
    height:800px;
}
 
.container p {
    position:relative;
    padding-top:30px;
}
 
.menu {
    position:relative;
    top:80px;
}
 
a:link {
    color:#D5BE8B;
    text-decoration:underline;
}
 
a:visited {
    color:#008200;
}
 
a:hover {
    color:#FFCC00;
}
 
#content {
    position:relative;
    top:79px;
    background-image: url(box.gif);
    background-position:top center;
    background-repeat:no-repeat;
}
 
#content p {
    margin-left:30px;
    margin-right:30px;
    padding-bottom:0;
    text-align:left;
}
 
#content #centertext {
    margin-left:0px;
    text-align:center;
}
 
#loginform {
    margin-left:200px;
    margin-top:30px;
}
 
label,input {
    display: block;
    width: 200px;
    float: left;
    margin-bottom: 20px;
}
 
input[type="checkbox"] {
    width:15px;
    margin-left:30px;
}
 
label {
    text-align: right;
    width: 175px;
    padding-right: 20px;
}
 
br {
    clear: left;
}
 
#loginform #formbuttons {
    margin-left:177px;
    padding-top:10px;
}
 
#content #error {
    color:red;
    margin:0;
    padding:0;
    text-align:center;
}
 
#loginform input[type = "submit"] {
    margin-left:20px;
    width:auto;
}
 
/*golf course table styling*/
#course_table {
    margin-top:30px;
    width: 750px;
    margin-left:60px;
    text-align:left;
    border-collapse:collapse;
}
 
#course_table th{    
    color:#D5BE8B;
    font-size:1.4em;
    border-bottom:solid 2px #D5BE8B;
}
 
#course_table td{
    margin-bottom:0;
    height:22px;
    vertical-align:top;
}
 
#course_table #checkbox {
    height:5px;
}
 
#course_table #rank {
    padding-left:30px;;
}
 
#course_submit {
    margin-top: 40px;
    margin-left:600px;
}
 
.footer {
    position:relative;
    width:843px;
    margin-top:2px;
    height:56px;
    margin-left: auto; 
    margin-right: auto;
    text-align:center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #FFFFFF;
    background-image: url(banner_bottom.gif);
    background-repeat: no-repeat;
}
 
.footer img {
    float:left;
}
 
.footer p {
    padding-top:3px;
}
 
 

[drhowarddrfine]

Validate for your list of 50 html errors that need correcting.

[nicky77]

thks for the reply - i had validated earlier today and couldn't see what could be causing my problem, realise i still should have corrected the errors though before posting - apologies. i've now corrected all of the errors apart from those relating to the properties of my flash menu as i'm not keen on messing around with them.

grateful for any help if you can see where the problem might lie