Question

I’ve read through other questions but to no avail – I really can’t work this out.

The site is (Been redesigned, so isn’t relevant anymore. It used HTML5 elements, but they weren’t declared as block, and IE doesn’t assume that they should be.)

The gradient on the footer looks great in non IE browsers, but fails to show in IE 7,8 and the IE9 dev preview.

Any ideas?

Answer 1

You could try adding this to your footer CSS (in addition to your existing footer styles).

footer
{    
    display:block;
}

This fixed it for me under FF3.6, and I’m assuming will fix it in IE as well – The default display style for <footer> is inline which doesn’t play nice with backgrounds regardless of browser. Applying block to it will treat it more like a div.

You’ll also want to be careful with your use of HTML 5. Not sure of how well supported it is in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and applying styles to it by id in CSS instead..