How do I stick my footer to bottom of the page with Google Chrome?


Tags: html,css,google-chrome

Problem :

I have an old website and I recently added a footer menu to this website. The footer menu should be at the footer of the website, below everything else. But I found out that with Google Chrome, the footer appears too high - above some parts of my website. I tried and didn't find a way to fix it. I tried adding "<center>" before the footer, but it doesn't solve the problem.

I tested this on different browsers and found following results:

  • with Google Chrome Canary it's fine
  • with FireFox and Internet Explorer it's fine
  • with Opera and Safari it's fine
  • with Google Chrome it's not working

I checked this on two computers (with Windows, Google Chrome version 31.0.1650.63 m). The Canary version is 34.0.1768.0 canary and there it looks fine.

The footer contains tables and some other HTML elements, I tried to disable the CSS but it doesn't solve the problem. Do you know how to make the footer appear at the footer of the website? The link of the page is http://www.speedysoftware.com/composer/appendix-7/, and the same problem appears on a few pages of this website.

This is the HTML of the footer:

<center>
<div class="footer" id="footer">

<div class="links_table" >
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="bottomlinks" dir="ltr">
<tbody><tr align="center" valign="top">
<td align="center" width="100%">

<table cellspacing="5" cellpadding="0" border="0" dir="ltr">

<tbody><tr align="center" valign="top"><td><table cellspacing="0" cellpadding="0" border="0" dir="ltr"><tbody><tr align="center" valign="bottom">
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/about/" title="About">About</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/privacy/" title="Privacy">Privacy</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/terms/" title="Terms of Service">Terms</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/contact/" title="Contact Us">Contact Us</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://sourceforge.net/project/project_donations.php?group_id=57192" title="Donate to Speedy Composer">Donate</a></td>
</tr></tbody></table></td></tr>

<tr align="center" valign="top"><td>&nbsp;</td></tr>

<tr align="center" valign="top"><td><table cellspacing="0" cellpadding="0" border="0" dir="ltr"><tbody><tr align="center" valign="bottom">
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/" title="Speedy Net">Speedy Net</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedycomposer.com/" title="Speedy Composer">Speedy Composer</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedywhois.com/" title="Speedy Whois">Speedy Whois</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.speedy.net/wordpress/" title="Speedy Net WordPress">Speedy Net WordPress</a></td>
</tr></tbody></table></td></tr>

<tr align="center" valign="top"><td>&nbsp;</td></tr>

<tr align="center" valign="top"><td><table cellspacing="0" cellpadding="0" border="0" dir="ltr"><tbody><tr align="center" valign="bottom">
<td nowrap="nowrap" dir="ltr"><a href="http://www.cafepress.com/speedynet" title="Speedy Net's Shop">Speedy Net's Shop</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.cafepress.com/speedycomposer" title="Speedy Composer's Shop">Speedy Composer's Shop</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.cafepress.com/speedy_s" title="Speedy S-logo Shop">Speedy S-logo Shop</a></td>
</tr></tbody></table></td></tr>

<tr align="center" valign="top"><td>&nbsp;</td></tr>

<tr align="center" valign="top"><td><table cellspacing="0" cellpadding="0" border="0" dir="ltr"><tbody><tr align="center" valign="bottom">
<td nowrap="nowrap" dir="ltr"><a href="http://www.php.net/" title="PHP">PHP</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.mysql.com/" title="MySQL">MySQL</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.java.com/" title="Java">Java</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.mathworks.com/products/matlab/" title="MATLAB">MATLAB</a></td>
<td nowrap="nowrap" dir="ltr">&nbsp;·&nbsp;</td>
<td nowrap="nowrap" dir="ltr"><a href="http://www.gnu.org/software/octave/" title="Octave">Octave</a></td>
</tr></tbody></table></td>
</tr>

</tbody>
</table>

</td>
</tr>
</tbody></table>
</div>

</div>
</center>

And this is the CSS:

.footer, .push {
    /* .push must be the same height as .footer */
    /* height: 82px; */
    height: 102px;
}

.footer {
    text-align: center;
    /* border-top: 1px solid #B2CAFA; */
    clear: both;
    font-size: 13px;
    line-height: 1;
    position: relative;
}

.footer table {
    border-collapse: collapse;
    border-spacing: 0;
}

.footer a {
    text-decoration: none;
    font-weight: normal;
    font-size: 13px;
    color: #3D70A3 !important;
}

.footer a:visited {
    color: #3D70A3 !important;
}

.footer a:link {
    color: #3D70A3 !important;
}

.footer a:active {
    color: #3D70A3 !important;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .links_table {
    padding-top: 10px;
}

I know the HTML is not completely valid, but this is an old website and I don't have the time to validate it. I just want the footer to be in the correct position in all browsers. Do you know how to fix this bug?



Solution :

I think that it's the chrome's bug in ordering elements.

Chrome displaying dom elements in strange order, then fixed on refresh

When I change the center tag's styles in inspector (e.g. change display to different values) then it is rendered correctly. Try to place the

<center>
...
</center>

with

<div style="margin: auto;">
...
</div>

And make your codes standard, as soon as possible!


    CSS Howto..

    how to give style to the selected option in html

    angularjs ui-grid changing column height to auto causes weird line to show up on other columns

    How can I make the side elements spin on the x-axis in this animation?

    how to vertical align a table inside a div

    How to edit the CSS of a div that does not contain a H1 tag?

    how to position several div tags over each other

    How to apply picture for submit button

    How to wrap text without whitespace? [duplicate]

    Weird CSS effect with box shadows - how to solve?

    How to crop/cut off an image so it fits the height of the browser window?

    how to change triangle to up arrow using pure css

    CSS border shape - how to cut off rectangle right upper corner [duplicate]

    Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them?

    How do I move this scrolling bar closer to the post area?

    How to set a child's element 50px narrower to its parent element in css? [closed]

    When i Check the Checkbox how do I change that specific row style? C# ASP.NET

    How to set an Ionic list item height with a background image

    How to make CSS 3 columns stay in their posisiton?

    How do I format tabs in Blueprint CSS?

    How to show css div depending upon model value?

    How can I enqueue Internet Explorer specific stylesheets in the Wordpress functions folder?

    Have there been measurements on how much faster CSS is than Javascript for coding an effect? [closed]

    How to stack divs from top to bottom in CSS

    How can i set png icon collection with CSS?

    In CSS, how to grow the button + button image when the button is focused?

    How do I align something in a in the top-left corner - without aligning everything?

    How to achive certain overlapping layout when there is not enough space in parent container?

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    How to style textbox using CSS in ASP.NET

    How do you align left / right a div without using float?