Annoying CSS Table Issue

Django x2 · 13 Jun 2013 at 22:08

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

gord · 13 Jun 2013 at 23:00

Is your HTML all in one big string with one echo? Or lots of outputs?

Sounds like your table output is just in the wrong place. But if all of the page HTML is one big string already you're going to have to split it at the right point to put your search results table in.

Redrum · 14 Jun 2013 at 00:40

All the functions in PHP that output text, including echo, will always output it at the point you run the command (unless you've also called some buffering functions).

So your problem sounds more to do with HTML/CSS, so I'd start by forgetting about the PHP and just looking at the source code or inspect element of the page that it has produced. Once you've found out what the problem is, then you can go back to the PHP and make the needed corrections.

Django x2 said:
an alternative for echoing the HTML?

It's best to write as much of the HTML as you can in HTML mode (i.e. not within PHP <? ?> tags). Then you can insert individual variables or statements as needed using the short hand syntax, like so:

Code:

<title><?=$my_title?></title>

inogen · 14 Jun 2013 at 00:50

Is the container div floated, absolutely or relatively positioned?

Tables are inline elements and if they don't fit inside non-inline containers they can position themselves inline, ie where they can fit, ie at the bottom of or the end of a non-inline element.

Either way, it's nothing to do with echo.

Also - shouldn't search results be displayed as a list?

Django x2 · 14 Jun 2013 at 08:15

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:

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:

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

visibleman · 14 Jun 2013 at 12:57

I haven't tested this but this should work -

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);
    				?>
    				<h3>You have searched for <?php echo($query); ?>...Please find the details of <?php echo($query); ?>...</h3>");
    				<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>
    				<?php
    					$result = mysql_query("SELECT `name`, `email`, `telephone`, `address` 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))
    						{
    				?>
                        <tr align='center' bgcolor='#93dafb'>
                            <td><?php echo($results['name']); ?></td>
                            <td><?php echo($results['email']); ?></td>")
                            <td><?php echo($results['telephone']); ?></td>
                            <td><?php echo($results['address']); ?></td>
                        </tr>
                    <?php
    						}
    					} else {
    				?>
    		            <tr align='center' bgcolor='#fdee03'>
                            <td colspan='2' height='25px'>Sorry..No results for <?php echo($query); ?></td>
                        </tr>
                    <?php
    		            }
                    ?>
                        </table>
                    <?php
    	                } else {
    	            ?>
    		                Your search keyword must have at least <?php echo($min_length); ?>
                    <?php
                        }
                    ?>
                    </p>
                </div>
                <br style="clear: both;">
            </div><!--end inner-->

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

Note i've broken out for HTML tags, purely for syntax highlighting in my editor and how i was taught; there is no advantage otherwise and you can echo the HTML data if need be.

Django x2 · 14 Jun 2013 at 15:52

This is great. Thanks very much

t31os · 15 Jun 2013 at 11:14

PHP:

<!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>
<link rel="stylesheet" href="path/to/your/style.css" />
</head>

<body>

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

                <div class="centered">
                    
                <?php
                $query = $_GET['query'];
                $min_length = 3;
                
                if( strlen( $query ) >= $min_length ) {
                    
                    $query = htmlspecialchars( $query );
                    $query = mysql_real_escape_string( $query );    
                    ?>
                    
                    <h3>You have searched for <?php echo $query; ?>...Please find the details of <?php echo $query; ?>...</h3>";
                    
                    <?php
                    // Easier to read(and you don't need all those little backticks)
                    $contacts = mysql_query("
                        SELECT name, email, telephone, address 
                        FROM contacts 
                        WHERE (name LIKE '%{$query}%') 
                            OR (email LIKE '%{$query}%') 
                            OR (telephone LIKE '%{$query}%') 
                            OR (address LIKE '%{$query}%')
                    ") or die( mysql_error() );
                    
                    // If results
                    if( mysql_num_rows( $contacts ) > 0 ) {
                    ?>
                    
                    <table id="contact-list">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Telephone</th>
                                <th>Address</th>
                            </tr>
                        </thead>
                        <tbody>
                        
                        <?php while( $contact = mysql_fetch_array( $contacts ) ) : ?>
                        
                            <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>
                            </tr>
                        
                        <?php endwhile; ?>
                        
                        </tbody>
                    </table>
                        
                    <?php
                    }
                    
                    // Else no results
                    else {
                        ?>
                        
                        <p>Sorry.. No results for <?php echo $query; ?></p>
                        
                        <?php
                    }
                    
                }
                
                // Else string length of query too short
                else {
                    ?>
                        
                    <p>Your search keyword must have at least <?php echo $min_length; ?> characters.</p>
                        
                    <?php
                }
                ?>
                
                </div>
                
                <br class="clear">
            
            </div>
            <!--end inner-->

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

Styling should be in your stylesheet, lose the inline styling..

Code:

.clear { clear:both }
#contact-list { /* table styling */ }
#contact-list th { font-weight: bold;background-color:#03acfa; }
#contact-list td { background-color:#93dafb; }
#contact-list td.contact-name {}
#contact-list td.contact-email {}
#contact-list td.contact-telephone {}
#contact-list td.contact-address {}

Django x2 · 15 Jun 2013 at 12:06

Ahh, that's nice too. Thanks.

What would I need to do to the CSS to align the table to the center and add some small padding and spacing to the cells?

t31os · 16 Jun 2013 at 10:10

Do you mean center align the table, or the contents of the table?

Center align the table.

Code:

#contact-list { margin:0 auto; }

Center align and pad table body.

Code:

#contact-list td { text-align:center;background-color:#93dafb;padding:5px; }

Simple CSS examples can be found here.
http://www.w3schools.com/css/

I'm around if you need further help though..

Django x2 · 16 Jun 2013 at 20:50

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>

Django x2 · 17 Jun 2013 at 11:26

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>

lordhughes · 17 Jun 2013 at 11:36

I know your problem has been solved but

Django x2 said:
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.
Thanks

This is not a case to avoid a table though, it provides an easy way to display rows from a database, its perfect for the job. Tables for layout is wrong, but you are using them correctly.

Sorry I know this is not relevant to your question but just wanted to say that.

t31os · 17 Jun 2013 at 14:57

lordhughes said:
I know your problem has been solved but

This is not a case to avoid a table though, it provides an easy way to display rows from a database, its perfect for the job. Tables for layout is wrong, but you are using them correctly.

Sorry I know this is not relevant to your question but just wanted to say that.

Definitely, tables are perfectly fine for tabular data..