Footer nav bar hides behind wedding

Good Morning from York UK.

On my home page http://www.davidclick.com the footer is not where I want it to be on version 6.0.9 on IE. I think the problem is I have used an absolute positioning reference so it looked fine on my monitor size but doesnt on others :frowning:

So my question is how could I make the footer sit below the home page nav
regardless of monitor size and browser.

Thanks in Advance,
David

Finally got round to tackling the footer appearing half way up the page in older versions of IE. Do i really have to do the design again in relative positioning
to get the footer just to stick at the bottom? I worry i could make matters worse.

But if this is the only way then so be it, I’d just like to get approval from a sitepoint member that this is the only way to tame the footer on page www.davidclick.com floating half way up the page…

youre right, i’m going to do this home page again. The sticky plaster technique has run dry, i need to build it properly.

Thanks Paul for your reply, much appreciated. Before I change the code just one thing. The floating footer is a problem in IE V 6.0.2900.

If I applied the fixed rule would that resolve it or would it still remain a prob in
IE V 6.0.2900

Thanks in advance :slight_smile:

No Ie6 doesn’t understand position:fixed so the problem would still be there.

As mentioned above you have used absolute positioning for your content elements and therefore you can’t clear them to place a footer below. You would need to change the design to floated.

This is very rough but something basically like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>York wedding photographer - davidclick.com Call David Honan 077520 28747</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<link rel="stylesheet" type="text/css" href="css/frontpage.css" />
<meta name="google-site-verification" content="QuJCWse990KzCSW_6xHnJI8RemJ4uORIrAxU96bO6ug" />
<style>
body {
    background-color:#747170;
    margin:0px;
    min-width:1080px;
}
#container {
    width:50&#37;;
    margin-left: auto;
    margin-right: auto;
    background-color:#323C4D;
}
#tree {
    position: absolute;
    margin-left: 65%;
    margin-top: 10%;
    bottom: 0;
    background:  url(http://www.davidclick.com/images/tennis.jpg) no-repeat;
    width: 331px;
    height: 400px;
    top: 70px;
    z-index: 10;
}
#logo a {
    text-decoration: none;
    color: #CDCC00;
}
#logo a:hover {
    color: white;
}
#logo {
    padding-top:0px;
    float:right;
    width: 500px;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
}
#logo .datestamp {
    font-style:italic;
    font-size:small;
    text-decoration:underline;
    padding-bottom:40px;
}
#logo p {
    font-size:1.25em;
}
#intro {
    float:left;
    margin:1% 0 0 4px;
    display:inline;
    background:  url(http://www.davidclick.com/images/photographer_11.jpg) no-repeat;
    padding: 0px 0 20px 65px;
    width: 500px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    font-stretch:semi-expanded;
    font-weight:200;
}
#intro .marginzap {
    padding-bottom:-1px;
    margin-bottom:-1px;
}
#intro .marginzap2 {
    padding-top:-7px;
    margin-top:-7px;
}
#intro h1 {
    padding-top: 0px;
    margin-top:0px;
    padding-left:5px;
}
#intro a {
    text-decoration: none;
    color: #CDCC00;
}
#intro a:hover {
    color: white;
}
#footer {
    position:fixed;
    clear:both;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px dotted #AAAAAA;
    background-color: #747170;
    color: white;
    font-family: Georgia, serif;
    z-index: 50;
}
#footer p {
    margin: 0.5em;
    padding: 0;
    z-index: 50;
}
#footer a {
    text-decoration: none;
    color: #CDCC00;
}
#footer a:hover {
    color: white;
}
#intro span {
    position: absolute;
    top: -1000px;
}
#intro p {
    margin: 0px;
    color: #CDCC00;
    font-weight: bold;
    padding: 0px;
}
#portfolio ul {
    position: relative;
    margin-left: 40px;
    z-index: 20;
    list-style: none inside;
    width: 482px;
    padding-bottom: 20px;
}
/* This is a one line comment in CSS */
#portfolio ul li {
    width: 135px;
    height: 135px;
    float: left;
    margin: 0px 18px 18px 0;
    background:  url(http://www.davidclick.com/images/bg_checkered_test_10.gif);
    z-index: 20;
}
#portfolio ul li a {
    float: left;
    width: 102px;
    height: 102px;
    margin: 18px 0 0 18px;
    z-index: 20;
}
#portfolio ul li a img {
    border: 0;
    z-index: 20;
}
#nav {
    list-style-type: none;
    position: absolute;
    margin-top: 10px;
    padding-bottom: 0px;
    top:120%;
    margin: 0;
    padding: 0;
    background: #CCCC00;
    list-style-type: none;
    width: 767px;
    float: left; /* Contain floated list items */
}
#nav li {
    margin: 0;
    padding: 0;
    float: left;
    display: inline;
}
#nav a {
    float: left;
    width: 100px;
    color: #FFF;
    text-decoration: none;
    line-height: 2.5;
    text-align: center;
    border-right: 1px solid #FFF;
}
#nav #nav_con a {
    border: none;
}
#nav a:hover {
    background: #FF9933;
}
#body_hom #nav_hom a, #body_map #nav_map a,  #body_jou #nav_jou a, #body_his #nav_his a,  #body_ref #nav_ref a,  #body_con #nav_con a {
    background: #BEB06F;
    color: #1A1303;
    font-weight: bold;
}
.boldblack {
    color:#000;
    font-weight:bold;
}
#container {
    width:80%;
    margin-left: auto;
    margin-right: auto;
    background-color:#cdcc00;
}
</style>
</head>
<body>
<div id="logo">
    <h2>Hi and welcome to davidclick.com - York's wedding photographer.</h2>
    <p><strong>"York wedding photography with personality"</strong><br/>
        If you want a <strong><a href="web_page/about_me.htm" title="York wedding photographer">York wedding photographer</a> </strong>who's got the personality to keep everyone smiling, willing to give you total control over your pics and delivers drop dead gorgeous  Graphistudio wedding albums you're in luck ;-)</p>
    <p>Using the very best of Nikon camera equipment &amp; Elinchrom studio lighting, professional wedding photographic services comes as standard as does a few laughs along the way.</p>
    <p>York & Leeds areas covered.</p>
    <p>Call David Honan today on 077520 28747 / 01904 410 142 and get your wedding photographer booked for 2010 and 2011.</p>
    <p class="datestamp">Last updated: 11th May 2010, just after Later Live with Jools Holland.</p>
