background-image in IE

Question

Html

<div id="banner" style="display: block; background-image: url('images/swirl_home.gif'); background-repeat: no-repeat; background-color: #e7e7e7;">
    <div id="Hi">
                some text here...
        </div>  

    <div id="loader">
        <img src="images/ajax-loader.gif"  />
        </div>
    </div>

Css

#banner {
    background-color: #e7e7e7;
    min-height: 285px;
}

the above code renders perfectly in Mozilla and Chrome. Fails entirely in IE 6/7/8. The background image just doesnt show. I can see the text though.

What am I doing wrong...?

EDIT: its not a problem of the image path. i tried giving an absolute path as well. didnt work.

Answer 1

Try this, it will make the loader image appear as your div background whenever it is called.

 #loader {
        background-image:url (images/ajax-loader.gif);
/*Don't forget to set width and height to the size of your loader image here*/
        }

Also try to keep your styles altogether in the CSS, it seems you have an inline style as well as cSS styles with your banner ID, and if you want to use it more than once on a page, change it to a class and not an ID: Use .loader instead of #loader in the CSS and HTML <div class="loader">&nbsp;</div>. The   is a non breakign space, just a non visual filler to force your DIV to be displayed.

Other than that, the path to the image might be broken, but I've never heard of IE messing up an image path differently to other browsers.

Answer 2

Solved it. the reason for the image not showing up was that I didnt mentioned the height/width constraints. What can I say, IE just brings the evil out of everyone.

Answer 3

You need to put a height to the #banner css rule, as you use min-height which is not supported by IE

put

height:auto!important;
height:285px;
min-height:285px;

and it should work ..