I recently made some updates to my aging website by adding a footer menu. However, I encountered an issue with the placement of the footer on Google Chrome. It appears too high, overlapping certain elements of the site. I attempted to resolve this problem by inserting "<center>" before the footer, but it did not provide a solution.
Upon testing across various browsers, here are my findings:
- Google Chrome Canary displays correctly
- Firefox and Internet Explorer display correctly
- Opera and Safari display correctly
- Standard Google Chrome does not work as expected
I have tested this on two computers running Windows, both using Google Chrome version 31.0.1650.63 m. The Canary version 34.0.1768.0 canary shows proper alignment.
The footer consists of tables and other HTML elements. Disabling the CSS did not rectify the issue. Is there a way to ensure that the footer consistently appears at the bottom of the website? You can view the problematic page at this link, with similar problems occurring on multiple pages of the same website.
Here is the HTML code for 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">
... (omitted for brevity)
Additionally, here is the corresponding 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;
}
... (CSS rules continue)
While I acknowledge the HTML may not be entirely valid due to the age of the site, I am focused on resolving the footer positioning across all browsers. Any suggestions on how to address this bug would be greatly appreciated.