Solved

100% Browser Height Attribute for website

Posted on 2011-03-16
4
344 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 82

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 82

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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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 +…

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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now