views:

1445

answers:

2

It has to be simple, here's my CSS:

.progressImage 
{
  position:relative;
  top:50%;
}

.progressPanel
{
height:100%;
width:100%;
text-align:center;
display:none;
}

<asp:Panel ID="pnlProgress" runat="server" CssClass="progressPanel">
<asp:Image ID="Image1" runat="server" CssClass="progressImage" ImageUrl="~/Images/Icons/loading.gif" />
</asp:Panel>

I toggle panel display depending on user action.

Works great in FireFox, but shows up at the top of the page in Safari.

p.s. "vertical-align:middle;" doesn't work either.

p.p.s. setting "position:relative;" on the panel doesn't work, setting "position:relative;" on the panel and "position:absolute;" on the image breaks it in FF and does nothing in Safari

THIS WORKED:

.progressPanel
{
  height:100%;
  width:100%;
  position:relative;
}

.progressImage
{
  position:absolute;
  top:50%;
  left:50%;
}
A: 

Ensure the parents container is also set to position: relative and has a height specified, without it the position wont work correctly.

.progressPanel
{
    height:100%;
    width:100%;
    text-align:center;
    display:none;
    position: relative;
}

alternatively, why not set the background property of the panel to your gif?

background: url('path/to/image.gif') no-repeat center middle;

That will always be centered.

Mauro
doesn't work in Safari
roman m
+1  A: 

Set the position of .progressPanel to relative, and the position of .progressImage to absolute. The following works for me in FF, IE, Safari. Set the negative margins to half the width/height of your image for perfect centering. Note that some parent of the progressPanel (body in this case) needs a height so that the progressPanel can fill it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        body {
          height:700px;
        }
        .progressImage {
       position:absolute;
       top:50%;
       left:50%;
       margin-left:-16px;
       margin-top:-16px;
     }

     .progressPanel {
       position:relative;
       height:100%;
       width:100%;
       text-align:center;
       background:red;
     }
        </style>
    </head>
    <body>
    <div class="progressPanel"><img class="progressImage" src="pic.jpg"/></div>
    </body>
</html>
Chris Marasti-Georg