Solved

100% Browser Height Attribute for website

Posted on 2011-03-16
4
347 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
  • 2
  • 2
4 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 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 83

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

914 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now