Browser Compatibility Issues

Hello.

I’m almost finished with the development of my business site. Mostly, I just have to work out the aesthetics of it. However, when doing some cross-browser testing, I discovered a problem.

My site works fine in FireFox and Chrome. However, in Internet Explorer 8, a certain piece of code doesn’t seem to be working. I haven’t had a chance to test it in IE9, but I was hoping someone here might be able to recognize the compatibility issue.

Here is what should be happening and what happens in FireFox and Chrome:
[img]http://incinera.com/IncineraFF.gif[/img]

But here’s what happens in IE8:
[img]http://incinera.com/IncineraIE.gif[/img]

As you can see, the footer doesn’t show up. It is a fixed div element that sits at the bottom of the browser window while the page content scrolls behind it. This works just fine in all other browsers. I’m aware that older versions of IE have some quirks, but I haven’t been doing this long enough to know how to get around them.

Here is the JavaScript code for the function that positions the div when the page loads or if the browser is resized:

[code]
function fixFooter()
{
var footer = document.getElementById(“footer”);
var newTop = window.innerHeight – footer.offsetHeight;
footer.style.top = newTop + “px”;
}
[/code]

And here is the CSS style definition for it:

[code]
#footer { width: 100%;
text-align: center;
position: fixed;
left: 0;
height: 4em;
background-color: #990000;
border-top-style: outset;
border-top-color: white;
border-top-width: 2px;
z-index: 99;
}
[/code]

The element itself is just a div. I don’t know that the code for that is necessary. There isn’t anything special about it.

Any help would be greatly appreciated.
Thanks!

Also in #JavaScript _↴