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...
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...
Code:
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;
}
Comment