Sidebar and Footer Dissapear When Submitting Form

HoldOrFold · 01-30-2012, 08:53 PM

Hi there,

I'm building an astrology website which revolves around a php calculation program.

I've used a CSS template for my website and have a question regarding an issue I'm having with using it in conjunction with my php calculation program.

The page in question is here:

http://www.realastrology.co.cc/astrology_scripts/midpointcalculator.php

Everything fine until you submit the form and it generates a new page with the resulting data output. The sidebar and the footer both dissapear for some reason possibly because the page is too long, but I'm not sure why this should affect anything.

Any help would be grately appreciated!

Here's the html for the page in question (note the PHP include for the calculation program):

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Real Astrology</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" href="http://realastrology.co.cc/images/EliteCircle.css" type="text/css" />

</head>

<body>

<div id="header">

  <div id="header-content">

    <h1 id="logo">Real<span class="orange">Astrology</span></h1>

    <h2 id="slogan">Your Home for Niche Astrology</h2>

    <div id="header-links">

      <p> <a href="http://www.realastrology.co.cc/">Home</a> | <a href="http://www.realastrology.co.cc/">Contact</a> | <a href="http://www.realastrology.co.cc/">Site Map</a> </p>

    </div>

    <ul>

      <li><a href="http://www.realastrology.co.cc/" id="current">Home</a></li>

      <li><a href="http://www.realastrology.co.cc/astrology_scripts/midpointcalculator.php">Midpoint Calculator</a></li>

      <li><a href="http://www.realastrology.co.cc/astrology_scripts/synastrycalculator.php">Synastry Midpoint Calculator</a></li>

      <li><a href="http://www.realastrology.co.cc/">About</a></li>

    </ul>

  </div>

</div>

<div id="content-wrap">

  <div id="content">

    <div id="main"> <a name="TemplateInfo"></a>

      <h1>Midpoint Calculation Tool</h1>

 

      <p><a href="http://www.realastrology.co.cc/"><img src="http://realastrology.co.cc/sample-image.jpg" width="174" height="140" alt="Jupiter"  class="float-left" /></a> Use this midpoint calculation tool by entering your birth data into the form below and submitting it. It will then calculate your midpoints and generate a page with natal planets, midpoints, aspects and interpretations.</p>

 

     



<?php include('natal_form_wheel.php'); ?>



    </div>    

    <div id="sidebar">

      

      <h1>Menu</h1>

      <ul class="sidemenu">

        <li><a href="http://www.realastrology.co.cc/">Home</a></li>

             </ul>

      <h1>Astrology Tools</h1>

      <ul class="sidemenu">

        <li><a href="http://www.realastrology.co.cc/">Midpoint Calculator</a></li>

        <li><a href="http://www.realastrology.co.cc/">Synastry Midpoint Calculator</a></li>

        <li><a href="http://www.realastrology.co.cc/">Transits to Midpoints</a></li>



      </ul>

      <h1>Wise Words</h1>

      <p>&quot;No man becomes rich unless he enriches others.&quot;</p>

      <p class="align-right">- Andrew Carnegie</p>

      <h1>Support Styleshout</h1>

      <p>If you are interested in supporting my work and would like to contribute, you are welcome to make a small donation through the <a href="http://www.styleshout.com/">donate link</a> on my website - it will be a great help and will surely be appreciated.</p>

    </div>

  </div>

</div>

<div id="footer">

  <div id="footer-content">



    <div class="col2 float-right">

      <p> &copy; copyright 2012 <strong>RealAstrology.co.cc</strong><br />

        Design by: <a href="http://www.styleshout.com/">styleshout</a> &nbsp; &nbsp; Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://validator.w3.org/check/referer">XHTML</a> </p>

    </div>

    

  </div>

</div>





<!-- Start of StatCounter Code for Default Guide -->

<script type="text/javascript">

var sc_project=7616896; 

var sc_invisible=1; 

var sc_security="fdac59ab"; 

</script>

<script type="text/javascript"

