CSS positions image in centre of screen in all browsers but IE

Question

Hello all:

I couldn't find a similiar question in the related questions section, so figured I'd try my luck.

I'm designing a page where the load time will noticeably long enough to where a loading icon could appear. Currently I have it set so that the icon displays in the center of the screen, with a translucent overlay over the page until page load is complete. Here's the code that I am using

        <style type="text/css">
    #overLayBackground{
     background-color: rgb(250, 250, 250);
     opacity: 0.7; /* Safari, Opera */
     -moz-opacity:0.25; /* FireFox */
     filter: alpha(opacity=70); /* IE */
     z-index: 200;
     height: 100%;
     width: 100%;
     background-repeat:repeat;
     position:fixed;
     top: 0px;
     left: 0px;
     text-align:center; 
         line-height: 240px; 
    }

    #overLayBackground>img {
        position:absolute; bottom:0; top:0; left:0; right:0; margin:auto;
    }

<div id="overLayBackground">
    <img src="www.example.com/images/loading.gif" title="Image" alt="The image" />
</div>

Now this works as expected in Firefox and Chrome, but IE has the icon showing in the top left hand corner. Is there a way to have it behave as the other browsers and position it in the center of the screen?

Thanks in advance.

Answer 1

If you use margin:auto for centering, then you shouldn't use absolute positioning for the img.

EDIT: in response to op comment. margin:auto only works for horizontal centering, this is by definition of how margins work. for vertical centering, I have used a different technique in the past, by using top: 50%, and then using negative top margin.

I recommend this alistapart article:

http://www.alistapart.com/articles/holygrail/

and more alistapart goodness here:

http://www.alistapart.com/articles/practicalcss/

Answer 2

Your code works in IE8 once you specify a doctype and fix the syntax error (div inside the style tag).

Answer 3

Here's a custom one I've used with one of my Custom Cloud Applications: NGEN Preload Screen

View the source for body.onload action...

Feel free to repurpose it at your leisure...

Answer 4

Found the solution. If you change the #overLayBackground>img line to position:absolute; top:50%; left:50%; it works in both IE and FF centering the image vertically and horizontally. Thanks to all that responded.