Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How do I center horizontally nested DIV buttons

Posted on 2009-04-08
13
Medium Priority
?
1,865 Views
Last Modified: 2013-11-19
I have a nested DIV to created a cool looking button but I can't get it to centre properly in my table.  This is problematic in both IE and FF.  

Any advise is appreciated!
<!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>Discount-o-Matic :: Query</title>
<style type="text/css">
 
html, body
{
	height: 100%;         /* required */	
}
 
body
{
	text-align: center;   /* horizontal centering hack for IE */
	padding: 0;           /* required to "hide" distance div */
	margin: 0;            /* required to "hide" distance div */
	font-family:Arial, Helvetica, sans-serif;     /* optional font */
	font-size:12px;       /* optional size */
	color: #000000;       /* optional colour */
 
}
 
div#horizon
{
	margin-bottom: -10em; /* half of content height */
	background: red;      /* temporary - used to see div */
	width: 1px;           /* required to "hide" distance div */
	height: 50%;          /* required */
	float: left;          /* required */
}
 
div#content
{
	position: relative;   /* positions content on top of distance */
	text-align: left;     /* horizontal centering hack for IE */
	height: 20em;         /* required - desired height */
	width: 40em;          /* required - desired width */
	background: #f9fbfd;        /* cosmetic */
	border: 1px solid #d7e5f2;  /* cosmetic */
	border-collapse: collapse;  /* cosmetic */
	padding: 5px;					 /* cosmetic */
	margin: 0 auto;       /* required */
	clear: left;          /* required */
	
}
 
form
{
   text-align:center;
}
 
input.tiny
{
	border: 1px solid #99b3b4;
	width: 50px;
	background: #e4ebeb;
	font: 11px verdana, sans-serif;
	color:#009900;
	padding:3px;
	margin-bottom:4px;
	outline:none;
}
 
input.tiny:focus 
{
	border:1px solid #567475;
	background: #e4ebeb;
}
 
/* BUTTONS */
 
.buttons a, .buttons button
{
    display:block;
    float:left;
    margin:0 7px 0 0; 
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
 
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
 
.buttons button
{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
 
.buttons button[type]
{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
 
*:first-child+html button[type]
{
    padding:4px 10px 3px 7px; /* IE7 */
}
 
.buttons button img, .buttons a img
{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}
 
/* STANDARD */
 
button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}
 
/* POSITIVE */
 
button.positive, .buttons a.positive
{
    color:#529214;
}
 
.buttons a.positive:hover, button.positive:hover
{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
 
.buttons a.positive:active
{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}
 
/* NEGATIVE */
 
.buttons a.negative, button.negative
{
    color:#d12f19;
}
 
.buttons a.negative:hover, button.negative:hover
{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
 
.buttons a.negative:active
{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}
 
</style>
</head>
 
<body>
<?php include_once("db.php"); ?>
	
<div id="horizon"></div>
<div id="content">
   <!-- absolutely centred content -->
  
   <?php
    if ( isset( $_POST['authCode'] ) )
	 {
	    $authLookup = strtoupper($_POST['authCode']);
       $database = "discount-o-matic";
		 $query    = "SELECT customer, location, discount, competition, reason, authCode, camera, name FROM discount 
INNER JOIN cameras ON discount.cid = cameras.cid
INNER JOIN salesmen ON discount.uid = salesmen.uid
WHERE authCode = '$authLookup'";
          @mysql_connect($sql['host'], $sql['user'], $sql['pass']);
          mysql_select_db($database);
          $result = mysql_query($query);
          while ( $row = mysql_fetch_object( $result ) )
          { 
			    // replace with a table
				 // and centre results; 
             echo "Customer: " . "<strong>$row->customer</strong><br />";
				 echo "Location: " . "<strong>$row->location</strong><br />";
				 echo "Discount: " . "<strong>$row->discount</strong><br />";
				 echo "Competition: " . "<strong>$row->competition</strong><br />";
				 echo "Reason: " . "<strong>$row->reason</strong><br />";
				 echo "Authorization Code: " . "<strong>$row->authCode</strong><br />";
				 echo "Camera: " . "<strong>$row->camera</strong><br />";
				 echo "Salesman: " . "<strong>$row->name</strong><br />";				 
          }
             mysql_free_result($result);
	 }
	 else
	 {
	 // this needs to be centred too, the button and shiznit
?>   
   <form id="frmQuery" name="frmQuery" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
      <p>Please Key in the Authorization Code to Query the Database </p>
      <p>
         <input name="authCode" type="text" class="tiny" id="authCode" />
      </p>
		<div class="buttons">
         <button type="submit" class="positive"><img src="/images/icons/database_go.png" alt=""/> 
        		Query the Database</button>
      </div>
      </p>
   </form>
 <?php } ?>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:jwnrb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
13 Comments
 
LVL 14

Expert Comment

by:EMB01
ID: 24099555
Try putting a container class around your buttons div as attached.
<!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>Discount-o-Matic :: Query</title>
<style type="text/css">
 
html, body
{
	height: 100%;         /* required */	
}
 
body
{
	text-align: center;   /* horizontal centering hack for IE */
	padding: 0;           /* required to "hide" distance div */
	margin: 0;            /* required to "hide" distance div */
	font-family:Arial, Helvetica, sans-serif;     /* optional font */
	font-size:12px;       /* optional size */
	color: #000000;       /* optional colour */
 
}
 
div#horizon
{
	margin-bottom: -10em; /* half of content height */
	background: red;      /* temporary - used to see div */
	width: 1px;           /* required to "hide" distance div */
	height: 50%;          /* required */
	float: left;          /* required */
}
 
div#content
{
	position: relative;   /* positions content on top of distance */
	text-align: left;     /* horizontal centering hack for IE */
	height: 20em;         /* required - desired height */
	width: 40em;          /* required - desired width */
	background: #f9fbfd;        /* cosmetic */
	border: 1px solid #d7e5f2;  /* cosmetic */
	border-collapse: collapse;  /* cosmetic */
	padding: 5px;					 /* cosmetic */
	margin: 0 auto;       /* required */
	clear: left;          /* required */
	
}
 
form
{
   text-align:center;
}
 
input.tiny
{
	border: 1px solid #99b3b4;
	width: 50px;
	background: #e4ebeb;
	font: 11px verdana, sans-serif;
	color:#009900;
	padding:3px;
	margin-bottom:4px;
	outline:none;
}
 
input.tiny:focus 
{
	border:1px solid #567475;
	background: #e4ebeb;
}
 
div#container {
 
  text-align: center ;
  margin-left: auto ;
  margin-right: auto ;
 
}
/* BUTTONS */
 
.buttons a, .buttons button
{
    display:block;
    float:left;
    margin:0 7px 0 0; 
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
 
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
 
.buttons button
{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
 
.buttons button[type]
{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
 
*:first-child+html button[type]
{
    padding:4px 10px 3px 7px; /* IE7 */
}
 
.buttons button img, .buttons a img
{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}
 
/* STANDARD */
 
button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}
 
/* POSITIVE */
 
button.positive, .buttons a.positive
{
    color:#529214;
}
 
.buttons a.positive:hover, button.positive:hover
{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
 
.buttons a.positive:active
{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}
 
/* NEGATIVE */
 
.buttons a.negative, button.negative
{
    color:#d12f19;
}
 
.buttons a.negative:hover, button.negative:hover
{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
 
.buttons a.negative:active
{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}
 
</style>
</head>
 
<body>
<?php include_once("db.php"); ?>
	
<div id="horizon"></div>
<div id="content">
   <!-- absolutely centred content -->
  
   <?php
    if ( isset( $_POST['authCode'] ) )
	 {
	    $authLookup = strtoupper($_POST['authCode']);
       $database = "discount-o-matic";
		 $query    = "SELECT customer, location, discount, competition, reason, authCode, camera, name FROM discount 
INNER JOIN cameras ON discount.cid = cameras.cid
INNER JOIN salesmen ON discount.uid = salesmen.uid
WHERE authCode = '$authLookup'";
          @mysql_connect($sql['host'], $sql['user'], $sql['pass']);
          mysql_select_db($database);
          $result = mysql_query($query);
          while ( $row = mysql_fetch_object( $result ) )
          { 
			    // replace with a table
				 // and centre results; 
             echo "Customer: " . "<strong>$row->customer</strong><br />";
				 echo "Location: " . "<strong>$row->location</strong><br />";
				 echo "Discount: " . "<strong>$row->discount</strong><br />";
				 echo "Competition: " . "<strong>$row->competition</strong><br />";
				 echo "Reason: " . "<strong>$row->reason</strong><br />";
				 echo "Authorization Code: " . "<strong>$row->authCode</strong><br />";
				 echo "Camera: " . "<strong>$row->camera</strong><br />";
				 echo "Salesman: " . "<strong>$row->name</strong><br />";				 
          }
             mysql_free_result($result);
	 }
	 else
	 {
	 // this needs to be centred too, the button and shiznit
?>   
   <form id="frmQuery" name="frmQuery" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
      <p>Please Key in the Authorization Code to Query the Database </p>
      <p>
         <input name="authCode" type="text" class="tiny" id="authCode" />
      </p>
                  <div class="container">
		<div class="buttons">
         <button type="submit" class="positive"><img src="/images/icons/database_go.png" alt=""/> 
        		Query the Database</button>
      </div>
      </div>
      </p>
   </form>
 <?php } ?>
</div>
</body>
</html>

Open in new window

0
 
LVL 14

Expert Comment

by:EMB01
ID: 24099582
When centering divs, you want to set your margins to auto. I believe this is also compliant with W3C standards.
0
 

Author Comment

by:jwnrb
ID: 24100389
Didn't seem to make a difference on my end.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 14

Expert Comment

by:EMB01
ID: 24100617
Would it be possible to post a sample URL so I can see what's happening visually? Thank you.
0
 

Author Comment

by:jwnrb
ID: 24101064
This is not on my production server (its on my personal server), I don't have the database running here, but that is okay anyways.  The button still behaves the same, regardless.

http://www.weinraub.net/demo.php
0
 
LVL 14

Expert Comment

by:EMB01
ID: 24101150
Okay, that does look cool, by the way.

Try this different margin approach.
<!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>Discount-o-Matic :: Query</title>
<style type="text/css">
 
html, body
{
	height: 100%;         /* required */	
}
 
body
{
	text-align: center;   /* horizontal centering hack for IE */
	padding: 0;           /* required to "hide" distance div */
	margin: 0;            /* required to "hide" distance div */
	font-family:Arial, Helvetica, sans-serif;     /* optional font */
	font-size:12px;       /* optional size */
	color: #000000;       /* optional colour */
 
}
 
div#horizon
{
	margin-bottom: -10em; /* half of content height */
	background: red;      /* temporary - used to see div */
	width: 1px;           /* required to "hide" distance div */
	height: 50%;          /* required */
	float: left;          /* required */
}
 
div#content
{
	position: relative;   /* positions content on top of distance */
	text-align: left;     /* horizontal centering hack for IE */
	height: 20em;         /* required - desired height */
	width: 40em;          /* required - desired width */
	background: #f9fbfd;        /* cosmetic */
	border: 1px solid #d7e5f2;  /* cosmetic */
	border-collapse: collapse;  /* cosmetic */
	padding: 5px;					 /* cosmetic */
	margin: 0 auto;       /* required */
	clear: left;          /* required */
	
}
 
form
{
   text-align:center;
}
 
input.tiny
{
	border: 1px solid #99b3b4;
	width: 50px;
	background: #e4ebeb;
	font: 11px verdana, sans-serif;
	color:#009900;
	padding:3px;
	margin-bottom:4px;
	outline:none;
}
 
input.tiny:focus 
{
	border:1px solid #567475;
	background: #e4ebeb;
}
 
div#container {
 
  text-align: center ;
  margin: 0 auto ;
 
}
/* BUTTONS */
 
.buttons a, .buttons button
{
    display:block;
    float:left;
    margin:0 7px 0 0; 
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
 
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
 
.buttons button
{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
 
.buttons button[type]
{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
 
*:first-child+html button[type]
{
    padding:4px 10px 3px 7px; /* IE7 */
}
 
.buttons button img, .buttons a img
{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}
 
/* STANDARD */
 
button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}
 
/* POSITIVE */
 
button.positive, .buttons a.positive
{
    color:#529214;
}
 
.buttons a.positive:hover, button.positive:hover
{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
 
.buttons a.positive:active
{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}
 
/* NEGATIVE */
 
.buttons a.negative, button.negative
{
    color:#d12f19;
}
 
.buttons a.negative:hover, button.negative:hover
{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
 
.buttons a.negative:active
{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}
 
</style>
</head>
 
<body>
<?php include_once("db.php"); ?>
	
<div id="horizon"></div>
<div id="content">
   <!-- absolutely centred content -->
  
   <?php
    if ( isset( $_POST['authCode'] ) )
	 {
	    $authLookup = strtoupper($_POST['authCode']);
       $database = "discount-o-matic";
		 $query    = "SELECT customer, location, discount, competition, reason, authCode, camera, name FROM discount 
INNER JOIN cameras ON discount.cid = cameras.cid
INNER JOIN salesmen ON discount.uid = salesmen.uid
WHERE authCode = '$authLookup'";
          @mysql_connect($sql['host'], $sql['user'], $sql['pass']);
          mysql_select_db($database);
          $result = mysql_query($query);
          while ( $row = mysql_fetch_object( $result ) )
          { 
			    // replace with a table
				 // and centre results; 
             echo "Customer: " . "<strong>$row->customer</strong><br />";
				 echo "Location: " . "<strong>$row->location</strong><br />";
				 echo "Discount: " . "<strong>$row->discount</strong><br />";
				 echo "Competition: " . "<strong>$row->competition</strong><br />";
				 echo "Reason: " . "<strong>$row->reason</strong><br />";
				 echo "Authorization Code: " . "<strong>$row->authCode</strong><br />";
				 echo "Camera: " . "<strong>$row->camera</strong><br />";
				 echo "Salesman: " . "<strong>$row->name</strong><br />";				 
          }
             mysql_free_result($result);
	 }
	 else
	 {
	 // this needs to be centred too, the button and shiznit
?>   
   <form id="frmQuery" name="frmQuery" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
      <p>Please Key in the Authorization Code to Query the Database </p>
      <p>
         <input name="authCode" type="text" class="tiny" id="authCode" />
      </p>
                  <div class="container">
		<div class="buttons">
         <button type="submit" class="positive"><img src="/images/icons/database_go.png" alt=""/> 
        		Query the Database</button>
      </div>
      </div>
      </p>
   </form>
 <?php } ?>
</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:jwnrb
ID: 24101414
Nope, looks the same to me, still.  
Weird, i know! :-/
0
 

Author Comment

by:jwnrb
ID: 24101437
Is it possible that how I centre everything on the horizon causing this not to work, possibly?
0
 
LVL 43

Accepted Solution

by:
David S. earned 800 total points
ID: 24101554
You gave ".buttons button" float:left which left aligns it. To center it don't float it and give it "margin:0 auto", as EMB01 suggested.
0
 
LVL 14

Assisted Solution

by:EMB01
EMB01 earned 800 total points
ID: 24101583
... Well, then; this may seem pathetic but it can't hurt!
<!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>Discount-o-Matic :: Query</title>
<style type="text/css">
 
html, body
{
	height: 100%;         /* required */	
}
 
body
{
	text-align: center;   /* horizontal centering hack for IE */
	padding: 0;           /* required to "hide" distance div */
	margin: 0;            /* required to "hide" distance div */
	font-family:Arial, Helvetica, sans-serif;     /* optional font */
	font-size:12px;       /* optional size */
	color: #000000;       /* optional colour */
 
}
 
div#horizon
{
	margin-bottom: -10em; /* half of content height */
	background: red;      /* temporary - used to see div */
	width: 1px;           /* required to "hide" distance div */
	height: 50%;          /* required */
	float: left;          /* required */
}
 
div#content
{
	position: relative;   /* positions content on top of distance */
	text-align: left;     /* horizontal centering hack for IE */
	height: 20em;         /* required - desired height */
	width: 40em;          /* required - desired width */
	background: #f9fbfd;        /* cosmetic */
	border: 1px solid #d7e5f2;  /* cosmetic */
	border-collapse: collapse;  /* cosmetic */
	padding: 5px;					 /* cosmetic */
	margin: 0 auto;       /* required */
	clear: left;          /* required */
	
}
 
form
{
   text-align:center;
}
 
input.tiny
{
	border: 1px solid #99b3b4;
	width: 50px;
	background: #e4ebeb;
	font: 11px verdana, sans-serif;
	color:#009900;
	padding:3px;
	margin-bottom:4px;
	outline:none;
}
 
input.tiny:focus 
{
	border:1px solid #567475;
	background: #e4ebeb;
}
 
div#container {
 
  text-align: center ;
  margin: 0 auto ;
 
}
/* BUTTONS */
 
.buttons a, .buttons button
{
    display:block;
    float:left;
    margin:0 7px 0 0; 
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
 
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
 
.buttons button
{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
 
.buttons button[type]
{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
 
*:first-child+html button[type]
{
    padding:4px 10px 3px 7px; /* IE7 */
}
 
.buttons button img, .buttons a img
{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}
 
/* STANDARD */
 
button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}
 
/* POSITIVE */
 
button.positive, .buttons a.positive
{
    color:#529214;
}
 
.buttons a.positive:hover, button.positive:hover
{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
 
.buttons a.positive:active
{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}
 
/* NEGATIVE */
 
.buttons a.negative, button.negative
{
    color:#d12f19;
}
 
.buttons a.negative:hover, button.negative:hover
{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
 
.buttons a.negative:active
{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}
 
</style>
</head>
 
<body>
<?php include_once("db.php"); ?>
	
<div id="horizon"></div>
<div id="content">
   <!-- absolutely centred content -->
  
   <?php
    if ( isset( $_POST['authCode'] ) )
	 {
	    $authLookup = strtoupper($_POST['authCode']);
       $database = "discount-o-matic";
		 $query    = "SELECT customer, location, discount, competition, reason, authCode, camera, name FROM discount 
INNER JOIN cameras ON discount.cid = cameras.cid
INNER JOIN salesmen ON discount.uid = salesmen.uid
WHERE authCode = '$authLookup'";
          @mysql_connect($sql['host'], $sql['user'], $sql['pass']);
          mysql_select_db($database);
          $result = mysql_query($query);
          while ( $row = mysql_fetch_object( $result ) )
          { 
			    // replace with a table
				 // and centre results; 
             echo "Customer: " . "<strong>$row->customer</strong><br />";
				 echo "Location: " . "<strong>$row->location</strong><br />";
				 echo "Discount: " . "<strong>$row->discount</strong><br />";
				 echo "Competition: " . "<strong>$row->competition</strong><br />";
				 echo "Reason: " . "<strong>$row->reason</strong><br />";
				 echo "Authorization Code: " . "<strong>$row->authCode</strong><br />";
				 echo "Camera: " . "<strong>$row->camera</strong><br />";
				 echo "Salesman: " . "<strong>$row->name</strong><br />";				 
          }
             mysql_free_result($result);
	 }
	 else
	 {
	 // this needs to be centred too, the button and shiznit
?>   
   <form id="frmQuery" name="frmQuery" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
      <p>Please Key in the Authorization Code to Query the Database </p>
      <p>
         <input name="authCode" type="text" class="tiny" id="authCode" />
      </p>
                  <div class="container">
		<div class="buttons">
<p align="center">
         <button type="submit" class="positive"><img src="/images/icons/database_go.png" alt=""/> 
        		Query the Database</button>
</p>
      </div>
      </div>
      </p>
   </form>
 <?php } ?>
</div>
</body>
</html>

Open in new window

0
 
LVL 14

Expert Comment

by:EMB01
ID: 24101596
I would take Kravs advice, he knows what he's talking about more than me. Thanks, Krav!
0
 

Author Comment

by:jwnrb
ID: 24101744
Wicked!
0
 

Author Comment

by:jwnrb
ID: 24101764
So, was it simply just making that ONE change, or in conjunction with the other changes that EMB offered?  Should points be split?

I want to be fair here.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question