Web Analytics Made Easy -
StatCounter Trying to get a footer aligned to bottom without any white - CodingForum

Announcement

Collapse
No announcement yet.

Trying to get a footer aligned to bottom without any white

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Trying to get a footer aligned to bottom without any white

    Hey, I'm trying to align my footer to the bottom without having any white space. I can't figure out how to do it. Any help would be appreciated.

    Here's the site http://matthewiscool.sitesled.com/index2

    Here's the CSS
    Code:
    body {
    	background:#ffffff url('fixed_logo.jpg') no-repeat fixed bottom;
    	background-position: 
    325px 230px;
    height:100%;
    	margin: 0px;
    	padding: 0px;
    	
    }
    
    
    /* style the outer div to give it width */
    .menu {
    width:750px; font-size:1.5em;
    padding-bottom:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif
    }
    /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    }
    .menu ul ul {
    width:150px;
    }
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    .menu li {
    float:left;
    width:150px;
    position:relative;
    }
    /* style the links for the top level */
    .menu a, .menu a:visited {
    display:block;
    font-size:11px;
    text-decoration:none; color:#000000; width:139px; height:30px; border:1px solid #000000; border-width:1px 1px 2px 0; background:#d80200; padding-left:10px; line-height:29px;
    }
    /* a hack so that IE5.5 faulty box model is corrected */
    * html .menu a, * html .menu a:visited {
    width:150px;
    w\idth:139px;
    }
    /* style the second level background */
    .menu ul ul a.drop, .menu ul ul a.drop:visited {
    background:#ff0100;
    }
    /* style the second level hover */
    .menu ul ul a.drop:hover{
    background:#d80200;
    }
    .menu ul ul :hover > a.drop {
    background:#ff0100;
    }
    /* style the third level background */
    .menu ul ul ul a, .menu ul ul ul a:visited {
    background:#d80200;
    }
    
    /* style the third level hover */
    .menu ul ul ul a:hover {
    background:#d80200;
    }
    .menu ul ul ul :hover > a{
    background:#ff0100;
    }
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .menu ul ul {
    	position:absolute;
    	height:0;
    	top:31px;
    	left:0;
    	width:150px;
    	visibility: hidden;
    }
    /* another hack for IE5.5 */
    * html .menu ul ul {
    top:30px;
    t\op:31px;
    }
    /* position the third level flyout menu */
    .menu ul ul ul{
    left:150px; top:0;
    width:150px;
    }
    /* position the third level flyout menu for a left flyout */
    .menu ul ul ul.left {
    left:-150px;
    }
    /* style the table so that it takes no ppart in the layout - required for IE to work */
    table {position:absolute; top:0; left:0;}
    /* style the second level links */
    .menu ul ul a, .menu ul ul a:visited {
    background:#d80200; color:#000; height:auto; line-height:1em; padding:5px 10px; width:129px
    /* yet another hack for IE5.5 */
    }
    * html .menu ul ul a{
    width:150px;
    w\idth:129px;
    }
    /* style the top level hover */
    .menu a:hover, .menu ul ul a:hover{
    color:#fff; background:#ff0100;
    }
    .menu :hover > a, .menu ul ul :hover > a {
    color:#fff;
    background:#ff0100;
    }
    /* make the second level visible when hover on first level list OR link */
    .menu ul :hover ul{
    visibility:visible; }
    /* keep the third level hidden when you hover on first level list OR link */
    .menu ul :hover ul ul{
    visibility:hidden;
    }
    /* keep the fourth level hidden when you hover on second level list OR link */
    .menu ul :hover ul :hover ul ul{
    visibility:hidden;
    }
    /* make the third level visible when you hover over second level list OR link */
    .menu ul :hover ul :hover ul{ visibility:visible;
    }
    /* make the fourth level visible when you hover over third level list OR link */
    .menu ul :hover ul :hover ul :hover ul { visibility:visible;
    }
    /* End of Top Menu */
    
    
    
    
    /*bottom menu options */
    /* style the outer div to give it width */
    .footer_menu {
    width:750px; font-size:1.5em;
    padding-bottom:0px;
    padding-top:0px;
    font-family:Verdana, Arial, Helvetica, sans-serif
    }
    /* remove all the bullets, borders and padding from the default list styling */
    .footer_menu ul {
    padding:0;
    margin:0;
    list-style-type:none;
    }
    .footer_menu ul ul {
    width:150px;
    }
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    .footer_menu li {
    float:left;
    width:150px;
    position:relative;
    }
    /* style the links for the top level */
    .footer_menu a, .menu a:visited {
    display:block;
    font-size:11px;
    text-decoration:none; color:#000000; width:139px; height:30px; border:1px solid #000000; border-width:1px 1px 2px 0; background:#d80200; padding-left:10px; line-height:29px;
    }
    /* a hack so that IE5.5 faulty box model is corrected */
    * html .footer_menu a, * html .footer_menu a:visited {
    width:150px;
    w\idth:139px;
    }
    /* style the second level background */
    .footer_menu ul ul a.footer_drop, .footer_menu ul ul a.footer_drop:visited {
    background:#ff0100;
    }
    /* style the second level hover */
    .footer_menu ul ul a.footer_drop:hover{
    background:#d80200;
    }
    .footer_menu ul ul :hover > a.footer_drop {
    background:#ff0100;
    }
    /* style the third level background */
    .footer_menu ul ul ul a, .footer_menu ul ul ul a:visited {
    background:#d80200;
    }
    
    /* style the third level hover */
    .footer_menu ul ul ul a:hover {
    background:#d80200;
    }
    .footer_menu ul ul ul :hover > a{
    background:#ff0100;
    }
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .footer_menu ul ul {
    	position:absolute;
    	bottom:31px;
    	left:0;
    	width:150px;
    	visibility: hidden;
    	z-index: 5;
    }
    /* another hack for IE5.5 */
    * html .footer_menu ul ul {
    bottom:1px;
    b\ottom:2px;
    }
    /* position the third level flyout menu */
    .footer_menu ul ul ul{
    left:150px; top:0;
    width:150px;
    }
    /* position the third level flyout menu for a left flyout */
    .footer_menu ul ul ul.left {
    left:-150px;
    }
    /* style the table so that it takes no ppart in the layout - required for IE to work */
    table {position:absolute; top:0; left:0;}
    /* style the second level links */
    .footer_menu ul ul a, .footer_menu ul ul a:visited {
    background:#d80200; color:#000; height:auto; line-height:1em; padding:5px 10px; width:129px
    /* yet another hack for IE5.5 */
    }
    * html .footer_menu ul ul a{
    width:150px;
    w\idth:129px;
    }
    /* style the top level hover */
    .footer_menu a:hover, .footer_menu ul ul a:hover{
    color:#fff; background:#ff0100;
    }
    .footer_menu :hover > a, .footer_menu ul ul :hover > a {
    color:#fff;
    background:#ff0100;
    }
    /* make the second level visible when hover on first level list OR link */
    .footer_menu ul :hover ul{
    visibility:visible; }
    /* keep the third level hidden when you hover on first level list OR link */
    .footer_menu ul :hover ul ul{
    visibility:hidden;
    }
    /* keep the fourth level hidden when you hover on second level list OR link */
    .footer_menu ul :hover ul :hover ul ul{
    visibility:hidden;
    }
    /* make the third level visible when you hover over second level list OR link */
    .footer_menu ul :hover ul :hover ul{ visibility:visible;
    }
    /* make the fourth level visible when you hover over third level list OR link */
    .footer_menu ul :hover ul :hover ul :hover ul { visibility:visible;
    }
    /* End of the bottom menu */
    
    #pullup {
    	position:absolute;
    	width:750px;
    	height:32px; 
    	z-index:6
    }
    
    
    
    
    #container {
    	position:absolute;
    	width:800px;
    	height:1000px;
    	z-index:4;
    	left: 0px;
    	top: 0px;
    	visibility: visible;
        
    }
    #topbar {
    	position:absolute;
    	width:800px;
    	height:62px;
    	z-index:1;
    	left: 0px;
    	top: 0px;
    	visibility: visible;
    }
    #date {
    	position:absolute;
    	width:160px;
    	height:30px;
    	z-index:3;
    	left: 0px;
    	top: 0px;
    	padding-top: 5px;
    	padding-left: 5px;
    	background-color: #d80200;
    	visibility: visible;
    }
    #top {
    	position:absolute;
    	width:800px;
    	height:25px;
    	z-index:6;
    	left: 0px;
    	top: 0px;
    	padding-top:5px;
    	background-color: #d80200;
    	border:1px solid #000000;
    	border-width:0px 1px 0px 0px;
    	visibility: visible;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size:14px;
    	}
    #menu {
    	position:absolute;
    	width:800px;
    	height:32px;
    	z-index:7;
    	left: 0px;
    	top: 30px;
    	visibility: visible;
    }
    #search {
    	position:absolute;
    	width:220px;
    	height:30px;
    	z-index:2;
    	left: 580px;
    	top: 0px;
    	padding-top: 2px;
    	visibility: visible;
    }
    #footer {
    	position:absolute;
    	z-index:5;
    	left: 0px;
    	width: 800px;
    	bottom:0px;
    	height:62px;
    	margin-bottom: 0px
    	background-color: #d80200;
    }
    #content {
    	position:absolute;
    	width:800px;
    	height:938px;
    	z-index:5;
    	top: 62px;
    	left: 0;
    	visibility: visible;
    }
    #corner {
    	position:absolute;
    	width:50px;
    	height:32px;
    	z-index:1;
    	left: 750px;
    	top: 0px;
    	visibility: visible;
    }
    #banner {
    	position:absolute;
    	width:800px;
    	height:150px;
    	z-index:1;
    	left: 0px;
    	top: 0px;
    	visibility: visible;
    }
    #info {
    	position:absolute;
    	width:800px;
    	height:684px;
    	z-index:2;
    	left: 0px;
    	top: 150px;
    }
    
    /* Bottom Links Info */
    #bottomlinks {
    	position:absolute;
    	width:800px;
    	height:30px;
    	z-index:7;
    	left: 0px;
    	top: 30px;
    	background-color: #d80200; 
    }
    
    #copyright {
    	position:absolute;
    	width:300px;
    	height:30px;
    	z-index:8;
    	padding-left:0px;
    }
    /* End of Bottom Link Info */
    
    
    
    /* top links info */
    /* first two links */
    a.links, a.links:visited, a.links:active {
    color:#000; 
    background:#d80200; 
    text-decoration:none;
    padding-left: 5px;
    border:1px solid #000000; border-width:0px 0px 0px 0px;
    line-height:15px;
    }
    a.links:hover {
    color:#fff; background:#d80200; 
    text-decoration: underline;
    }
    /* end of first two links */
    
    #text {
    	position:absolute;
    	width:750px;
    	height:500px;
    	z-index:1;
    	left: 25px;
    	top: 15px;
    	visibility: visible;
    }
    #links {
    	position:absolute;
    	width:390px;
    	height:30px;
    	z-index:4;
    	left: 150px;
    	top: 5px;
    	visibility: visible;
    }
    /* end of third link */
    /* end of top links code */

  • #2
    Your answer lies here: http://bonrouge.com/br.php?page=faq#footeratbottom

    Comment


    • #3
      body{
      padding-bottom: 0ps;
      }

      ???????

      Comment

      Working...
      X