Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    93
    Thanks
    9
    Thanked 0 Times in 0 Posts

    IE 6 Positioning Disaster

    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...

    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;
    }

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    I suspect it to be a problem with layout and relative positioning--why have you positioned so many elements relatively? Not that it's so semantically wrong to do so, but IE6 can stir up some hard-to-track bugs with floated or positioned elements that don't have layout.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •