A quick solution to the bottom not being the same in IE8 would be to set the bottom to -5px for IE8
#footer {bottom: -5px;}
To help debug on IE - You can use the IE Developer Toolbar. It will not replace Firebug in your tool suite, but is indispensable when figuring out issues in IE. You can see how IE is interpreting your css.
One thing to note that might have something to do with your browser differences is how tight your css is in the footer. Firefox is allowing the height of the footer to expand to accommodate it. IE does not seem to want to. (Your css says the footer top would be 50px from the bottom, the divs inside your footer are very close to or greater than 50px in IE. IE may have a few pixels added because of differences in where it adds margin and padding.) You can mess with the heights and line heights of the elements in your footer in IE Developer Toolbar and find settings that fit.
Also for future reference - it is a good idea to normalize/initialize the css. There are padding and margin differences in the default way the different browsers interpret css. This manifests itself with 1 or 2 pixel differences here and there that can be quite frustrating to find.
Here is a link to more information about normalizing css. (This may or may not have anything to do with what you are seeing - it is just an FYI). Normalizing causes you to be more disciplined in setting the margin and padding css for everything you use, but it removes browser differences.