src="http://www.statcounter.com/counter/counter.js"></script>

<noscript><div class="statcounter"><a title="tumblr site

counter" href="http://statcounter.com/tumblr/"

target="_blank"><img class="statcounter"

src="http://c.statcounter.com/7616896/0/fdac59ab/1/"

alt="tumblr site counter"></a></div></noscript>

<!-- End of StatCounter Code for Default Guide -->





</body>

</html>

And here's the CSS Style Sheet:

Code:

/********************************************
   AUTHOR:  			Erwin Aligam 
   WEBSITE:   			<a href="http://www.styleshout.com/
" rel="nofollow">http://www.styleshout.com/
</a>	TEMPLATE NAME: 	EliteCircle
   TEMPLATE CODE: 	S-0012
   VERSION:          1.0	          	
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
/* top elements */
* { 
	padding: 0; margin: 0;
}
body {
	margin: 0; 	padding: 0;
	font: normal .70em/1.6em Verdana, 'Trebuchet MS', Tahoma, sans-serif;
	color: #666666;
	text-align: center;
	background: #180700;
}
 
/* links */
a {
	color:#CB4721; 
	background-color: inherit;
	text-decoration: none;	
}
a:hover {
	background-color: inherit;
	text-decoration: underline;
}
 
/* headers */
h1, h2, h3 {
	font: normal 1.8em Georgia, "Times New Roman", Times, serif;
	color:#222;
	letter-spacing:-1px;
}
h1 { font-size: 1.7em; } 
h2 { font-size: 1.5em; color:#74743D; }
h3 { font-size: 1.5em; color:#C34E23; font-weight: normal; letter-spacing: 0px;}
 
#main h1 { 
	font: normal 1.8em Georgia, "Times New Roman", Times, serif;
	color: #222; 	
	padding: 0 0 5px 0;
	margin: 0 15px 15px 15px;
	letter-spacing:-1px;
	background:url(../images/bk_dotted.gif) bottom left repeat-x;
}
#sidebar h1 {
	font: normal 1.7em Georgia, "Times New Roman", Times, serif;
	/* color: #74743D; */ 	
	color: #6C6E3A;
	padding: 0;
	margin: 0 0 10px 5px;	
	letter-spacing:-1px;	
}
 
p, h1, h2, h3 {
	margin: 10px 15px;
	padding: 0;
}
 
ul, ol {
	margin: 10px 30px;
	padding: 0 15px;	
}
 
/* images */
img {
	border: 1px solid #DADADA;
	padding: 5px;	
}
img.no-border {
	border: none;
}
img.float-right {
  margin: 5px 0px 5px 15px;  
}
img.float-left {
  margin: 5px 15px 5px 0px;
}
 
code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */   
  background: #FCFCF9;
  border: 1px solid #EFEFEF;
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
	margin: 15px;
 	padding: 0 0 0 30px;  	
  	font: bold 1.3em/1.5em 'Trebuchet MS', Sans-serif;   
	background: #FCFCF9;
   border: 1px solid #EFEFEF;
	color: #6C6E3A;
}
 
/* form elements */
form {
	margin: 15px;
	padding: 0;
	border: 1px solid #EFEFEF; 
	background: #F8F8F8;	
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding: 2px;
	border: 1px solid #EFEFEF;
	font: normal 1em Verdana, 'Trebuchet MS', Tahoma, sans-serif;	
	color: #666666;
}
textarea {
	width: 280px;
	padding:2px;
	border: 1px solid #EFEFEF;
	font: normal 1em Verdana, 'Trebuchet MS', Tahoma, sans-serif;
	height:100px;
	display:block;		
	color: #666666;
}
input.button { 
	margin: 0; 
	font: bold 1em Arial, Sans-serif; 
	border: 1px solid #EFEFEF;
	padding: 2px 3px; 	
	background: #F1F0E4;
}
 
