Posting mostly for my own reference…
One thing I find that I need to do a lot is position a footer bar across the bottom of the page. The most common way to do this is to set a fixed position on the element and anchor it to the bottom using this css:
#footer {
width: 100%;
position: fixed;
bottom: 0;
height: 75px;
}
Unfortunately, this doesnt work quite right in IE. When using this style definition in IE, the footer gets locked into a specific position in the viewport and when you resize from the corner anchor the footer does not move with the window.
The proper cross-browser way to declare a fixed position footer is to use negative margins, like this:
#footer {
width: 100%;
position: fixed;
top: 100%;
margin-top: -75px;
height: 75px;
}
This appears to function properly in every browser I’ve looked at so far.