Background image not showing up on IE8

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?

Solution 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..

Solution 2

I had a similar problem, but finally find the solution.

Change your format image to png.

And works fine in IE8.

Solution 3

This works:

#footer_text { 
  background: url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000) repeat-x scroll top left; 
}

I'd be careful about applying any styling to html5 elements like footer right now. They're not well supported by all browsers.

You can use them for semantic reasons, though.

Solution 4

If I look at the footer using IE 8's developer toolbar, I get this as the background-image definition:

 url(/media/img/gradient.php?w=4&h=160&sc=4c4c4c&ec=000000); TEXT-ALIGN: center

Notice the part to the right. I'm not sure where it comes from - it's not in the style sheet. Maybe the sheet is somehow garbled. If I remove the text-align part, the footer image shows fine. The same is happening to your body definition.

View more solutions

Comments

[KP.]

wtf is with the down vote?? lol. This answer works, and is valid. Oh to be able to see who did it lol..

[Rich Bradshaw]

I guess it's because it doesn't answer it for IE, just Fx.

[Pekka]

@Rich definitely. Have you tried KP's suggestion though? He claims that fixed it for him. Also, can you try removing the quotes around the URL, just for laughs? I have the feeling it could be the ampersands and question marks inside the URL.

[Rich Bradshaw]

I'm using the shim to enable them in IE<9, and setting display block seems to have fixed it.

[HaleFx]

The shiv that you're using + display: block; should work for IE. In any case, you need display: block; on header, footer, nav, and probably any other HTML5 elements that you're using.

[Rich Bradshaw]

Ah, I've changed my reset style sheet and forgot to add that lot back in again...