Un Footer me rends dingue...

.footer  
{ 
position:absolute; 
bottom:0px; 
} 

		
<table id="footer">
<tr>
<td id="footerG">
McDonald's Suisse
</td>		
<td >		
<img src="..\pictures\LogoIT.jpg" class="BorderImages" usemap="#Map"> 
<map name="Map">
<area shape="circle" coords="100,28,25" href="..\web\home.php?Page=Login">
</map>
</td>
<td id="footerD">		
</td>
</tr>
</table>
</body>
</html>

#footer
{
	text-align:center;
	margin-top:10px;
	bottom:0;
	left:0;
	width:100%;
	height:50px;
}
#footerG
{
	text-align:left;
}
#footerD
{
	text-align:right;
}

<script src="js/setFooter.js">
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var articleHeight = document.getElementsByTagName("article")[0].offsetHeight;
var headerHeight = document.getElementsByTagName("header")[0].offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
footerElement.style.top = (articleHeight + headerHeight + footerHeight) + 'px';
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
</script>