/* search form */
.searchform {
	background-color: transparent;
	border: none;	
	margin: 0; padding: 5px 0 15px 0;	
	width: 190px;	
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
	width: 120px;
	color: #333; 
	height: 18px;
	padding: 2px;	
	vertical-align: top;
}
.searchform input.button { 
	font: bold 12px Arial, Sans-serif; 
	color: #333;	
	width: 60px;
	height: 26px;
	border: none;
	padding: 3px 5px;	
	vertical-align: top;
}
 
/***********************
	  LAYOUT
************************/
 
#header-content, #footer-content, #content {
	width: 810px;	
}
 
/* header */
#header {
	background: #FFF url(headerbg.jpg) repeat-x 0 0;
	height: 160px;
	text-align: left;	
}
#header-content {
	position: relative;
	margin: 0 auto; padding: 0;
}
#header-content #logo {
	position: absolute;	
	font: normal 40px/65px Georgia, "Times New Roman", Times, serif;
	letter-spacing: -1px; 
	color: #FFF;
	background: #3F1204 url(logobg.jpg) repeat-x left top;
	border: 1px solid #4E460F;
	height: 65px;
	padding: 0 10px;
	margin: 0;
 
	/* change the values of left and top to adjust the position of the logo */
	top: 18px; left: 0px;
}
#header-content #slogan {
	position: absolute;	
	font: normal 12px 'Trebuchet MS', Tahoma, sans-serif;
	letter-spacing: 0px;
	/* color: #D4AA80; */
	color: #BBB;	 
	margin: 0; padding: 0;
 
	/* change the values of left and top to adjust the position of the slogan */
	top: 88px; left: 30px;
}
 
/* header menu */
#header-content ul {
	position: absolute;
	right: 0px; top: 125px; 
	font: bold 12px Georgia, "Times New Roman", Times, serif;
	list-style: none;
	margin: 0; padding: 0;		
	text-transform: uppercase;		
}
#header-content li {
	display: inline;
}
#header-content li a {
	float: left;
	display: block;
	padding: 0px 18px 7px 18px;	
	color: #F3A251; 
	/* color: #C8935D; */
	text-decoration: none;
}
#header-content li a:hover {
	color: #F88F26;
}
#header-content li a#current  {	
	color: #FFF;	
}
 
#header #header-links {
	position: absolute;
	top: 0px; right: 0px;	
	color: #8E5F2F;
	font-size: 90%;
}
#header #header-links a {	
	color: #A4A4A4;
	text-decoration: none;
}
#header #header-links a:hover {
	color: #F3A251;
}
 
/* content */
#content-wrap {
	clear: both;
	float: left;
	width: 100%;
	background: #FFF url(contentbg.jpg) repeat-y center top;	
}
#content {
	text-align: left;	
	padding: 0; margin: 30px auto;		
}
 
/* sidebar */
#sidebar {
	float: left;
	width: 190px;
	margin: 0 0 10px 0;
	padding: 0;	
}
#sidebar ul.sidemenu {
	margin: 5px 0 15px 0;
	padding: 0;	
	border-top: 1px dashed #E1E1E1;	
}
#sidebar ul.sidemenu li {
	list-style: none;
	border-bottom: 1px dashed #E1E1E1;
}
#sidebar ul.sidemenu a {
	display: block;
	color: #666666; 
	text-decoration: none;
	padding:.3em 0 .3em 10px;		
	width: 94%;
}
#sidebar ul.sidemenu a:hover {
	padding: .3em 0 .3em 10px;
	color: #CB4721;
	background: #FFF;	
}
 
/* main */
#main {
	margin: 0 19px 0 0; 
	padding: 0;		
	width: 590px;
	float: left;	
}
#main p, #main h1, #main h2, #main h3, #main blockquote, #main form {
	margin-left: 0;
}
#main form p {
	margin: 15px;
}
 
/* footer */
#footer {
	clear: both;
	margin: 0; padding: 25px 0;
	font: normal .95em 'Trebuchet MS', Tahoma, sans-serif;
	text-align: left;	
	background: url(footerbg.jpg) repeat-x 0% 0%;
	color: #CCC;
}
#footer p {
	margin-left: 0;
}
#footer h2 {
	font: bold 1.3em 'Trebuchet MS', Tahoma, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0px;
	color: #CC9933;
	margin-left: 5px;
}
#footer-content {	
	margin: 0 auto;		
}
#footer-content a{
	color: #C8935D;
}
#footer-content a:hover {
	color: #FFF;
	text-decoration: none;
}
#footer-content ul {
	list-style: none;
	margin: 0; padding: 0;	
	width: 98%;
}
#footer-content ul.columns li {
	border-bottom: 1px dashed #272727;	
}
#footer-content ul.columns li.top {
	border-top: 1px dashed #272727;	
}
#footer-content ul.columns li a {
	display: block;
	line-height: 2em;
	font-weight: normal;
	padding-left: 5px;
	width: 98%;
	color: #BDBDBD;
}
#footer-content ul.columns li a:hover {
	background: #202020;
	color: #FFF;
	text-decoration: none;
}
#footer-content .col {
	width: 270px;
	padding: 0 0 30px 0;			
}
#footer-content .space-sep {
	margin-right: 10px;
}
#footer-content .col2 {
	width: 240px;
	padding: 0 0 30px 0;	
	display: inline;	
}
 
/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  {	text-align: left; }
.align-right {	text-align: right; }
 
/* additional classes */
.clear { clear: both; }
.orange {
	color: #F3A251;
}
 
.post-footer {
	font-size: 95%;
	border: 1px solid #EFEFEF; 
	background: #F8F8F8; 
	padding: 3px 10px;
	margin: 20px 15px 10px 15px;	
}
.post-footer .date {
	background: url('clock.gif') no-repeat left center; 
	padding-left: 20px; margin: 0 10px 0 5px;	
}
.post-footer .comments {
	background: url('comment.gif') no-repeat left center; 
	padding-left: 20px; margin: 0 10px 0 5px;	
}
.post-footer .readmore {
	background: url('page.gif') no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;	
}

Thanks a lot in advance!

teedoff · 01-30-2012, 09:11 PM

lol Well I couldnt get past your form validation errors! and each time I clicked submit, a new page opened. SO I just close 5 or 6 pages! Aggrevating form.

But each new page that opened with the validation errors on it, had sidebars and footers.

HoldOrFold · 01-30-2012, 10:50 PM

Quote:

Originally Posted by teedoff

lol Well I couldnt get past your form validation errors! and each time I clicked submit, a new page opened. SO I just close 5 or 6 pages! Aggrevating form.

But each new page that opened with the validation errors on it, had sidebars and footers.

Really? Just have to enter your name, date of birth, time and say 1's in the longitude lattitude boxes.

Yeah, the page that opens with the validation error does have sidebars and footers. The page you get after submiting a valid form gets rid of the sidebars and footers though, I assume because it's so long.

Would love to know how to sort that out!

teedoff · 01-30-2012, 10:58 PM

Again, your form is too complicated! Most ppl dont have hours to try to get validated in filling out your form. If I select the wrong time zone, which one to select I have NO idea, then lat and long is wrong. Or vice- versa. So I cant get to the point to see your error.

forgot to add image of form errors

HoldOrFold · 01-30-2012, 11:40 PM

Ok haha, just select the first timezone and enter 1's for the longitude and lattitude.

teedoff · 01-30-2012, 11:59 PM

lol I've tried that and about 30 different choices. Imagine what common site visiters to your site go through if WE cant get your form to validate. Forms and form validation should make the experience EASIER for the user, not so hard they give up and close your site.

I dont have time to mess with this anymore. If you can simplify your form validation code so we can recreated your issue then fine, otherwise not sure what to tell you.

HoldOrFold · 01-31-2012, 01:28 AM

I've changed it so you don't have to enter anything for now, just click submit and it will load a data page.

Thanks for letting me know it's difficult for you though, gives me an insight into making it more user friendly in the future.

HoldOrFold · 02-02-2012, 04:43 PM

Anyone know what's going on?