weird footer css problem

hargi

hargi

hargi

Associate
Joined
19 Jul 2006
Posts
1,847
For some reason my footer doesnt want to go at the bottom of the page.

css
Code: 
@charset "utf-8";
/* CSS Document */
body, html {
background:#444;
	margin: 20px auto;
	color: #555;
	font: 0.9em mangal,  verdana, arial, sans-serif;
}

h2 {
	text-align: center;
	font: 16pt mangal, verdana, arial, sans-serif;
}

#header { 
text-align: center;
	font: 16pt mangal, verdana, arial, sans-serif;
background:#ddd; 
} 

#wrap { 
width:750px; 
margin:0 auto; 
background:#E8112D; 
} 


#main { 
padding-top:20px;
padding-bottom:20px;
text-align: center;
background:#fff; 
width:700px;
margin: 25px auto;
} 


#footer { 
font: 8pt mangal, verdana, arial, sans-serif;
text-align:right;
padding:5px 10px;
}

everything works ok on this page
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<?php
$link = mysql_connect('localhost', 'xx, '*****');
if (!$link) {
    die('Could not connect: ' . mysql_error());
}


?> 
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body><div id="wrap"><div id="header"><h1> Upload Tool</h1>
</div> 
<div id="main">
<form action="Display.php" method="post" name="Course Select" target="_self"><?php
mysql_select_db("db", $link);

 
$query="SELECT DISTINCT Course FROM misimport";

/* You can add order by clause to the sql statement if the names are to be displayed in alphabetical order */

$result = mysql_query ($query);
echo "<select name=category value=''></option>";
// printing the list <strong class="highlight">box</strong> select command

while($nt=mysql_fetch_array($result)){//Array or records stored in $nt
echo "<option value='$nt[Course]'>$nt[Course]</option>";
/* Option values are added by looping through the array */
}
echo "</select>";// Closing of list <strong class="highlight">box</strong> 
?> 

<input name="Submit" type="submit" value="Submit" /></form>

<?php mysql_close($link); ?> 
</div><div id="footer">Produced by xxx</div></div>

</body>
</html>

but not here
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
<?php
$link = mysql_connect('localhost', 'xx', '***');
if (!$link) {
    die('Could not connect: ' . mysql_error());
}

$Course=$_POST["category"];
mysql_select_db("db", $link);
$query="SELECT * FROM misimport WHERE Course = '" . mysql_real_escape_string($_POST["category"]) . "'";  
$result = mysql_query ($query);

?> 

</head>

<body><div id="wrap"><div id="header"><h1>Moodle Upload Tool</h1>
</div> 
<div id="main">
 <?php echo $_POST["category"]; 
echo "<table border='2'>";
while($row = mysql_fetch_array($result))
  {
  echo "<tr><td>";
  echo $row['Id'];
  echo "</td><td>";
   echo $row['Id'];
  echo "</td><td>";
   echo $row['DOB'];
  echo "</td><td>";
   echo $row['Firstname'];
  echo "</td><td>";
   echo $row['Surname'];
  echo "</td><td>";
   echo $row['xxx'];
  echo "</td><td>";
   echo $row['Course'];
  echo "</td>";
   echo "</tr>";
    }

?>
</div>
<div id="footer">Produced by xxx</div>
</div>

</body>
</html>
any ideas
 
Last edited:
I don't have time to look through that right now but try

clear:both;

for the footer css. That is a common problem.
 
Tried with and without the clear:both; and no luck.

Sorry no test site as its just running on my box at the moment as it contains data.

thing is the footer displays perfectly on the first page. but not on the page that is populated from the db. it appears before the output.
 
I don't know if this would work and it seems like a bit of a fudge but if the delay from populating the page causes the footer to be displayed first then maybe load the footer content from the db too?*


*I don't know really know what I'm talking about!
 
Last edited:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>


</head>

<body><div id="wrap"><div id="header"><h1>Moodle Upload Tool</h1>
</div>
<div id="main">
BA445 Media Year 1<table border='2'><tr><td>###</td><td>####</td><td>####</td><td>firstname</td><td>Lastname</td><td>BACOLL</td><td>course</td></tr></div>
<div id="footer">Produced by xxx</div>
</div>

</body>
</html>
Click to expand...

rendered page code
 
Last edited:
You haven't closed your table, you need </table> after your last </tr>, you will probably find that will fix any major issues.

You also need to self-close your css link like so:
Code: 
<link rel="stylesheet" type="text/css" href="style.css" />

Though that probably isn't causing any problems at the moment.
 
You must log in or register to reply here.
Back
Top Bottom