Annoying CSS Table Issue

Django x2

Django x2

Django x2

Soldato
Joined
28 Sep 2008
Posts
14,158
Location
Britain
I've been looking at implementing a rudimentary search feature for a simple test website.

Basically, an html search form submits and runs a search.php script. This outputs the results to the screen in a table, an HTML table. It's a tutorial I've followed so that's why an HTML table has been used. Typically though, I try to avoid them.

In this instance, the table is appearing below the bottom "footer" div of the page, therefore, outside of the wrapper, even though the PHP code is pasted within the right div.

There is a lot of echo going on and I'm sure it's this that is causing the issue.

Any ideas of what might be wrong or an alternative for echoing the HTML?

Thanks
 

Django x2

Django x2

Django x2

Soldato
OP
Joined
28 Sep 2008
Posts
14,158
Location
Britain
Ok, thanks for the help so far guys, but I'm not getting any further with this, annoyingly....

Here is a picture of what is happening:

If I search for results, and a valid entry is found, this is what it looks like:
EWu548w.png

So, the table sits below the footer div (that blue line, with the copyright notice below it)

If I search for something that isn't found, oddly, the table appears in the right place:
5glQBAl.png

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>
</head>

<body>
<div id="wrapper"><!--start wrapper-->
	<div id="header"><!--start header-->
	</div><!--end header-->

<div id="content"><!--start content-->
	<div class="inner"><!--gives the padding of the text-->
	<h2>Search Rersults</h2>
<br />
<strong>You are logged in as:</strong> <?php echo $_SESSION['user']['username']; ?> 

<div class="centered">
<p>
<?php    
	$query = $_GET['query'];     
	$min_length = 3;  
	if(strlen($query) >= $min_length)  
	{
		$query = htmlspecialchars($query);         
		$query = mysql_real_escape_string($query); 
   
	echo "<h3>You have searched for $query...Please find the details of $query...</h3>";
	echo "<table><tr align='center' bgcolor='#03acfa' > <td<b>Name</b></td> <td><b>Email</b></td> <td><b>Telephone</b></td> <td><b>Address</b></td></tr>";           	
$result = mysql_query("SELECT * FROM contacts WHERE (`name` LIKE '%".$query."%') OR (`email` LIKE '%".$query."%') OR (`telephone` LIKE '%".$query."%') OR (`address` LIKE '%".$query."%')") or die(mysql_error());         
	if(mysql_num_rows($result) > 0)
	{
		while($results = mysql_fetch_array($result))   
		{                 
	echo "<tr align='center' bgcolor='#93dafb'><td>".$results['name']."</td> <td>".$results['email']."</td> <td>".$results['telephone']."</td> <td>".$results['address']."</td></tr>" ;            
		}                   
	}        
	else{             
		echo "<tr align='center' bgcolor='#fdee03'><td colspan='2' height='25px'>Sorry..No results for $query</td><tr>";    
		echo "</table>";          
		}       
	}    
	else{         
		echo "Your search keyword must have at least ".$min_length;    
	}
?></p>
</div>
<br style="clear: both;">
</div><!--end content-->


<div id="copyright"><!--self explanatory-->
<p>Copyright &copy; 2013. -  All rights reserved</p>
</div>
</div><!--end wrapper-->
</body>
</html>

and CSS
Code: 
/* CSS Document */

html, body, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
}

h1 img {
display: block;
}

img {
border: 0;
}

img.floatRight { 
    float: right; 
    margin: 4px; 
}

.centered-table {
   margin-left: auto;
   margin-right: auto;
}

a {
color: #464544;
}

a:hover {
color: #FFA405;
}

.left {
float: left;
}

.right {
float: right;
}

.more {
text-align: right;
}

.clear {
clear: both;
}

/* Stop Scroll Bar on Right */

html {
	overflow-y:scroll;
}

* :focus { outline: 0; }

body {
	background: url(../images/bg.gif);	
	background-repeat:repeat;
	text-align: center;
	font: 12px verdana, arial, sans-serif;	
	padding-bottom: 10px;
	color: #555555;
	}
	
/** layout **/
#wrapper {
	text-align: left;
	margin: 37px auto;
	width: 800px;
	background: #fff;
	position: relative;
	border: solid 1px #555;
	}

#header {
	width; 800px;
	height: 200px;
	}

#contact{
	float:right;
	width:200px;
	padding-top:50px;
	color: #000;
	text-align:left;
	}

.textcolor{color: #f26522; font-weight:bold;}
	


#help{
padding: 15px 15px 15px 15px;
}


#help a:link{	
	color: #00529B;
	text-decoration:none;
	}	

#help a:visited{	
	color: #00529B;
	text-decoration:none;
	}	

#help a:hover{	
	color: #00529B;
	text-decoration:none;
	}		
	
#help a:active{	
	color: #00529B;
	text-decoration:none;
	}


#information{
	position:relative;
	width: 190px;
	background: #fff;
	}
		
#content {
	padding-top: 3px;
	padding-bottom: 10px;
	padding-left: 2px;
	padding-right: 4px;
  	background: #ebebeb;
  	margin-bottom: 2px;
	margin: 0.9em 0;
	}

#content .inner, #content .inner, #mid1 .inner, #mid2 .inner {
 	padding: 6px 12px;
	}

#content p, #content p, #mid1 p, #mid2 p {
	margin: 0.9em 0;
	}

#lowercontent {
	padding-top: 3px;
	padding-bottom: 10px;
	padding-left: 2px;
	padding-right: 4px;
  	background: #ebebeb;
  	margin-bottom: 2px;
	margin: 0.9em 0;
	}

#lowercontent .inner, #lowercontent .inner, #mid1 .inner, #mid2 .inner {
 	padding: 6px 12px;
	}

#lowercontent p, #lowercontent p, #mid1 p, #mid2 p {
	margin: 0.9em 0;
	}

h3 {
 	font: 16px "arial narrow", arial, sans-serif;  
 	color: #695F4C;
	padding-bottom: 10px;
	}

h2 {
	font: 24px "arial narrow", arial, sans-serif; 
	color: #695F4C;
	padding-bottom: 10px;
	}

h4 {
	font: 18px "arial narrow", arial, sans-serif; 
	color: #695F4C;
	padding-bottom: 5px;
	}

#copyright {
	height: 60px;
	text-align: center;
	font-size: 9px;
	padding: 3px;
	border-top: solid 2px #007FFF;
	background: url(images/bvqi.gif) center left no-repeat;
	}


#enquiryform p input.button
{
margin-left:120px;
}

/* General form settings */
form
{
margin:0;
}

.email
{
	font: 16px "arial narrow", arial, sans-serif; 
	color: #eb9923;
	padding-left:2em;
}

form p
{
clear:left;
margin:2px 0;
}

form span.warning
{
margin-left:0.25em;
}

fieldset
{
margin:10px;
border:1px solid #d9d9d9;
padding-bottom:10px;
}

legend
{
margin:0 0 0.5em 0;
padding:0.25em 0.5em;
background-color:#f20000;
color:#fff;
font-size:1em;
font-weight:700;
}

label
{
float:left;
width:120px;
margin:2px 0;
font-weight:700;
color:#545454;
vertical-align:middle;
}

input, textarea
{
float:left;
margin:2px 0;
border:1px solid #d9d9d9;
font-family:tahoma, Arial,Geneva,Helvetica,sans-serif;
font-size:1em;
color:#333;
background-color:#fff;
}

select
{
float:left;
margin:2px 0;
}

input.button
{
float:none;
width:10em;
padding:0px 7px 0px 7px;
background-color:#d9d9d9;
color:#000;
line-height:normal !important;
text-align:center;
font-weight:700;
}

input.image
{
float:none;
border:0 !important;
}

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%	
	}

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

#formerrors { color:red; border:1px solid red; margin:10px; padding:10px; }
#formerrors ul li { list-style-type:none; }
 

Django x2

Django x2

Django x2

Soldato
OP
Joined
28 Sep 2008
Posts
14,158
Location
Britain
Thanks, this is working a treat.

Now, I have gone and broken something though. Basically, I've added a "delete" column to the table. This gives a button on the last column of the table that deletes the user returned. It calls another page, dc.php.

Thing is, it's now not working. So, I added as you can see:

PHP: 
                            <tr>
                                <td class="contact-name"><?php echo $contact['name']; ?></td>
                                <td class="contact-email"><?php echo $contact['email']; ?></td>
                                <td class="contact-telephone"><?php echo $contact['telephone']; ?></td>
                                <td class="contact-address"><?php echo $contact['address']; ?></td>
								<td class="contact-delete"><form action="dc.php" method="post">
                <input type="hidden" name="name" value="<?=$contact['name']; ?>">
                <input type="submit" name="submit" value="Delete">
                </form></td>				
                            </tr>

and dc.php looks like this:

PHP: 
<html>
<head>
</head>

<body>
<div id="wrapper"><!--start wrapper-->
	<div id="header"><!--start header-->
	</div><!--end header-->

<div id="content"><!--start content-->
	<div class="inner"><!--gives the padding of the text-->
	<h2>Site Administration</h2>

<strong>You are logged in as:</strong> <?php echo $_SESSION['user']['username']; ?> 

<?php

//Define the query
$query = "DELETE FROM contacts WHERE id={$_POST['name']} LIMIT 1";

//sends the query to delete the entry
mysql_query ($query);

if (mysql_affected_rows() == 1) { 
//if it updated
?>

			<strong>Contact Has Been Deleted</strong><br /><br />
	
<?php
 } else { 
//if it failed
?>
	
			<strong>Deletion Failed</strong><br /><br />
	

<?php
} 
?>
 
	
			<form action="contacts.php" method="post">
			<input type="submit" name="submit" value="Ok" />
			</form>
<br /><br />



<?php

mysql_close(); //Closes our SQL session

?> 

</div><!--end topcontent-->
<br style="clear: both;">
</div>


<div id="copyright"><!--self explanatory-->
<p>Copyright &copy; <?=date('Y')?>. </p>
</div>
</div><!--end wrapper-->
</body>
</html>
 
Last edited:

Django x2

Django x2

Django x2

Soldato
OP
Joined
28 Sep 2008
Posts
14,158
Location
Britain
Ahh, got it :)

I did

PHP: 
<tr>
      <td class="contact-name"><?php echo $contact['name']; ?></td>
      <td class="contact-email"><?php echo $contact['email']; ?></td>
      <td class="contact-telephone"><?php echo $contact['telephone']; ?></td>
      <td class="contact-address"><?php echo $contact['address']; ?></td>
      <td class="contact-delete"><form action='dc.php?id="<?php echo $contact['id']; ?>"' method="post">
      <input type="hidden" name="id" value="<?php echo $contact['id']; ?>">
      <input type="submit" name="submit" value="Delete">
      </form></td>		
         </tr>
 
You must log in or register to reply here.
Back
Top Bottom