jwnrb
asked on
How do I center horizontally nested DIV buttons
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!
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>
When centering divs, you want to set your margins to auto. I believe this is also compliant with W3C standards.
ASKER
Didn't seem to make a difference on my end.
Would it be possible to post a sample URL so I can see what's happening visually? Thank you.
ASKER
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
http://www.weinraub.net/demo.php
Okay, that does look cool, by the way.
Try this different margin approach.
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>
ASKER
Nope, looks the same to me, still.
Weird, i know! :-/
Weird, i know! :-/
ASKER
Is it possible that how I centre everything on the horizon causing this not to work, possibly?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I would take Kravs advice, he knows what he's talking about more than me. Thanks, Krav!
ASKER
Wicked!
ASKER
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.
I want to be fair here.
Open in new window