Is it possible to add a sticky footer to this HTML template that works in IE compatibility mode and is cross browser compatible?
I tried adding the Ryan Fait sticky footer, but everything seems to break when I add it.
Can't use the sticky footer that uses 100% height on the parent container and then uses a negative top margin for the footer and pulls it back up into the viewport since that'll eliminate the ability to see the background color between the footer and the main content. Can't inject a backgournd colored spacing div in there either to suffice since the template uses rounded corners and that would seem to make it difficult.
I also tried this 'top border soak up sticky footer' similar to the Ryan Fait method, but I coudln't get that to work either.
Solved. Basically, like you said I applied the Ryan Fait sticky footer and did the following:
-moved the footer outside of the wrapper and the header inside the wrapper.
-removed the padding from the body.
-removed the top margin, bottom border, box shadow, (and bottom rounded corners) from the footer.
-pulled the wrapper margin up an extra pixel (.063em) to account for the top border of the footer.
-added padding-bottom:10px; to the #innerwrap to get the div spacing I was looking for (like it says on the Ryan Fait page).
-made the width and margin of the footer match the wrappers.