|
CSS - Artifact In Footer In Ie, Footer Not At The Bottom In Ff
I'm having trouble with my website structure... view this page for an example...
css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan Similar TutorialsI've been trying to implement a footer on the site I'm working on, and I want it to stay at the bottom of the page. If there's content that pushes down, I want the footer at the bottom of the content. I've been trying to implement the method described by these two sites: http://www.sitepoint.com/forums/showpost.php?p=1239966&postcount=3 http://www.themaninblue.com/writing/perspective/2005/08/29/ but I'm having a hard time with the longer content page. Here's two examples on the site I'm working on that I have up and nearly ready. Short page: http://windrivers-gsp.com/WRK/index.php Long page: http://windrivers-gsp.com/WRK/hclub.php or http://windrivers-gsp.com/WRK/dams.php As you can see, the footer won't go to the bottom of the longer content on the long page, and I can't figure out why. I believe I've cleared everything, even implementing the PIE/Aslett clearfix on the container div. I think I'm just to the point where I need some more experienced eyes to take a glance and point out where I must have missed something. Any help is greatly appreciated! Oh, BTW, here's the addy for my CSS: http://windrivers-gsp.com/WRK/wrkCSS.css And yes, I know there's a nasty hack in place currently for the navigation menu. I'm working on that after I get the footer problem fixed. Hey I am relativly new to CSS and i was wondering how can i make the footer of my page stick to the bottom of the screen if the page is relativly short. I use a 800x600 as my design size but there might be long and short pages. Can anyone shed some light? Here is my code PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link rel="stylesheet" title="Disabled for Preview-in-Browser: ../css/basics.css" type="text/css" /> <style type="text/css"> <!-- /* CSS Document */ body{ background-color:#FFFFFF; color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; margin:0px; padding:0px; font-size:80%; text-align:center; } #wrapper{ width: 750px; background-color:#FFFFFF; margin: 10px auto; text-align: left; } /* ---------------------------------Header content---------------------------------------------*/ #header { height: 150px; border-bottom: 1px solid #CC0000; } /*this is to make sure al content apears below the header*/ .clearit{ clear: both; display: block; } /*---------------------------------Main Contant------------------------------------------------*/ #content { background-color:#FFFFFF; margin-left:177px; margin-top:25px; margin-right:100px; } #content p{ background-color:#FFFFFF; } #content h1{ font-size: 140%; color: #CC0000; padding: 0; margin-bottom:20px; font-weight:bold; } #content h2{ font-size: 110%; color: #CC0000; padding: 0; margin-top:30px; } #content li{ color:#000000; list-style-position:inside; list-style-type:disc; } #content form h3{ font-size: 100%; color: #CC0000; padding: 0; margin:0; } #content form h2{ font-size: 115%; color: #CC0000; padding: 0; text-transform:uppercase; } .BoldRed{ color:#CC0000; font-weight:bold; } .verse{ color:#006699; font-style:italic; } /*use for commendattions names*/ .greyed { color:#666666; font-style:italic; } .leftimage{ float: left; margin-right: 10px; margin-bottom:10px; border: 1px solid #000000; clear:left; } .container{ width:99%; float:right; } /*-------------------------------Left Collum Content---------------------------------------------*/ #leftcol { font-size:100%; margin-top:30px; float:left; width: 167px; background-color: #FFFFFF; } /*------------------------------Footer Content---------------------------------------------------*/ #footer{ margin-top:30px; border-top: 1px solid #CC0000; background-color: #FFFFFF; color: #000000; clear: both; } --> </style> </head> <body> <!-- Start wrapper --> <div id="wrapper"> <!-- Start of Header --> <div id="header"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="150"> <param name="movie" value="../homepageFlashElements/header.swf" /> <param name="quality" value="high" /> <embed src="../homepageFlashElements/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="150"></embed> </object> <!-- Clear a line--> <div class="clearit"> </div> </div> <!-- End of Header --> <!-- Start of Left Colum --> <div id="leftcol"> <div align="left"><img src="../images/courses/colours_08.jpg" width="143" height="143" border="1px"/></div> <p> Navigation content here </p> <p></p> </div> <!-- End of Left Colum --> <!-- Start of Content --> <div id="content"> <h1>Heading</h1> <p>Some Content. This may very in length</p> </div> <!-- End of Content --> <!-- Start of Footer --> <div id="footer"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="750" height="50"> <param name="movie" value="../homepageFlashElements/footer.swf" /> <param name="quality" value="high" /> <embed src="../homepageFlashElements/footer.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="750" height="50"></embed> </object> </div> <!-- End of Footer --> </div> <!-- End wrapper --> </body> </html> I've attached a *.gif picture of how my site looks. It is completely coded in CSS. The footer just lies underneath the content, and I want to be able to move the footer to the bottom of the page. Below the sidebar. Does anybody know how to do this? Any help would be appreciated. Thank you! I believe this has been asked before, but I'm unsure what search terms to use... Basic one column CSS layout. How to keep the footer at the bottom of the window even when content doesn't reach that far? Ok, I've taken many different approaches to this and I can't find a solution. I'm looking to make my footer align to the bottom of the browser window. For some reason I can't so I figured I'd post up my code here and get a different set of eyes to scan over it and help me out. Here's the code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--CSS-->
<link rel="stylesheet" href="structure.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="screen" />
<title> MY TITLE GOES HERE! </title>
</head>
<body>
<div id="container">
<div id="nav_container">
MY MENU STUFF GOES HERE!
</div>
<div id="content">
<div id="left_column">
BLAH BLAH all my content goes here!
</div>
<div id="right_column">
ALL OF MY RIGHT CONTENT HERE!
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
and this is the stylesheet driving the page: Code:
body {
background-image: url("gfx/bg.jpg");
background-repeat: repeat-y;
background-position: center;
background-color: #FFFFFF;
margin: 0px;
font-family: Tahoma;
font-size: 13px;
}
/*Page Structure --------------------------------------*/
#container {
background-color: #FFFFFF;
position: absolute;
left: 50%;
margin-left: -394px;
width: 790px;
height: 100%;
border: 1px solid Black;
border-top: 0px;
border-bottom: 0px;
}
#content {
background-color: #FFFFFF;
width: 790px;
float: left;
margin: 0px;
padding: 0px 0px 0px 0px;
}
#left_column {
width: 390px;
float: left;
display: inline;
margin: 15px 0 0 20px;
padding: 0px 0px 15% 4px;
border-right: 1px solid #DFDFDF;
}
#right_column {
width: 326px;
float: left;
margin: 15px 0 0 0px;
padding-bottom: 10%
}
/*Headers and Flash content -----------------------------*/
#header {
background-image: url("gfx/header.jpg");
width: 790px;
height: 101px;
float: left;
line-height: 1000px;
overflow: hidden;
}
#home_header {
background-image: url("gfx/home_header.jpg");
background-repeat: no-repeat;
background-color: #FFFFFF;
width: 380px;
height: 150px;
margin: 0px 0 10px 0px;
float: left;
line-height: 1000px;
overflow: hidden;
}
#recent_posts {
background-image: url("gfx/recent_posts.jpg");
background-repeat: no-repeat;
width: 368px;
height: 30px;
margin-left: 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#latest_threats {
background-image: url("gfx/latest_threats.jpg");
background-repeat: no-repeat;
width: 368px;
height: 30px;
margin: 25px 0 0 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#recommended_sites {
background-image: url("gfx/recommended_sites.jpg");
background-repeat: no-repeat;
width: 215px;
height: 30px;
margin: 25px 0 0 3px;
float: left;
text-indent: -1000px;
overflow: hidden;
}
#flash {
background-color: #000000;
width: 790px;
height: 120px;
float: left;
vertical-align: middle;
}
/*Navigation --------------------------*/
#nav_container {
background-image: url("gfx/nav_bg.jpg");
background-color: #FFFFFF;
width: 790px;
height: 24px;
float: left;
text-align: right;
}
/*News Structure --------------------------*/
#news_header {
background-color: #FFFFFF;
width: 390px;
height: auto;
float: left;
font-size: large;
font-weight: bold;
color: #009AFF;
margin: 3px 0 2px 0;
}
#news_post {
background-color: #FFFFFF;
width: auto;
height: auto;
float: left;
color: Gray;
margin: 0px;
}
#news_date {
background-color: #FFFFFF;
width: auto;
height: auto;
float: left;
font-size: 11px;
font-style: italic;
color: Gray;
margin-left: 5px;
}
#news_content {
background-color: #FFFFFF;
width: 390px;
float: left;
margin-top: 20px;
}
/*Lists----------------------------------*/
#post_list {
background-image: url("gfx/gradient.jpg");
width: 371px;
float: left;
margin: 2px 0 0 0px;
list-style-type: none;
padding: 0px 0px 10px 0px;
}
#post_list li {
background-color: transparent;
padding: 5px;
border-bottom: 1px solid #EDEEEE;
}
#threats_list {
background-image: url("gfx/gradient.jpg");
width: 371px;
float: left;
margin: 2px 0 0 0px;
list-style-type: none;
padding: 0px 0px 10px 0px;
}
#threats_list li {
background-color: transparent;
list-style-image: url("gfx/red_arrow2.jpg");
list-style-position: inside;
padding: 5px;
border-bottom: 1px solid #EDEEEE;
}
/*Footer--------------------------------------------------*/
#footer {
background-image: url("gfx/footer.jpg");
background-repeat: no-repeat;
background-color: #FFFFFF;
width: 790px;
height: 125px;
float: left;
margin-top: 40px;
}
Any help or insight is greatly appreciated. I just made the jump to complete CSS layouts about 3 days ago so I'm still really new to this Thanks in advance, AA. I created a footer that sits on the bottom of the screen using this code: .footer { padding-top:5px; margin-top:5px; font-size:8pt; color:#FFFFFF; position:absolute; bottom:0px; background-image:url('gfx/bg-bottom.jpg'); height:22px; width:100%; } It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he http://www.juiceboxseo.com/do-it.php Is there a way to make sure it stays on the bottom? Hi! i'm trying to position footer at the very bottom. this example does it as expected (if the page is longer than viewport, footer will be at the end of page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<h1>Content</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body></html>
but when i try to add left/right boxes, it fails. try to scroll down the page (footer is placed at the bottom of viewport, not page): Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: 12px/1.5 verdana, arial, helvetica, sans-serif;
}
#head
{
padding-left:20px;
padding-top:20px;
padding-right:20px;
background-color: #FFF;
background-image: url('/public/images/header-background.gif');
background-repeat: repeat-x;
background-position: bottom
}
#logo
{
height: 100px;
background-image: url('/public/images/header.jpg');
background-repeat: no-repeat
}
#content
{
}
#leftcontent
{
float:left;
width:67%;
margin:10px;
padding:30px 30px 70px 30px;
border: 1px solid #000;
background-color: #33251C
}
#leftcontent h1
{
color: #936FC4
}
#leftcontent h2
{
color: #FFF
}
#rightcontent
{
margin:15px
}
p, pre
{
margin:0px 30px 10px 30px
}
#rightcontent p
{
font-size:10px;
margin-left:0px
}
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #FFF
}
#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block
}
#navlist li a, #navlist li a:link
{
background: #FFF;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block
}
#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #f90;
background: #EEE
}
#navlist li a#current:hover
{
border-bottom: 3px solid #999;
background: #DDD
}
#content {
padding: 10px;
background-color: #ff8080;
}
#footer {
position: absolute; /* Needed for Safari */
padding: 10px;
background-color: #aa3939;
width: 75%;
}
#footer h1 {
padding-bottom: 0;
}
h1, p {
margin: 0;
padding-bottom: 1em;
}
h1 {
font-size: 12px;
line-height: 1.5em;
}
-->
</style>
<script type="text/javascript">
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('content').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'absolute';
footerElement.style.top = (windowHeight - footerHeight) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
</script></head><body>
<div id="content">
<div id="head">
<div id="logo">
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="/">home</a></li><li><a href="/mix/" id="current">mixes</a></li><li><a href="/gallery/">gallery</a></li><li><a href="/contact/">contact</a></li></ul>
</div><br/>
<div id="leftcontent">
<h1>My Mixes</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div id="rightcontent">
right side
</div>
</div>
<div style="position: absolute; top: 810px;" id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
how may i fix it? thanx! Hi there, my first post here. I'm working on my first site using CSS for layout. I have a footer as a div that I want to be the last thing on the page, doesn't need to stick to the bottom or anything. It's obeying on my other pages, but on this index page I can't figure out why its not going to the bottom. the site is at w w w. montrosemusicseries com / indextest html I'm assuming its some kind of float thing that's not clearing, but I have my <br style="clear:both"/> in there. I also tried a div clear to no avail. Any suggestions? Thanks, Stuart http://wdcb.org/newsite/ Having some difficulty here in putting the footer at the bottom of the page. I've looked at dozens of help tools, and none of them work. I'm obviously missing something. Page code: Code:
<html>
<body>
<div id="header">
<?php include('includes/menu_new.inc'); ?>
</div>
<div id="leftcol">
<div class="element">
<img alt="" src="../images/buttons/PledgeNow.jpg">
<p>This is what text underneath would look like. I know that some of our boxes on the right side can do this so we want to make sure it looks right.</p>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
<div class="element">
<b>PLEDGE NOW</b>
</div>
</div>
<div id="content">Content Section dfsdf dfdf fsdf dfsdf sdfsd ghh ghgh hghtr ytgdf gfdfgdf </div>
<div id="rightcol">
<div class="element">
<a href="http://iRockJazz.com/" target="_blank"><img alt="" border=0 src="../images/ads/iRJ_wdcb_tile_199pix.jpg"></a>
</div>
<div class="element">
<img alt="" src="../images/mini-headers/MiniHeader-FolkRoots.jpg" width="200">
<p>
Our days may be dedicated to jazz, but during the evenings it's all about the folk! WDCB plays more folk and acoustic roots music than any other station in Northern Illinois.
<br><br>
<a href="programming/progfolkroot.php">Click here</a> to learn more.
</p>
</div>
</div>
<div id="footer">
<?php include('includes/footer.inc'); ?>
</div>
</body>
</html>
CSS code: Code:
#header {
position: absolute;
top: 5px;
left: 5px;
width: 1000px;
height: 182px;
}
#leftcol {
background: #f00;
position: absolute;
top: 187px;
left: 0px;
width: 235px;
}
#leftcol .element {
margin-bottom:15px;
}
#leftcol p {
margin-left:5px;
}
#content {
background: #ccc;
position: absolute;
top: 187px;
left: 250px;
width: 540px;
}
#rightcol {
background: #f00;
position: absolute;
top: 187px;
left: 800px;
width: 200px;
}
#rightcol .element {
margin-bottom:15px;
}
#rightcol p {
margin-left:5px;
}
#footer {
position:fixed;
bottom:0px;
width:1000px;
height:100px;
background:#005288;
}
Thank you in advance for your help. Hi everyone, It's been a while since I've opened up a .css file so forgive me. I have a couple of questions about this partiular site. It's a test site I'm workig on... http://www.karenwilliamson.com/joom2/ I would like if possible to fix the footer in a fixed position and not have it rise and fall according to the amount of content on each page. Click some of the random links and you'll see what I mean. Also, while I'm here I can't figure out how to adjust the spacing in the main content area to be more uniform between IE7 and FF. It seems to my novice eyes that it should be controlled by Code: table.contentpaneopen Maybe I'm being too nitpicky but I'm sure there is a way to make it more uniform among the two browsers? Thanks for any input Rob Hi, I've just reworked my site, and I'm having trouble keeping the footer at the bottom of the page. my site stylesheet (see div#footer) Any ideas? I've tried setting body min-height (and height for ie) to 100% and setting position:absolute; bottom:0px; but that didn't work. I know there is a well documented solution for this but as I can't remember what is causing it, it's a bit hard to search for it. Basically I want to fix my footer to the bottom of the page. As soon as I set it's position to fixed it works in Firefox but in IE the footer shoots back up to the top of the page. If I set the position to absolute then the footer starts at the bottom but the page scrolls with the page content. Sorry for the large amounts of CSS / HTML. PHP Code: <style type="text/css"> <!-- html { height:100%; margin:0; padding:0; } body { margin:0; padding:0; height:100%; background:#FFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; background: url(images/layout/top_back.jpg); background-repeat: repeat-x; } #wrap { position:relative; background-image: url(images/layout/top_section.jpg); background-repeat:no-repeat; min-height:100%; } * html #wrap { height:100% } * html #inner_holder { height:100% } #footer_hold_all { position: absolute; bottom: 0; width: 100%; height: 134px; } #footer_hold_top { position: relative; top: 0; width: 100%; height: 109px; background: url(images/layout/footer_image_back109.png); } #footer_hold_bottom { position: relative; top: 0; width: 100%; height: 25px; background: url(images/layout/lowernav_background.jpg); } #footer_top { background: url(images/layout/illustration.png); position: relative; top: 0; left: 0; width: 760px; height: 109px; } #footer_bottom { line-height: 25px; text-indent: 5px; text-align: left; vertical-align: middle; } #footer_bottom a{ color: #435769; text-decoration:none; font-weight:bold; font-size:1.0em } #footer_bottom a:hover{ color: #E2B69D; } .bold { font-weight: bold; } #os_logo { width: 196px; height: 78px; position: absolute; top: 0; left: 0; float: left; } #os_search { width: 196px; position: absolute; top: 10px; right: 0; float: right; } #os_search label { display: block; } #os_search form { display: inline; } #inner_holder { width: 100%; position: absolute; top: 100px; } #left { float:left; width:200px; text-align:center; border: 1px dashed green; } #main { position:relative; margin-left:200px; border: 1px dashed red; } #right { float:right; width:200px; text-align:center; border: 1px dashed blue; } #content { padding:5px; margin-right:200px; text-align:left; border: 1px dashed purple; } --> </style> DIV Layout: PHP Code: <body> <div id="wrap"> <div id="inner_holder"> <div id="left"> left </div> <div id="main"> <div id="right"> right </div> <div id="content"> </div> </div> </div> <div id="os_logo"> <img src="images/layout/xxx_logo.jpg" alt="Logo" width="196" height="78" /> </div> <div id="os_search"> <form action="searchsite.php" method="post" name="search"> <label for="search">Search Site</label> <input name="search" id="search" type="text" size="20" /> <input name="submit" type="submit" value="GO" /> </form> </div> <div id="footer_hold_all"> <div id="footer_hold_top"> <div id="footer_top"></div> </div> <div id="footer_hold_bottom"> <div id="footer_bottom" class="bold"> <a href="sitemap.php">Sitemap</a> | <a href="accessibility.php">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS Valid</a> </div> </div> </div> </div> </body> Greetings, My example page is located here. As you can see I'm having issues on the bottom of the page. I believe I know what is causing the issue, just not how to fix it. I need it only to work in IE and at a resolution of 1024x768 and higher. I have the footer outside of the other wrappers which are set to 100% height. But wrapper_04, which does not include the header, seems to be extending past the footer the same height as the header because it is trying to be the same height as the other parent wrapper elements? Any thoughts on how I can fix this using just CSS? I do have some js which sets the height of the content_wrapper so the background image extends the full height (yellow line image on the right of the page), but it should not be affecting the rest of the page. Thanks in advance for any assistance! Can somebody please help me with a problem i am having with my footer. I have been reading through articles and help forums for days now trying to get a footer on my theme that will stick to the bottom of the document. At the moment the Footer is sticking to the bottom of the page, but as the content of my pages are longer than the viewpoint, My footer is appearing in the middle of my content. I have been trying all sorts to try and figure this out, and everything i try seems to not work. My website is here My HTML code can be found here And my CSS Code can be found here Many thanks, Suppose this: ----- Header Div Content Dive Footer Div ----- Is there a way to force a footer div to the bottom of the window even when there isn't enough content above to fill the window? Maybe some way to "pad" the content div? Hello everyone I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6 Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE. The style sheet is no from me. I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input Eva Here it is: /***********************************************/ /* 3col_leftNav.css */ /* Use with template 3col_leftNav.html */ /***********************************************/ /***********************************************/ /* HTML tag styles */ /***********************************************/ body{ background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png); background-repeat: no-repeat; background-position: left top; font: 13px Verdana, Arial, Helvetica, sans-serif; /* size: 100%; */ color: #333333; line-height: 1.3; margin: 0px; padding: 0px; } img{ border: 0; } a{ color: #006699; text-decoration: none; } a:link{ color: #006699; text-decoration: none; } a:visited{ color: #006699; text-decoration: none; } a:hover{ color: #006699; text-decoration: underline; font-weight: bold; } h1{ font-family: Verdana,Arial,sans-serif; font-size: 114%; color: black; margin: 0px; padding: 0px; } h2{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h3{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: black; margin: 0px; padding: 0px; } h4{ font-family: Verdana,Arial,sans-serif; font-size: 100%; font-weight: normal; color: #333333; margin: 0px; padding: 0px; } h5{ font-family: Verdana,Arial,sans-serif; font-size: 100%; color: #334d55; margin: 0px; padding: 0px; } ul{ list-style-type: square; } ul ul{ list-style-type: disc; } ul ul ul{ list-style-type: none; } label{ font-family: Arial,sans-serif; font-size: 100%; font-weight: bold; color: #334d55; } table{ padding: 5 px; } /***********************************************/ /* Layout Divs */ /***********************************************/ #masterhead{ padding: 30px 0px 0px 0px; /* border-bottom: 1px solid #cccccc; */ width: 950px; } #navBar{ float: left; width: 195px; margin: 0px; /* 19.08.2008 padding-top: -5px;*/ padding-top: -5px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; /* background-color: #e4f2f9; */ /* 19.08.2008 border-right: 1px solid #cccccc; */ } #headlines{ position: absolute; left: 690px; top: 135px; font-size: 85%!important; /* font-size: 90%; */ /* float:right; */ width: 230px; margin-top: -30px; /* border-left: 1px solid #cccccc; */ /* border-bottom: 1px solid #cccccc;*/ /* padding-right: 10px; */ } #headlines h3{ margin-top: 3px; margin-bottom: 3px; margin-left: 10px; padding-top: 1px; padding-bottom: 1px; font-weight: 900; } #content{ float: left; padding-left: 24px; width: 460px; font-size: 107%; line-height: 1.4; /* position: absolute; top: 184px; left: 210px; */ } #content h1,h2 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 130%; font-color: black; } #content h3 { margin: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 0px; font-size: 120%; font-height: 90%; font-weight: 900; } /***********************************************/ /* Components */ /***********************************************/ #siteName{ margin: 0; padding-top: 0px; padding-right: 0; padding-bottom: 0; padding-left: 200px; /* font-size: x-large; */ color: #FF9900; } /************* #globalNav styles **************/ #globalNav{ /* border-bottom: 1px solid #CCC; */ color: #006699; text-align: center; /* font-weight: bold; */ margin-top: 40px; padding-top: 10px; padding-right: 0px; padding-bottom: 5px; padding-left: 10px; /* 19.08.2008 border-top: 1px solid #cccccc; */ } #globalNav img{ display: block; } #globalNav a { /* font-size: 120%; */ padding: 0 4px 0 0; } /*************** #pageName styles **************/ /* #pageName{ margin: 0px; padding-top: 30px; padding-right: 0px; padding-bottom: 0px; padding-left: 20px; } */ /************* #breadCrumb styles *************/ #breadCrumb{ font-size: 80%; padding: 2px 0px 0 10px; } /************** .feature styles ***************/ .feature{ padding: 2px 2px 10px 10px; font-size: 80%; } .feature h3{ padding: 30px 0px 5px 0px; text-align: center; color: #006699; } .feature img{ float: left; padding: 10px 10px 0px 0px; } /************** .story styles *****************/ .story{ clear: both; font-size: 80%; padding-top: -40px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } .story p{ padding: 0px 0px 10px 0px; } /************* #siteInfo styles ***************/ #siteInfo{ font-size: 75%; color: #cccccc; padding: 10px 10px 10px 10px; text-align: right; border-top: 0px none #cccccc; /* border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: 1px solid #cccccc; */ } #siteInfo img{ padding: 4px 4px 4px 10px; vertical-align: middle; } /************* #search styles ***************/ #search{ padding: 5px 0px 5px 10px; border-bottom: 1px solid #cccccc; font-size: 90%; } #search form{ margin: 0px; padding: 0px; } #search label{ display: block; margin: 0px; padding: 0px; } /*********** #navBar link styles ***********/ #navBar ul a:link, #navBar ul a:visited {display: block;} #navBar ul {list-style: none; margin: 0; padding: 0;} /* hack to fix IE/Win's broken rendering of block-level anchors in lists */ #navBar li {border-bottom: 1px solid #EEE;} /* fix for browsers that don't need the hack */ html>body #navBar li {border-bottom: none;} /*********** #sectionLinks styles ***********/ #sectionLinks{ position: relative; margin: 0px; padding: 0px; /* border-bottom: 1px solid #006699; */ font-size: 90%; } #sectionLinks h3{ padding: 10px 0px 2px 10px; } #sectionLinks a { display: block; /* border-top: 1px solid #006699; */ padding: 2px 0px 2px 10px; } #sectionLinks a:hover{ /* background-color: #dddddd;*/ } .navigate { overflow: hidden; width: 204px; padding-bottom: 1px; } /**Navigation Menu **/ .navigate ul, .navigate li { list-style: none; margin: 0px 0px!important; padding: 0px 0px!important; line-height: 1.5em; } /**erste Navigationseben**/ .navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { display: block; border: 0; border-bottom: 1px solid #86c2e3; border-top: 1px solid #fff; border-right: 1px solid #86c2e3; width: 100%; text-decoration: none; margin: 0; padding: 5px 5px 5px 15px; font-size: 1.0em; font-weight: bold; } .navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active { width: auto; } .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px; padding: 5px 5px 5px 15px; color: #000; font-weight: bold; } .navigate li a:hover, .navigate li a:focus, .navigate li a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px; } .navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } .navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active { background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px; color: #000; } /*********** .relatedLinks styles ***********/ .relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a:link, .relatedLinks a:visited { display: block; } /************** #advert styles **************/ #advert{ padding: 30px 0px 10px; } #advert img{ display: block; } /************** #headlines styles **************/ #headlines{ margin: 0px; padding: 10px 0px 20px 10px; } #headlines p{ padding: 5px 0px 5px 0px; } /**Footer**/ #footer { clear: both; position: relative; border-top: 4px solid #CCECF4; font-size: 11px; padding: 4px 4px 8px 10px; margin-top: 4px; bottom:0; zoom: 1; } #footer .left { float: left; width: 700px; bottom:0; } #footer .right { float: right; width: 150px; text-align: right; margin-top: -2.3em; zoom: 1; position: relative; z-index: 0; bottom:0; } #footer p { color: #000 !important; padding: 0; margin: 0; bottom:0; } #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active { color: #306479; text-decoration: none; font-weight: bold; } #footer a:hover, #footer a:focus { text-decoration: underline; } #navispalte { font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif; width: 202px; float: left; } I bought a php template to put my father website together with. I had worked with html and asp and had thrown together sites quickly in the past, so I didnt think much of it... But php turns out to be a whole new animal I guess, or maybe im missing something simply in the css. I have spent the last 4 hours looking online and asking friends, and I am no closer. I see plenty of forums with footer issues here, but none have given me any clues. Here is the site(im new, i cant post URLs): http://aeroprepare.com You will note that the bottom of the page has a large gray gap, between the footer content and the copywrite area. I simply want to remove this gap, shorten it, so the footer fits closer to the bottom of the page, like the copywrite section does. Sounds simple, but its driving me NUTS. here is my CSS: Code: /*** CSS Resets ***/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 14px;
font-family: inherit;
vertical-align: baseline;
}ul {list-style: none;}table { border-collapse: separate; border-spacing: 0;} caption, th, td {text-align: left; font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after {content: "";} blockquote, q {quotes: "" "";}
/*** Start Site CSS ***********************************************************/
html, body {height: 100%;}
body {
font-family: Arial, Helvetica, Verdana, Times New Roman, sans-serif;
font-size:12px;
background-color:#fff;
}
#hm_background, #background {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom:-340px;
}
#hm_background {
background-repeat:repeat-x;
background-position:top;
}
#background {
background-repeat:repeat-x;
background-position:top;
}
.clear {
clear:both;
}
.clear-border {
margin:15px 0 15px 0;
clear:both;
border:1px solid #dbdbdb;
}
#wrapper {
margin:0 auto;
width:960px;
}
#logo {
float:left;
margin:27px 0 0 0;
width:284px;
height:67px;
}
#logo_home {
float:left;
margin:32px 0 0 45px;
width:212px;
height:52px;
}
/*** navigation ***************************************************************/
#nav_wrap {
position:relative;
margin:25px 0 0 460px;
padding:12px 0 0 15px;
background-repeat:no-repeat;
width:464px;
height:52px;
z-index:99;
}
#nav {
list-style-type:none;
margin:0;
padding:0;
}
#nav li {
float:left;
margin:0;
padding:0;
}
#nav li a {
position: relative;
float: left;
margin: 0 11px 0 0;
padding: 0 17px 0 0;
height: 37px;
text-decoration: none;
color: #fff;
font-size:12px;
z-index: 2;
}
#nav li a span {
display: block;
line-height: 21px;
padding: 3px 0 5px 20px;
color: #fff;
}
#nav_hover {
position: absolute;
float: left;
margin: 0 11px 0 0;
padding: 0 17px 0 0;
height: 28px;
z-index: 1;
}
#nav_hover span {
display: block;
padding: 3px 0 5px 20px;
line-height: 21px;
height: 28px;
z-index: 1;
}
/*** Dropdown ***/
#nav ul {
position:absolute;
display:none;
padding:0 0 12px 0;
width:142px;
top:48px;
list-style-type:none;
z-index:99;
}
#nav li ul li {
margin:0;
padding:0;
}
#nav li ul a, #nav li ul a:visited {
float:left;
padding:4px 0 0 12px;
width:130px;
height:20px;
font-weight:normal;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:142px;
margin:0;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
/*** footer *******************************************************************/
#footer_wrap, .push {
height: 360px;
clear: both;
}
#footer_wrap {
background-color:#e5e5e5; /*e5e5e5*/
border-top:1px solid #B3BCBF;
}
#footer {
margin:0 auto;
padding:12px 0 0 40px;
width:920px;
}
#footer a {
text-decoration:none;
}
.foot_clm_block {
float:left;
margin:25px 15px 15px 0;
width:165px;
}
.foot_clm_heading {
margin:0 0 5px 0;
font-size:14px;
text-transform:uppercase;
color:#fff;
}
.foot_clm_block ul {
margin:0;
padding:0;
list-style-type:none;
}
.foot_clm_block ul li {
color:#7F7F7F;
}
.foot_clm_block ul li a {
display:block;
padding:5px 0 0 5px;
height:20px;
color:#fff;
border-bottom:1px solid #CDCDCF;
font-size:12px;
}
.foot_clm_block ul li a:hover {
color:#4E4E4E;
}
#search_form_footer {
margin:5px 0 10px 1px;
height:24px;
border:1px solid #fff;
background-color:#fff;
}
#search_footer {
float:left;
padding:3px;
width:120px;
border:none;
}
#social_icons {
margin:5px 0 0 6px;
}
#social_icons a {
margin:0 4px 0 0;
}
#copyright_wrap {
border-top:1px solid #f1f1f1;
height:40px;
}
#copyright_txt {
margin:0 auto;
margin-top:10px;
width:880px;
color:#fff;
font-size:11px;
}
#copyright_txt a {
color:#fff;
font-size:11px;
}
/*** home page ****************************************************************/
#hm_header {
height:139px;
background-repeat:no-repeat;
background-position:top center;
padding-top: 1px;
padding-bottom: 1px;
}
#slider {
margin:0 0 0 23px;
padding:10px 0 0 33px;
background-repeat:no-repeat;
width:881px;
height:298px;
}
#slider_imgs img {
display:none;
}
#news {
margin:15px 0 10px 25px;
background-image:url(../images/news_back.jpg);
background-repeat:no-repeat;
width:911px;
height:65px;
overflow:auto; /* fixes margin collapsing */
}
#news_icon {
float:left;
margin:17px 0 0 17px;
background-image:url(../images/airplaneminilogo.png);
background-repeat:no-repeat;
width:55px;
height:41px;
}
#news_text {
margin:20px 0 0 15px;
float:left;
font-size:20px;
text-align:left;
width:800px;
}
#news_text ul {
margin:0;
padding:0;
list-style-type:none;
}
#news_text a {
text-decoration:none;
}
#three_columns {
margin:0 0 0 25px;
background-image:url(../images/3column_back.jpg);
background-repeat:no-repeat;
width:910px;
}
.three_clm_block {
float:left;
margin:25px 0 45px 0;
padding:0 25px;
width:250px;
height:200px;
background-image:url(../images/3column_border.jpg);
background-repeat:no-repeat;
background-position:top left;
}
.three_clm_circle {
float:left;
padding:6px 0 0 0;
width:32px;
height:26px;
background-repeat:no-repeat;
background-position:top left;
color:#fff;
text-align:center;
font-size:16px;
font-weight:bold;
}
.three_clm_title a {
float:left;
padding:5px 0 0 8px;
font-size:20px;
text-decoration:none;
}
.three_clm_text {
padding-top:7px;
clear:both;
line-height:19px;
}
/*** portfolio ****************************************************************/
#port_title h1 {
margin:15px 0;
font-size:34px;
font-weight:normal;
}
#port_wrap {
padding:32px 0 0 0;
}
.port_block {
float:left;
margin:0 22px 22px 0;
padding:7px;
background-color:#d6d9da;
border:1px solid #a7a9a9;
width:426px;
height:346px;
}
.port_img {
position: relative;
border:1px solid #fff;
background-color:#fff;
width:425px;
height:324px;
}
.port_txt {
position: absolute;
top: 110px;
left: 0;
padding:2px 0 0 10px;
width:240px;
height:18px;
background-color:#fff;
}
.port_mag_img {
position: absolute;
top: 10px;
left: 81px;
}
.port_txt a {
font-weight:bold;
text-decoration:none;
}
.port_img img {
border:none;
}
/*** blog / static page *******************************************************/
#header {
height:139px;
background-repeat:no-repeat;
background-position:top center;
padding-top: 1px;
padding-bottom: 1px;
}
#breadcrumb {
padding:15px 0 0 0;
height:25px;
color:#fff;
font-weight:bold;
}
#breadcrumb a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
/*** sidebar ***/
#sidebar {
float:left;
margin:25px 0 0 0;
width:220px;
}
.sidebar_block {
margin:0 0 35px 0;
}
.sidebar_heading {
font-size:18px;
border-bottom:5px solid #d6d9da;
color:#23353e;
}
#sidebar ul {
margin:0;
padding:0;
list-style-type:none;
}
#sidebar ul li a {
display:block;
padding:4px 0 0 30px;
height:21px;
border-bottom:1px solid #d6d9da;
text-decoration:none;
color:#B3BCBF;
background-image:url(../images/bullet_arrow.jpg);
background-repeat:no-repeat;
}
#sidebar ul li ul li a {
padding:4px 0 0 54px;
background-image:url(../images/bullet_arrow_sub.jpg);
background-repeat:no-repeat;
}
#sidebar a:hover {
color:#959D9F;
}
#search_form {
margin:5px 0 0 1px;
width:216px;
height:24px;
border:1px solid #d6d9da;
background-color:#fff;
}
#search {
float:left;
padding:3px;
width:180px;
border:none;
}
.search_btn {
float:right;
margin:1px 0 0 0;
background-image:url(../images/search_icon.jpg);
background-repeat:no-repeat;
background-position:center;
border:none;
background-color:transparent;
cursor:pointer;
width:25px;
height:22px;
}
/*** content ***/
#content {
float:left;
margin:25px 0 0 55px;
width:645px;
}
#contentblog {
float:left;
margin:25px 0 0 55px;
width:100%;
}
#content_full {
float:left;
margin:25px 0 0 0;
}
.post_block {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
border-bottom:1px solid #d6d9da;
}
#page_block {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
}
#page_title h1 {
margin:0 0 5px 0;
padding:0;
font-size:34px;
font-weight:normal;
}
#content h1 a {
font-size:34px;
font-weight:normal;
}
.post_meta {
height:20px;
font-weight:bold;
color:#929393;
}
.post_meta a {
text-decoration:none;
font-weight:bold;
color:#929393;
}
.post_img {
padding:7px 0;
margin:10px 0;
border-top:1px solid #d6d9da;
border-bottom:1px solid #d6d9da;
}
.post_txt {
line-height:20px;
color:#23353e;
}
.post_txt img {
padding:3px;
border:1px solid #b3b3b3;
}
.onethird {
padding: 0 0 0 15px;
float:left;
width:30%;
}
.onehalf {
padding: 0 0 0 15px;
float:left;
width:47%;
}
.twothirds {
padding: 0 0 0 15px;
float:left;
width:64%;
}
.post_readmore {
margin:5px 0 0 0;
}
.post_readmore a {
text-decoration:none;
font-weight:bold;
color:#23353e;
}
#pagination {
margin:15px 0;
height:32px;
}
#pagination ul {
margin:0;
padding:0;
list-style-type:none;
}
#pagination ul li { float:left;}
#pagination ul li a {
float:left;
margin:0 5px 0 0;
padding:8px 0;
width:31px;
height:23px;
color:#fff;
text-decoration:none;
text-align:center;
font-weight:bold;
background-image:url(../images/pagination.jpg);
background-repeat:no-repeat;
}
#pagination ul li a.active, #pagination ul li a:hover {
background-image:url(../images/pagination_active.jpg);
background-repeat:no-repeat;
}
/*** comments *****************************************************************/
#comments {
margin:0 0 40px 0;
}
.comm_block {
padding:25px 0 25px 0;
border-bottom:1px solid #e7e7e7;
}
.comm_avatar {
float:left;
padding:3px;
width:50px;
height:50px;
background-color:#fff;
border:1px solid #e7e7e7;
}
.comm_meta {
float:left;
margin: 0 0 0 20px;
width:550px;
}
.comm_author {
font-size:16px;
}
.comm_text {
float:left;
margin: 0 0 0 20px;
width:564px;
line-height:18px;
}
.comm_even {
background-color:#fff;
}
#comm_form {
margin:20px 0;
}
/*** contact ******************************************************************/
#contact_txt {}
#google_map {
margin:5px 0;
border:1px solid #b3b3b3;
}
#contact_form {
margin:20px 0;
}
.err {
color:#BF2323;
}
/*** forms ********************************************************************/
.form_tb {
padding:3px;
width:400px;
height:18px;
border:1px solid #b3b3b3;
color:#254A59;
}
.form_ta {
padding:3px;
width:639px;
height:150px;
border:1px solid #b3b3b3;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
color:#254A59;
}
.form_btn {
padding:5px 7px;
font-family:Arial, Helvetica, Verdana, sans-serif;
font-size:12px;
color:#fff;
border:none;
background-color:#fff;
cursor:pointer;
background-repeat:no-repeat;
width:114px;
height:33px;
}
/*** global *******************************************************************/
ul {
padding:0 0 0 30px;
list-style-type:square;
}
ol {
padding:0 0 0 30px;
}
a {
color:#03181F;
}
p {
margin:0 0 10px 0;
}
h1 {
margin:0 0 15px 0;
font-size:34px;
font-weight:normal;
}
h1 a {
text-decoration:none;
}
h2 {
margin:0 0 7px 0;
font-size:24px;
font-weight:normal;
}
h3 {
margin:0 0 5px 0;
font-size:18px;
font-weight:normal;
}
h4 {
margin:0 0 5px 0;
font-size:16px;
font-weight:bold;
}
h5 {
margin:0 0 3px 0;
font-size:14px;
font-weight:bold;
}
blockquote {
margin:20px 0 20px 30px;
padding:0 10px;
border-left:5px solid #dbdbdb;
}
strong {
font-weight:bold;
}
.hidden {
display:none;
}
.noborder {
border:none;
}
.noimage {
background-image:none;
}
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
view page source to see the home page. I dont have the footer in an incorrect div (that i can see) Please can someone far smarter than me see whats going on here. I have taken the footer apart, edited the style sheet a 100 different gut-shot ways, tried to recreate the page, ripped apart the wrapper and other sections... If I touch the height on the footer push, the whole footer moves to the center of the page... If I try to move around it, I get dead space between the end of the text and the beginning of the footer.... PLEASE someone show me what im missing, ive lost hair over this, and my laptop is about to find out if its impact resistant. Hi! My first post I got a problem with my sticky footer as you can see the footer is fine, fixed to the bottom of the page but I got an unnecessary scroll The site: www dot flyttamig dot com think the problem is that i put 100% height on html html, body { margin:0; padding:0; height:100%; } Can you guys help me get rid of this scroll Thanks |
|||||||