Hi everyone,
I am in some serious need of some insight on a problem I'm having. I
have a web application I am nearly finished with, and am at the point
where I am styling everything, and getting the overall interface of
the application professional looking, and presentable.
I have everything else complete, except for one thing; the footer.
Being the content of the application is dynamic, and get's queried
from a database, and rendered on the page, the height of any given
page could vary. I limit the height of certain pages to an extent
using pagination to limit how many records can be rendered, but
regardless, I need a dynamic solution.
As far as what matters here, the HTML, this is what I have.
--------------------------------
<!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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Student Help Portal</title>
<%= stylesheet_link_tag 'scaffold', 'style' %>
<%= init_tinymce_hammer_if_required %>
</head>
<body>
<div id="container">
<div id="head">
<div class="head">
</div><!-- End .Head -->
<div class="head">
<h2>Student Help Portal</h2>
</div><!-- End .Head -->
<div class="head">
<div id="headinfo">
</div><!-- End Headinfo -->
</div><!-- End .Head -->
</div><!-- End #Head -->
<div id="content">
</div><!-- End Content -->
</div><!-- End Container -->
<div id="footer">
</div><!-- End Footer -->
</body>
</html>
-----------------------------------------------
Here is the CSS for this divs and such:
-------------------------------------------------
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
min-height: 100%;
}
h1 {
text-align: center;
}
h2 {
font-family: verdana;
font-size: 36pt;
}
#container {
position: relative;
min-height: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: -50px;
}
* html #container {
height: 100%;
}
#head {
background-color: #cccccc;
width: 100%;
height: 140px;
}
.head {
float: left;
}
#headinfo {
width: 200px;
text-align: right;
margin-right: 10px;
}
#content {
/* position: absolute;
top: 140px;
left: 0;
width: 100%; */
padding-bottom: 9em;
}
#footer {
position: relative;
/* top: -5%;
height: 50px; */
margin-top: -7.5em;
background-color: #ffffcc;
}
----------------------------------
Basically what happens is, the footer goes near the bottom, but not
quite, and will not "budge" at all. Here is a screenshot of what I
mean: http://justinbrinkerhoff.info/img/helpdesk_footer_bottom.png
When I set the height on the footer, it is not visible at all, hence
why I had height temporarily commented out.
If I take a similar approach, I end up with the footer at the "bottom"
when the page is first loaded, but after you scroll down, it does not
move at all. Here is a screenshot of that:
http://justinbrinkerhoff.info/img/helpdesk_floating_footer.png
I am using Firefox 3.6, so I don't know why something that should at
minimum, work with at Netscape based browser like Firefox.
I have tried tutorials at:
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/
http://www.themaninblue.com/writing/perspective/2005/08/29/
http://csscreator.com/node/4104
None of which has really helped. They are all in essence, following
the same approach with some subtle differences. But for whatever
reason, this is just not working for me. I wished I knew why...
In any case, if someone could help me straighten out this strange
footer problem, I would be beyond grateful.
Thanks in advance for all your help.
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
To unsubscribe, reply using "remove me" as the subject.
