?
Solved

100% Browser Height Attribute for website

Posted on 2011-03-16
4
Medium Priority
?
356 Views
Last Modified: 2012-05-11
This is a follow up to question ID: 26883567. I am trying to fix the footer issue on the following site:

http://JustTheDriver.com

I was originally trying to set up the HTML and body content to be 100% of the viewers browser height. In trying to do this, I implemented the changes recommended from EE to my CSS, layout & style 3.

in Layout.css:

html,
body {
      border: 0 none;
      margin: 0;
      padding: 0;
      height: 100%;

in Stlye3.css:

#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%;
}
* html #container {height:100%} /* for IE6 */

#masthead {
      text-align: right;
      background-color: #369;
      width: 900px;
      padding-top: 40px; /* total height of the footer */

as you can see here: http://JustTheDriver.com/employment/employment.htm

It's not working, and now the footer is stretched, maybe because of the 100% height attribute, and the CSS for the footer seems to be ignored. I need to:

 1) fix the footer: should be 40px, white centered arial approx 8pt text, thee <P> total

 2) Have the footer always appear at the bottom of the viewer's browser, while maintaining  page's CSS.

Please advise Experts,

Thanks!
0
Comment
Question by:TonyT7220
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 35153106
The <p>s put margin before and after them so they will stretch your div.  Try this inline styling and use the <br> to make it only one <p>.
<div id="footer" style="width:900px;style:list-style-type: none; margin: 0 auto;padding: 0; width:900px;height:40px">

		<p style="margin:0px;padding:0px;"><a href="../index.html">Home</a> | <a href="../about/about.htm">
		About</a> |
		<a href="../contact/contact.htm">Contact</a> | <a href="../employment/employment.htm">

		Employment</a> |
		<a href="../faq/faq.htm">FAQ</a> |
		<a href="../services/services.htm">Services</a><br>
		Copyright © 2011 Just The Driver, LLC. All Rights Reserved.</p>

Open in new window

0
 

Author Comment

by:TonyT7220
ID: 35153616
Didn't seem to work Dave. Tried it here:

http://JustTheDriver.com/employment/employment.htm
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 35154028
You have CSS for 'footer' in 3 places: an external file, in the <head>, and inline in the div.  You're just writing all over yourself.  You need to get rid of 2 of the 3 so you can see what you're doing.

In addition you have changed something else in the files so it's not 100% anymore.
0
 

Author Comment

by:TonyT7220
ID: 35157113
I had to jerry rig it to work, but now it's fine. Thanks Dave
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question