[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

100% Browser Height Attribute for website

Posted on 2011-03-16
4
Medium Priority
?
359 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

649 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