ansaurus

Question

Answer 1

+1 A:

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"></div> and applying styles to it by id in CSS instead..

KP 2010-03-23 20:09:15

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

KP 2010-03-23 20:34:04

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

Rich Bradshaw 2010-03-23 21:25:15

Ah, except it does!Thanks!

Rich Bradshaw 2010-03-23 21:28:28

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.

HaleFx 2010-03-23 21:31:04

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

Rich Bradshaw 2010-03-23 22:32:04

Answer 2

A:

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.

Atømix 2010-03-23 20:20:24

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

Rich Bradshaw 2010-03-23 21:29:12

Answer 3

A:

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.

Pekka 2010-03-23 20:45:13

I wondered that as well - seems a little weird doesn't it.

Rich Bradshaw 2010-03-23 21:23:56

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

Pekka 2010-03-23 21:25:30

ansaurus

tags:

views:

answers:

Background image not showing up on IE8

related questions