Why is my background image not displaying properly in IE7?

Screenshot of the issue: here

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 (si开发者_如何学Gonce 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

I had the same problem in IE 7 with a transparent PNG acting as a background inside a <div>. Positioning the background at (0|0) fixed it for me:

background: url("images/bg-header.png") no-repeat 0 0;

I had the same problem, buttons with graphic backgrounds aren't displayed in IE7.

It seems that IE7 has problems with such HTML elements with borders, as setting border-width:0 solved the problem for me.

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

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

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

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%;

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

Use the clear-rule:

clear:both;