CSS & Format for online submission page

I had the following page made, via VWorker.com from a template I found, to accept applications for employment online::

http://www.JustTheDriver.com/employment_application.php

It works fine and sends me the apps perfectly. The only problem is the CSS on the "Thank You" page applicants see after they submit an app.

Go to the bottom of the page above, check the box next to: "Check this box to certify that you have read and accept the above statement..." and hit submit and you will see that the font on the response is defaulted to the main css and the footer is half way up the page.

How do I correct these so that the font is the same as the rest of the application page: font-family: Arial, Helvetica, sans-serif;font-size: 12px;

And how do I correct position the footer so it's always at the bottom of the users browser, while respecting the content background color of white?

Thanks Experts!
TonyT7220Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
This worked in my testing. I hope it works for your situation too.

I made a number of changes to the two css files, layout.css and style3.css, so I attached both in their entirety below.
There were a few conflicting entries in the two files that were removed.

In addition to the css changes, you also need to move the end of the div called container so it is above the footer. I added another div with class 'fill' to complete the fix. So, that section of html markup looks like this:

<!-- End Left Column -->



      </div>
      <!-- End Page Content -->

        <div class="fill"></div>

</div><!-- End Container -->

      <!-- Begin Footer -->
/*style3.css*/


@import url(layout.css);


body {
	color: black;
	font-size: 13px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background-color: #d3d9d6;
	height:100%;
}
#container {
	background-color: #fff;
	width: 900px;
	margin: -40px auto 0;  
	/* negative top margin is to allow spacer for the footer */
	border: 1px solid #b7b7b7;
	border-top: 0 none;
	border-bottom: 0 none;
	min-height: 100%;
	height:auto !important;
	height:100%;
	margin: 0 auto -50px;
}
* html #container {height:100%} /* for IE6 */

#masthead {
	text-align: right;
	background-color: black;
	width: 900px;
	padding-top: 40px; /* total height of the footer */
	
}#navigation {
	background-color: #545454;
	overflow: hidden;
		
}
#column_l {
	width: 385px;
	margin: 0;
	padding: 0 15px;
	background-color: #fff;
}
#column_r {
	width: 420px;
	margin: 0;
	float: right;
	padding: 4px;
	background-color: #a9a9a9;
	position: relative;
}
#footer {
	width: 900px;
	text-align: center;
	background-color: black;
	padding-top: 5px;
	padding-bottom: 5px;
	height:40px;
	clear:both;
}
.fill {
	height:40px;
	clear:both;
}
/* Styles for Masthead */
#masthead img { 
	float: left; 
}
#masthead p {
	font-size: 11px;
	color: #fff;
	margin: 10px 10px 0;
}
#column_r p {
	font-size: 11px;
	margin: 7px;
}
/* Styles for Navigation */
#navigation ul {
  	list-style-type: none;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	float:left
}
#navigation li {
	float: left;
}
#navigation a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 5px;
	margin-right:60px;
	border: none;
	float:left
   }
#navigation a:hover {
	color: #000;
	text-decoration: none;
	border:none;
	background-color: #a9a9a9;
}

/*Iphone fix for Masthead overflow*/

@media screen and (max-device-width: 480px) {
  br.phone {display:none}


}
#rate_comparison {
width:380px;
border:1px black solid;
padding:10px 5px 5px 5px;



}
/* Styles for Footer */
#footer p {
	
	font-size: 11px;
	line-height: 14px;
	color: #fff;
	margin: 1px;
	padding: 1px;
}
#footer a {
	color: #fff;
	text-decoration: underline;
}
#footer a:hover {
	color: #fff;
	text-decoration: none;
}
/* Styles for Links */
a {
	color: #036;
	text-decoration: underline;
}
a:hover {
	color: #808080;
	text-decoration: underline;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}


/*layout.css*/


html,
body {
	border: 0 none;
	margin: 0;
	padding: 0;
	height: 100%;
}
#page_content {
    width: 100%;
    overflow:hidden;
}

#masthead {
	width: 900px;
	margin: 0;
	padding: 0;
	overflow: auto;
}
#navigation {
	width: 900px;
	margin: 0;
	padding: 0;
	border: 0;
	clear: both;
	height:29px
	
}
#column_l {
	position: relative;
	float: left;
}
#column_r {
	float: right;
	position:relative;
}
.float_right {
	float:right;
}

Open in new window

0
Tom BeckCommented:
As for the font not being correct, it's difficult to determine the cause, because the text is being generated by the php code. The text does not appear in the view source for the thank you page. I think you will have to go to the PHP to add a span tag with styles for font size, font family, etc to the output string.
0
TonyT7220Author Commented:
Thanks Tommy, let me work on this and let you know!
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Tom BeckCommented:
No problem.

I just noticed that there was already a margin style in #container, so a slight correction on that one:

#container {
      background-color: #fff;
      width: 900px;
      margin: 0 auto -40px;  
      /* negative bottom margin is to allow spacer for the footer */
      border: 1px solid #b7b7b7;
      border-top: 0 none;
      border-bottom: 0 none;
      min-height: 100%;
      height:auto !important;
      height:100%;
}
0
TonyT7220Author Commented:
thanks man, let me go over this and make sure I got it right...I'll let you know
0
TonyT7220Author Commented:
Hey Tommy,

tried you CSS fix as a solution, all it did was push the masthead down 40px for the padding you specified in style3...


http://www.justthedriver.com/employment_application.php
0
Tom BeckCommented:
That's because you did not make the changes to the HTML markup. The #container div must end before the footer begins and you have to include the new class="fill" div.

<!-- End Left Column -->



      </div>
      <!-- End Page Content -->

        <div class="fill"></div>

</div><!-- End Container -->

      <!-- Begin Footer -->
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom BeckCommented:
You posted your last comment at 12:26 PM, I received it at 4:51 PM, or I would have responded sooner. I don't know why it was so late, I have been on this forum all day with no other delays.
0
TonyT7220Author Commented:
no worries Tommy, thanks for responding, let me try this fix
0
TonyT7220Author Commented:
Hey Tommy,

That worked to set the footer at the bottom of the browser. It's just the masthead that is still too tall:

http://www.justthedriver.com/employment_application.php
0
Tom BeckCommented:
Oh, didn't realize that the masthead was affected.

Just remove the padding from the #masthead style in the style3-A.css file:

#masthead {
      text-align: right;
      background-color: black;
      width: 900px;
}

I can help you with the formatting of the text on the Thank You page if you can provide the section of PHP code that generates that message text.
0
TonyT7220Author Commented:
Thanks Tommy, that's what I figured, I took the padding out and it worked...here's the section with the 'thank you' response:

<?
      if ($error != "") {
            echo "<p style='color: #ff0000;'><strong>".$error."</strong></p>";
      }

      if ($success == true) {
            echo "<p>Your application has been submitted.  Thank you. If your qualifications meet our needs. You will hear from us to schedule an interview.</p>";
      }else{?>
0
Tom BeckCommented:
This should just be a matter of adding a style attribute and inline css to get the font to match. You could also add a text-align:center;

<p style='font-family: Arial, Helvetica, sans-serif;font-size: 12px;'>Your application has been submitted.  Thank you. If your qualifications meet our needs. You will hear from us to schedule an interview.</p>"
0
TonyT7220Author Commented:
Thanks Tommy for walking me thru this!
0
Tom BeckCommented:
Happy to help, thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.