</div>
<div id="intro">
    <h1>York wedding photographer www.davidclick.com </h1>
    <h2 class="marginzap">Tel 01904 410142 / 077520 28747</h2>
    <h2 class="marginzap2"><a href="web_page/louisa_simon.htm" title="York wedding photographer examples">Examples</a> | <a href="web_page/prices.htm" title="York wedding photographer prices">Prices </a>| <a href="web_page/about_me.htm" title="York wedding photographer with personality">About Me</a> | <a href="york_wedding_photographer_advice.htm" title="York wedding photography advice">Advice</a></h2>
</div>
<div id="portfolio">
    <ul>
        <li><a href="../web_page/louisa_simon.htm" title="York wedding photographer - KP Club examples"><img src="http://www.davidclick.com/images/thumb/louisa_ready_99.jpg"alt="&#8220;The big kiss &#8221;" /> </a></li>
        <li><a href="http://www.davidclick.com/web_page/thumbnails.html" title="York wedding photographer - Swinton Park examples"><img src="http://www.davidclick.com/images/thumb/kirsty_drew_graden_front_99_99.jpg" alt="&#8220; Keep your distance bridesmaids, this is my show &#8221;"/></a></li>
        <li><a href="../web_page/thumbnails2.htm" title="York wedding photographer - Feversham Arms examples"><img src="http://www.davidclick.com/images/thumb/gaze_99_2.jpg" alt="&#8220;eyes meet&#8221;"/></a></li>
        <li><a href="../web_page/thumbnails5.htm"><img src="http://www.davidclick.com/images/thumb/confetti_99_2.jpg" alt="&#8220; Hey stop pouring confetti down my back!&#8221"/></a></li>
        <li><a href="../web_page/richard_jodie.htm"><img src="http://www.davidclick.com/images/thumb/Rj_museum_99_99.jpg" alt="&#8220; ST Mary VIP's &#8221;"/></a></li>
        <li><a href="../web_page/thumbnails3.htm"><img src="http://www.davidclick.com/images/thumb/sophie_smile_99.jpg" alt="&#8220; Dress amazing at any angle :-) &#8221;"/></a></li>
    </ul>
</div>
<div id="footer">
    <p><a href="mailto:david.honan@btinternet.com" title="eMail York wedding photographer David Honan">david.honan@btinternet.com</a> | <a href="web_page/prices.htm" title="York wedding photographer prices">Prices</a> | Studio: 5 Drummond House | 
        College Mews | Heworth Green | York | Y031 7SH | Tel: 01904 410 142 / 077520 
        28747</p>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1376189-4");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>



It really needs to be redone in a more logical and fluid manner though but I’m short of time today:)

If you are not worried about IE6 then just set the footer to position:fixed instead. (IE6 doesn’t understand fixed positioning but IE7/8 are fine).


#footer {
[B] position: fixed;[/B]
 left: 0;
 bottom: 0;
 width: 100&#37;;
 border-top: 1px dotted #AAAAAA;
 background-color: #747170;
 color: white;
 font-family: Georgia, serif;
 z-index: 50;
}

You will also need to ensure that the last content element on the page has some padding-bottom so that it can be scrolled above the footer and sit behind it.

As all the content is absolutely positioned, none of it can influence the position of the footer at all. You need to try and redo the layout without the absolute positioning, allowing elements to stack naturally against each other spaced with margins - the footer will then naturally follow.

Yes it is absolutely positioned, but you need to put the following in to have it forced to the bottom of the page…


position: absolute;
left: 0;
bottom: 0;
width: 100&#37;;

This tells it to stretch the full width of the screen, be positioned at the bottom left hand side, and remain there. This will not work however if you scroll the page (it will stay where it is)… to make it stay at the bottom on scrolling - if this is what you want, you will need to trigger fixed positioning.

PS: Centauri is correct if you wish to keep it in the document flow, however I took it by the fact you were using absolute positioning your aim was to keep it forced to the bottom of the page, which my technique will work for you - at least for the page as it is.

Thank You so much that worked :):):slight_smile: