Hey,
Whenever I try and put in a form box, it automatically expands the page on my site, regardless of whether the page is .php or .html
I have tried CSS to format the width, but nothing I have tried works. It looks like something is wrong in my coding, because when I try and place a form on an unrelated page it works and alters its width to whatever I want.
Below is an image showing how the table expands once I put a form into it.
And here is the XHTML for my page:
Code:
<?php
session_cache_limiter('none');
session_start();
ob_start();
?>
<!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 name="Description" content="Helping to build the Valley Zoo by raising awareness and funds for our animals in our backyard." />
<meta name="Keywords" content="Valley Zoo Development Society, Valley Zoo, Fund Raising, Edmonton, Alberta, Canada" />
<title>The Valley Zoo Development Society - School and Group Packages</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="java.js"></script>
</head>
<body>
<div id="body-container">
<div id="page-container">
<!-- Main Navigation -->
<div id="links">
<ul id="nav">
<li>
<div class="divlink"><a href="index.html">Home</a></div>
</li>
<li>
<div class="divlink"><a href="mission.html">About Us</a></div>
<ul>
<li><a href="mission.html">Who We Are</a></li>
<li><a href="board.html">Board Members</a></li>
</ul>
</li>
<li>
<div class="divlink"><a href="master.html">Support the Zoo</a></div>
<ul>
<li><a href="wishlist.html">Wish List</a></li>
<li><a href="donations.html">Donations</a></li>
<li><a href="sponsors.html">Sponsors</a></li>
<li><a href="adopt.html">Adopt An Animal</a></li>
</ul>
</li>
<li>
<div class="divlink"><a href="master.html">Projects</a></div>
<ul>
<li><a href="master.html">Master Plan</a></li>
<li><a href="developments.html">Developments</a></li>
</ul>
</li>
<li>
<div class="divlink"><a href="giftshop.html">At the Zoo</a></div>
<ul>
<li><a href="events.html">Events</a></li>
<li><a href="giftshop.html">Gift Shop</a></li>
<li><a href="elephantart.html">Elephant Art</a></li>
<li><a href="arrivals.html">New Arrivals</a></li>
<li><a href="news.html">Zoo News</a></li>
</ul>
</li>
<li>
<div class="divlink"><a href="contact.html">Contact Us</a></div>
</li>
</ul>
</div>
<!-- Header and Sidebar Content -->
<div id="header-container">
<div id="left-sidebar"><img src="images/images_02.jpg" alt="Valley Zoo Development Society" width="252" height="68" />
<a href="adopt.html"><img src="images/Adoption.jpg" alt="Adopt An Animal" width="252" height="40" /></a>
<div id="sidebar-links">
<img src="images/paw.jpg" alt="Paw" width="17" height="17" /> <a href="http://www.valleyzoo.ca/pages/Zoo_GeneralInfo/default.aspx"><strong>Our Location</strong></a><br />
<img src="images/paw.jpg" alt="Paw" width="17" height="17" /> <a href="http://www.valleyzoo.ca/pages/Zoo_PlanVisit/default.aspx"><strong>Plan Your Visit</strong></a><br />
<img src="images/paw.jpg" alt="Paw" width="17" height="17" /> <a href="events.html"><strong>VZDS Events</strong></a>
</div>
<br />
<img src="images/sidenews8.jpg" alt="News" width="252" height="266" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="6,27,72,116" href="adoptform.php" alt="Adoption Form" />
</map>
<br />
<a href="http://www.amphibianark.org/index.htm"><img src="images/frog.jpg" alt="Amphibian Ark" width="237" height="80" /></a><br /><br />
<script language="php">
include "vsavzds/db_conn_open.php";
include "vsavzds/includes.php";
include "vsavzds/inc/languagefile.php";
include "vsavzds/inc/incfunctions.php";
include "vsavzds/inc/incminicart.php";
</script>
</div>
<div id="header"><img src="images/flash21.jpg" alt="Valley Zoo Development Society" width="516" height="178" /></div>
<!-- Content -->
<div id="content">
<div class="newspaper"><h2>School and Group Packages</h2></div>
<img src="images/adoptananimal.jpg" alt="Adopt An Animal" width="160" height="228" class="floatRight" />
<br />
Here is a list of all of our Adopt an Animal packages. The animals that are listed in each package can be customized to the animal of your choice. There are packages for schools, businesses, and individuals. Click on the link that interests you.
<p>You can either <a href="contact.html"><strong>contact us</strong></a> to adopt an animal, or you can directly adopt an animal online by clicking on the "Add to Cart" button beneath the adoption package of your choice.</p>
<p><a href="school.html"><strong>* School and Group Packages</strong></a></p>
<p><a href="business.html"><strong>* Business Packages</strong></a></p>
<p><a href="individual.html"><strong>* Individual Packages</strong></a></p>
<p><a href="custom.html"><strong>* Custom Package Animal List</strong></a></p>
<br /><br />
<table cellpadding="10" class="adopt-table">
<tr>
<td class="adopt-tablea">School and Group Packages</td>
</tr>
<tr class="adopt-tableb">
<td>$50 Basic Package</td>
</tr>
<tr class="adopt-tablec">
<td><p>- Choice of North American or Australian animals.<br />
- Adoption Certificate<br />
- Animal Fact Sheet<br />
- Unframed 8X10 Photo<br />
- Name displayed on Donor Board<br />
- Tax Receipt
<form method="post" name="tForm0" action="cart.php" onsubmit="return formvalidator0(this)">
Choose an animal:<br />
<select class="prodoption" onChange="updateprice0();" name="optn0" size="1">
<option value="">Please Select</option>
<option value="40">Arctic Wolf</option>
<option value="41">Arctic Fox</option>
<option value="42">Swift Fox</option>
<option value="43">Great Horned Owl</option>
<option value="44">Bald Eagle</option>
<option value="45">White Pelican</option>
<option value="46">Harbour Seal</option>
<option value="47">Skunk</option>
<option value="48">Sulfur-Crested Cockatoo</option>
<option value="49">Children's Python</option>
<option value="50">Red-Necked Wallaby</option>
<option value="51">Laughing Kookaburra</option>
<option value="52">Blue-Tongued Skink</option>
<option value="53">Emu</option>
</select>
<br />
<br />
<input type="hidden" name="id" value="SGPBO1" />
<input type="hidden" name="mode" value="add" />
<input type="hidden" name="frompage" value="/school.php" />
<input align="middle" type="image" src="images/addtocart.jpg" border="0" alt="Add to cart" />
</form> </td>
</tr>
<tr class="adopt-tableb">
<td>$125 Lucy the Elephant Package</td>
</tr>
<tr class="adopt-tablec">
<td><p>- Adoption Certificate<br />
- Asian Elephant Fact Sheet<br />
- Elephant Painting History Fact Sheet<br />
- Unframed 8X10 Photo of Lucy<br />
- Unframed 8X10 Print of a Painting by Lucy<br />
- Name displayed on Donor Board<br />
- Tax Receipt</p>
<p> </p></td>
</tr>
<tr class="adopt-tableb">
<td>$250 Bronze Package</td>
</tr>
<tr class="adopt-tablec">
<td>- Choice of South American or North American animal<br />
- Includes everything in the $50 package, plus:<br />
- 30 4x6 photos of Adopted animal</td>
</tr>
<tr class="adopt-tableb">
<td>$500 Silver</td>
</tr>
<tr class="adopt-tablec">
<td>- Choice of South American or African animal<br />
- Includes everything in the $50 package, plus:<br />
- 30 Adopt an Animal gift items</td>
</tr>
<tr class="adopt-tableb">
<td>$750 Gold Package</td>
</tr>
<tr class="adopt-tablec">
<td>- Choice of African or Asian animal<br />
- Includes everything in the $50 package, plus:<br />
- Admission to the Valley Zoo for 30 students and 6 chaperones</td>
</tr>
<tr class="adopt-tableb">
<td>$1000 Platinum Package</td>
</tr>
<tr class="adopt-tablec">
<td>- Choice of SSP Animals – Grevy’s Zebra, Amur Tiger, Snow Leopard, Goeldi’s Monkey, Red Panda<br />
- Includes everything in the $50 package, plus:<br />
- 30 Adopt an Animal gift items<br />
- 30 4x6 photos of Adopted animal<br />
- Admission to the Valley Zoo for 30 students and 6 chaperones</td>
</tr>
</table>
<p>Custom Packages are available. To inquire, please call us at (780) 496-6924 or e-mail <a href="mailto:adoptananimal@buildingthevalleyzoo.com"><strong>adoptananimal@buildingthevalleyzoo.com</strong></a>.</p>
<div id="logo-contentb">
<img src="images/logo.gif" alt="Valley Zoo Development Society" width="156" height="80" />
</div>
<br />
</div></div>
<!-- Bottom Infomation -->
<div id="bottom-container">
<div id="bottom-contenta">
<img src="images/credit2.jpg" alt="Credit" width="167" height="27" usemap="#Map2" />
<map name="Map2" id="Map2">
<area shape="rect" coords="88,2,158,13" href="http://www.alphaberrydesign.com" alt="Holly Duvall" />
<area shape="rect" coords="89,17,146,24" href="http://www.spiritvalley.org/" alt="Craig Roper" />
</map>
</div>
<div id="bottom-contentb">
Charitable # BN 88639 7595 RR 0001<br />
© 2008 Valley Zoo Development Society.</div>
</div>
</div>
</div>
</body>
</html>
And then my CSS:
Code:
/* CSS Document */
body {
background-image:url(images/bg1.gif);
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
/* Content Containers ------------------------- */
#body-container {border:3px;
width:797px;
margin:auto;
border-color:#000000;
border-style:solid;
}
#page-container {margin:auto;
width:780px;
border:8px;
border-color:#FFFFFF;
border-style:solid;
background-color:#FFFFFF;
}
#links {background-color:#818F5A;
width:760px;
padding:10px;
min-height:30px;
}
#header-container {background-color:#FFFFFF;
width:780px;
padding-top:10px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}
#left-sidebar {background-color:#FFFFFF;
float:left;
width: 264px;
}
#sidebar-links {background-color:#F18139;
width:242px;
padding:5px;
min-height:60px;
}
#header {float:right;
display: inline;
background-color:#FFFFFF;
padding-top:0px;
padding-bottom:15px;
padding-left:0px;
padding-right:0px;
}
#sidebar-links img {
vertical-align:bottom;
}
#left-sidebar img {
vertical-align:bottom;
}
#content {background-color:#FFFFFF;
width:516px;
float:right;
display: inline;
}
#logo-contenta {width:360px;
float:left;
text-align:left;
}
#logo-contentb {margin-left:360px;
text-align:right;
}
#bottom-container {background-color:#6A0D18;
width:760px;
padding:10px;
font-size:10px;
color:#FFFFFF;
clear:both;
}
#bottom-contenta {width:360px;
float:left;
text-align:left;
}
#bottom-contentb {margin-left:360px;
text-align:right;
}
/* Styles ------------------------- */
.newspaper {background-color:#818F5A;
width:506px;
padding:5px;
color:#FFFFFF;
}
.giftshoplabels {background-color:#B6C63F;
width:104px;
padding:5px;
color:#FFFFFF;
float:left;
text-align:center;
border:1px;
border-color:#818F5A;
border-style:solid;
margin:5px;
}
.elephant-table {width:450px;
margin:auto;
text-align:center;
vertical-align:top;
}
.arrivals-table {width:425px;
margin:auto;
padding:5px;
text-align:left;
vertical-align:top;
}
.arrivals-tablea {width:150px;
margin:auto;
vertical-align:top;
}
.arrivals-tableb {background-color:#828F5A;
vertical-align:top;
}
.arrivals-tablec {background-color:#B6C63F;
vertical-align:top;
}
.arrivals-tabled {padding:5px;
vertical-align:top;
}
.adopt-table {width:500px;
vertical-align:top;
}
.adopt-tablea {
vertical-align:top;
text-align:center;
background-color:#818F5A;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
.adopt-tableb {
vertical-align:top;
background-color:#B6C63F;
text-align:center;
font-weight:bold;
width:500px;
padding:5px;
}
.adopt-tablec {width:500px;
padding:5px;
vertical-align:top;
}
.flash {float:left;
width:169px;
}
.flashb {float:left;
width:180px;
}
.logospacing {margin-right:80px;
text-align:center;
}
.center-align {text-align:center;
}
.right-align {text-align:right;
}
img {border: none;}
img.floatRight {float: right;
margin: 8px;
}
img.floatLeft {float: left;
margin: 8px;
}
.smalltexta {font-size:10px;
text-align:center;
}
h1 {padding:0px;
margin:0px;
}
h2 {margin:0px;
padding:0px;
font-size:18px;
}
h3 {margin:0px;
padding:0px;
font-size:14px;
}
form legend {color:#000000;
}
form {width:516px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}
form fieldset {border-color:#000000;
border-width:1px;
border-style:solid;
padding:10px;
}
.forma {width:200px;
vertical-align:top;
}
.miscformtables {width:480px;
}
.sentpage {font-size:16px;
color:#F3EBE2;
text-align:center;
font-weight:bold;
font-weight:bolder;
margin-top:40px;
}
#donation {width:242px;
float:left;
}
.donation {width:242px;
text-align:center;
}
#adopt {width:500px;
}
.adopt {width:490px;
}
.wishlisttable {width:500px;
margin:auto;
}
.wisha {background-color:#818F5A;
text-align:center;
font-weight:bold;
color:#FFFFFF;
}
.wishb {background-color:#B6C63F;
color:#FFFFFF;
font-weight:bold;
text-align:center;
}
TABLE.cobtbl{
background-color: #818F5A;
}
TD.cobhl{
background-color: #B6C63F;
}
TD.cobll{
background-color: #FFFFFF;
color : #000000;
}
TD.mincart {
font-size: 10px;
font-family: Arial;
background-color:#FFFFFF;
border:1px;
border-color:#000000;
border-style:solid;
}
P.mincart {
font-size: 10px;
font-family: Arial;
background-color:#FFFFFF;
border:1px;
border-color:#000000;
border-style:solid;
}
A:link{color:#6A0D18;text-decoration:none;}
A:visited{color:#6A0D18;text-decoration:none;}
A:active{color:#6A0D18;text-decoration:none;}
A:hover{color:#818F5A;text-decoration:none;}
/* Main Navigation ------------------------- */
.divlink a {
display: block;
width: 112px;
padding:5px;
border:2px;
border-color:#B6C63F;
border-style:solid;
background-color:#889953;
}
.divlink a:hover {
background-color:#B6C63F;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #FFFFFF;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-family:Arial, Helvetica, sans-serif;
font-weight: normal;
color: #FFFFFF;
font-size:14px;
}
#nav li li a:hover {
background-color:#B6C63F;
}
li {
float: left;
position: relative;
text-align: center;
cursor: default;
background-color: #889953;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #889953;
}
li>ul {
top: auto;
left: auto;
}
li li {padding:5px;
width:112px;
border-top:1px;
border-bottom:1px;
border-right:2px;
border-left:2px;
border-color:#B6C63F;
border-style:solid;
display: block;
float: none;
background-color: transparent;
}
li:hover ul, li.over ul {
display: block;
}
As always, any help is greatly appreciated! Thank you!
