No replies
synical21
Offline
newbie
Last seen: 12 years 15 weeks ago
Timezone: GMT+1
Joined: 2009-10-10
Posts: 1
Points: 1

Hello Experts,
I have a problem introducing a stick footer to my webpage and i think it is due to my messy html, This is my first project on developing a website so my template is really messy and i cannot fix it as i dont know what i can delete etc ill show you it and i wonder if you can tell me why it doesnt work.

To be more precise with the problem the footer just comes out completly wrong, ive had it working on all my other pages but when i try with sticky footer it displays in the wrong alignment and the backround image is not aligned correctly either. I believe it is because normally i kept the footer like this

#outerWrapper #footer {
padding: 30px 60px 0px 10px;
background: url(images/footer-bg.png) no-repeat left top;
height: 58px;
color: #999999;
text-align: left;
line-height: 22px;
}

So keeping it in the outer wrapper kept it all nice, so when i take away the outer wrapper and just use footer to make it sticky on its own it all goes wrong.Can you help me overcome this?

if you need more info or screenshots i can supply.

<!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>
<style type="text/css"></style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="metatags" -->
<title>reate Job</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css" media="all">
<!--
@import url("styles.css");
* {/* for demo only*/
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:center;
}
body {
    background:#333
}
#outer {
    width:890px;
    background:#fff;
    margin:auto;
    min-height:100%;
    margin-top:-59px;/*footer height - this drags the outer 40px up through the top of the monitor */
    text-align:left;
}
#header {
    border-top:59px solid #fff;
}
#footer {/* footer now sits at bottom of window*/
    background:#fff;
    width:890px;
    margin:auto;
    height:58px;/* must match negative margin of #outer */
    clear:both;
    border-top:1px solid #000;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
-->
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
#outerWrapper #contentWrapper #content-left, #outerWrapper #contentWrapper #content-right {
  zoom: 1;
}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
    <div id="header">
        <div id="headlinks"> <a href="index2.php">Home</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Forums</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Help</a></div>
        <img src="images/logonoblock.png" width="168" height="71" alt="logo" /></div>
    <div id="topinfo-noimage"></div>
    <div id="outerWrapper">
        <div id="contentWrapper">
            <div id="leftColumn1"><!-- TemplateBeginEditable name="leftsidebar" --><strong>Workers Menu</strong>
                <ul>
                    <li></li>
                    <li><a href="jobs.php">Available Jobs</a></li>
                    <li><a href="">Finished Jobs</a></li>
                    <li><a href="myaccount.php">My Account</a></li>
                    <li><a href="logout.php">Logout</a></li>
                    <li><a href=""> Withdraw Money</a></li>
                </ul>
                <div id="leftColumnContent"> <strong> Employers Menu</strong>
                    <ul>
                        <li></li>
                        <li><a href="job_create.php">Create Jobs</a></li>
                        <li><a href="myjobs.php">My Jobs</a></li>
                        <li><a href="myaccount.php">My Account</a></li>
                        <li><a href="#"> Deposit Money</a></li>
                    </ul>
                    <div class="sidebarbox">
                        <div class="sidebarboxtop">
                            <p><strong>Your Account</strong></p>
                            <p>
                            <p><font color="#336600">Name:</font> <? echo $_SESSION['user_realname'];?></p>
                            <p><font color="#336600">Jobs Completed:</font><? echo $_SESSION['jobs_completed'] ;?></p>
                            <p><font color="#336600">Earnings:</font> $0<br />
                            <p><font color="#336600">Deposited:</font> $<? echo $_SESSION['user_money'] ;?> </p>
                            <p> </p>
                        </div>
                        <div class="sidebarboxbottom"></div>
                    </div>
                </div>
                <!-- TemplateEndEditable --></div>
            <div id="content-right"><!-- TemplateBeginEditable name="maincontent" -->
                <h1>Create A Job</h1>
                <?php CONTENT-=-=-?>
                <!-- TemplateEndEditable --></div>
            <br class="clearFloat" />
        </div>
    </div>
</div>
<div id="footer">
    <p><a href="#">Home</a>| <a href="#">Services</a> | <a href="#">About Us</a> | <a href="#">Contact Us</a> | <a href="#">Terms &amp; Conditons</a> | <a href="#">Privacy</a></p>
    <p>This site is copyright © 2009</p>
</div>
</body>
</html>