...

View Full Version : Resolved Push (for footer) riding up.



Fisher
03-08-2009, 11:38 PM
Okay, like many others I've got a problem with a footer. The push technique works well if there's enough in the main content, but the push itself rides up the page if there isn't.
Example pages:
good page (http://mytestingsite.info/noproblem.html)
bad page (http://mytestingsite.info/problem.html)

Relevant CSS:
html, body {
height: 100%;
font-family: Arial, sans-serif;
background:#CCC;
}
* {
margin: 0;
padding: 0;
}
#container {
width: 780px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px;
text-align: left;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
#header {
background:#03C;
width:780px;
height:75px;
top: 0px;
color:#FFF;
}
#main {
width:780px;
background:#FF9;
float:left;
text-align: left;
height:100%;
}
#left {
width:175px;
margin-top:20px;
float:left;
background:#FF9;
height:100%;
}
#right {
width:605px;
margin-top:20px;
float:left;
background:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#444;
height:100%;
}
#footer, #push {
clear:both;
width: 780px;
height: 50px;
margin: 0 auto;
background:#999;
color:#000;
font-size:10px;
text-align:center;
}

xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<link href="mainstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="nav2">
<ul id="homelinks">
<li><a href="index.html" name="top">Home</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</div>
<h3 class="headline">WEBSITE TITLE HERE</h3>
</div>
<div id="nav1">
<ul id="links">
<li id="about"><a href="index.html"><span>About</span></a></li>
<li id="location"><a href="index.html"><span>Location</span></a></li>
<li id="services"><a href="products.html"><span>Featured Products &amp; Services</span></a></li>
<li id="blah"><a href="index.html"><span>Blah, Blah, &amp; more Blah</span></a></li>
</ul>
</div>
<div id="main">
<div id="left">
<h5><a href="#cat_1">Category 1</a></h5>
<ul>
<li><a href="#prod_a">Product a</a> </li>
<li><a href="#prod_b">Product b</a> </li>
</ul>
<h5><a href="#cat_2">Category 2</a></h5>
<ul>
<li><a href="#prod_c">Product c</a> </li>
<li><a href="#prod_d">Product d</a> </li>
</ul>
<h5><a href="#cat_3">Category3</a></h5>
<ul>
<li><a href="#prod_e">Product c</a> </li>
<li><a href="#prod_f">Product d</a> </li>
</ul>
<h5><a href="#cat_4">Category 4</a></h5>
<ul>
<li><a href="#prod_j">Product j</a><br/>
</li>
<li><a href="#prod_k">Product k</a><br/>
</li>
</ul>
<h5><a href="#cat_5">Category 5</a></h5>
<ul>
<li><a href="#prod_l">Product l</a><br/>
</li>
<li><a href="#prod_m">Product m</a><br/>
</li>
</ul>
</div>
<div id="right">
<h2>Page Title</h2>
<p class="descrip">Page description here. Page description here. Page description here.<br/>
Page description here. Page description here. Page description here.<br/>
Page description here. Page description here.</p>
<div class="product" style="margin-bottom:20px;">
<h3 class="title"><a name="cat_1">CATEGORY 1</a></h3>
<hr />
<ul>
<li>
<div class="text">
<h4><a name="prod_a">Product a</a></h4>
<p>Product description. Product description. Product description. Product description. Product description.</p>
<p>Product description. Product description. Product description.</p>
</div>
<div class="product_pic"><img src="images/image1.gif" width="165" height="110" alt="" /></div>
</li>
<li>
<div class="text">
<h4><a name="prod_b">Product b</a></h4>
<p>Product description. Product description. Product description. Product description. Product description.</p>
<p>Product description. Product description. Product description.</p>
</div>
<div class="product_pic"><img src="images/image1.gif" width="165" height="110" alt="" /></div>
</li>
</ul>
</div>
<a href="#top" class="return">Back To Top</a></div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<p>Copyright blah blah blah</p>
</div>
</body>
</html>

Excavator
03-09-2009, 03:55 AM
Hello Fisher,
The push is supposed to be up there since it's only needed when it gets pushed within reach of the footer.
Have you seen my example at http://nopeople.com/CSS/full-height-layout/index.html ? I'm sure you have by now since full height layouts seem to be the request of the week and I've been posting that link a lot lately.

Anyway, check the source on that. There is a bit of inline coderemoving the background color from #push.

Fisher
03-09-2009, 04:17 AM
Thanks a lot. Yes I have seen your page. In fact I have a copy of it on my desktop and I think you must have just addded that inline code because I can't see it in my copy. :p

That did the trick. I'll work on getting the div full height later on. Probably just change the container colour though.

Thanks.

Excavator
03-09-2009, 05:26 AM
Thanks a lot. Yes I have seen your page. In fact I have a copy of it on my desktop and I think you must have just addded that inline code because I can't see it in my copy. :p

That did the trick. I'll work on getting the div full height later on. Probably just change the container colour though.

Thanks.

That was something I did just to keep the CSS neat and tidy, and to make positive sure #push didn't inherit a bg color from #footer. I should change that though - since I'm the first to complain about inline CSS when anyone else uses it!

Is it really missing from your version? my version that has text in it did not have the inline style getting rid of the background color - oops!

Excavator
03-09-2009, 06:14 AM
Interesting bit of research here.
I wanted to make sure background:none; got rid of the bg color on #push and make doubly sure that #push does not inherit a color from something else.

The order of CSS is important, #push {background:none;} needs to go after the styling for #footer, #push that is setting a bg color.

Then I was unsure whether I should use background:none; or background-color:transparent;
Turns out, the shorthand background property sets all the individual properties to their initial values.
Individual properties are:

background-color
background-image
background-repeat
background-attachment
background-position
inherit

And background-color's initial value is transparent.

In otherwords, either one works fine.

see:http://www.w3.org/TR/CSS21/colors.html#propdef-background

Fisher
03-09-2009, 02:53 PM
I tried it both ways, but FF seems unaffected by the order. If I put either background-color:transparent or background:none at the beginning of the document, FF displays it the same as if I put the property after. In actuality, FF seems to be interpreting the CSS wrong, as using the shorthand value background later in the document should negate the first.

IE6 cannot handle either of these values first though. It must come after the #push, #footer declarations. There is an interesting side-effect however that both left and right columns achieve their 100% height without any other help in IE6. The footer is pushed to below the window frame though.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum