homepage Welcome to WebmasterWorld Guest from 54.237.197.160
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Sidebar and Footer Disappear When Submitting Form
HoldOrFold




msg:4412764
 5:54 pm on Jan 31, 2012 (gmt 0)

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.

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):

<!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>Astrology</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="http://example.com/Circle.css" type="text/css" />
</head>
<body>
<div id="header">
<div id="header-content">
<h1 id="logo">Example<span class="orange">Example</span></h1>
<h2 id="slogan">Your Home for Example</h2>
<div id="header-links">
<p> <a href="http://www.example.com/">Home</a> | <a href="http://www.example.com/">Contact</a> | <a href="http://www.example.com/">Site Map</a> </p>
</div>
<ul>
<li><a href="http://www.example.com/" id="current">Home</a></li>
<li><a href="http://www.example.com/midpointcalculator.php">Calculator</a></li>
<li><a href="http://www.example.com/calculator.php">Example</a></li>
<li><a href="http://www.example.com/">About</a></li>
</ul>
</div>
</div>
<div id="content-wrap">
<div id="content">
<div id="main"> <a name="TemplateInfo"></a>
<h1>Calculation Tool</h1>

<p><a href="http://example.com/"><img src="http://example.com/sample-image.jpg" width="174" height="140" alt="Jup" class="float-left" /></a> Example.</p>

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

</div>
<div id="sidebar">

<h1>Menu</h1>
<ul class="sidemenu">
<li><a href="http://example.com/">Home</a></li>
</ul>
<h1>Tools</h1>
<ul class="sidemenu">
<li><a href="http://example.com/">Calculator</a></li>
<li><a href="http://example.com/">Calculator</a></li>
<li><a href="http://example.com/">Transits</a></li>

</ul>
<h1>Words</h1>
<p>&quot;No man becomes rich unless he enriches others.&quot;</p>
<p class="align-right">- Andrew Carnegie</p>
<h1>Support</h1>
<p>Example</p>
</div>
</div>
</div>
<div id="footer">
<div id="footer-content">

<div class="col2 float-right">
<p> &copy; copyright 2012 <strong>Example.com</strong><br />
Design by: <a href="http://www.example.com/">shout</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 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:




/********************************************
/********************************************
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! :)

[edited by: alt131 at 7:31 pm (utc) on Jan 31, 2012]
[edit reason] Thread Tidy [/edit]

 

rainborick




msg:4412924
 2:07 am on Feb 1, 2012 (gmt 0)

Run a test of the form and then check the source of the resulting page and your error log. It could be that your PHP script is crashing near the end and cutting off the output earlier than you think.

lucy24




msg:4412957
 3:41 am on Feb 1, 2012 (gmt 0)

possibly because the page is too long

Not likely-- assuming you mean it literally. Pages get slower as they get fatter, but pieces don't just disappear.

Now, if the problem is with a function generating a string that's too long for the language it's written it... that could create havoc. Or if the page uses include files, and there's an error at some point before the line that calls the includes. But that would only affect files called after a certain point.

HoldOrFold




msg:4413695
 10:54 pm on Feb 2, 2012 (gmt 0)

The included php works fine and isn't crashing.

You can just click submit because it uses default data at present.

[edited by: alt131 at 11:11 am (utc) on Feb 3, 2012]
[edit reason] Thread Tidy [/edit]

Marshall




msg:4413723
 12:15 am on Feb 3, 2012 (gmt 0)

I had this problem with an .asp page. Any include after the form did not process. I also had the same issue with a .php page. My solution was to put the form in an iframe and, in both instances, they work without a problem.

Marshall

rainborick




msg:4413747
 2:04 am on Feb 3, 2012 (gmt 0)

It looks like a PHP crash to me. If you click submit as you suggested and check the source of the result page, you'll see that the output stops before the page has been sent to completion. So it's not a CSS issue. The sidebar and footer content simply aren't being sent to the user.

If you can't check your error log, error_reporting(E_ALL); at the start of your script may help you locate the issue. Good luck!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved