• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 295
  • Last Modified:

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!
0
TonyT7220
Asked:
TonyT7220
  • 8
  • 7
1 Solution
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now