Why is my background image not displaying properly in IE7??

Question

Screenshot of the issue: http://cl.ly/2oS3

Webpage in Question: http://cure.org

Offending browser: Internet Explorer 7

You'll notice from the screenshot, or if you view this site in IE7, that the background image is not displaying for the content div (#modal-inner-content). Strangely, the image displays in the other divs where it is used (since it's a sprite, I'm using that same image for #modal-top-border and #modal-btm-border).

In all other browsers it displays properly, and even in IE8. I cannot seem to find what CSS rule (or lack thereof) I may be using that IE7 is choking on.

NOTE: in order to get the modal screen, just click the link at the very top banner of the page that says "login to your CURE account

Answer 1

Not sure why the image isn't showing up in IE7, but this could be a good intermediate fix. this should add a white background if the image doesn't show up.

Try changing #modal-inner-content from:

background: url(http://cure.org/img/modal-bg-xy.png?jcb=1284407379) repeat-y -636px 0%;

to:

background: url(http://cure.org/img/modal-bg-xy.png?jcb=1284407379) #fff repeat-y -636px 0%;

--- Edit - don't use above answer ---

Try wrapping the url in quotes:

background: url("http://cure.org/img/modal-bg-xy.png?jcb=1284407379") repeat-y -636px 0%;

Answer 2

I need to install ie7. My first try would be to add a width to #modal-inner-content

Answer 3

I just remembered that IE7 has a problem with mixed units in the background position property. so -636px top should be -636px 0

Answer 4

Are you using some fix for IE and png images ?

If i remember correctly, most plugins/methods to enable transparency to background images by using the filter css property of IE made the background non-repeatable ..

It could be it ..

Answer 5

I agree with FutureKode. The background on #modal-inner-content isn't displaying because IE doesn't think the element hasLayout, which sometimes causes problems with other style declarations. To trigger hasLayout, the easiest way I see would be to style that div with width:576px (what Firebug is telling me the width of that div is). I'm assuming the width of that box never changes?

More on hasLayout, and what triggers it: http://www.satzansatz.de/cssd/onhavinglayout.html