Background image not showing on IE8

Question

I read other questions, but to no avail - I really can't solve it.

The site has been updated, so it is no longer relevant. He used HTML5 elements, but they were not declared as a block, and IE does not imply that they should be.)

The gradient on the footer looks great in browsers other than IE, but does not appear in IE 7.8 and IE9 dev preview.

Any ideas?

Answer 1

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

footer { display:block; } 

This fixed this for me under FF3.6, and I assume that this will fix it in IE as well. The default display style for <footer> is inline , which does not play well with backgrounds, regardless of browser. Applying a block to it will refer to it more like a div.

You will also want to be careful using HTML 5. Not sure how well it is supported in all browsers. You might want to consider <div id="footer"><!-- contents of footer --></div> and apply styles to it using id in CSS.

Answer 2

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

Change the image format to png.

And it works fine in IE8.

Answer 3

It works:

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

I would be careful in applying any style to html5 elements such as footer right now. They are not supported by all browsers.

You can use them for semantic reasons.

Answer 4

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

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

Pay attention to the part on the right. I'm not sure where it came from - it's not in the stylesheet. Maybe the sheet is somehow distorted. If I delete the text alignment part, the image of the footer is displayed in order. The same thing happens with your body definition.

Answer 5

try opening the file in Photoshop or similar, and make a clean save for the web page as a PNG.