title: Relative positioning in Safari
body: <p>It has to be simple, here's my CSS: </p>
  
  <pre><code>.progressImage 
  {
    position:relative;
    top:50%;
  }
  
  .progressPanel
  {
  height:100%;
  width:100%;
  text-align:center;
  display:none;
  }
  
  &lt;asp:Panel ID="pnlProgress" runat="server" CssClass="progressPanel"&gt;
  &lt;asp:Image ID="Image1" runat="server" CssClass="progressImage" ImageUrl="~/Images/Icons/loading.gif" /&gt;
  &lt;/asp:Panel&gt;
  </code></pre>
  
  <p>I toggle panel display depending on user action.</p>
  
  <p>Works great in FireFox, but shows up at the top of the page in Safari.</p>
  
  <p>p.s. "vertical-align:middle;" doesn't work either.  </p>
  
  <p>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</p>
  
  <p>THIS WORKED:</p>
  
  <pre><code>.progressPanel
  {
    height:100%;
    width:100%;
    position:relative;
  }
  
  .progressImage
  {
    position:absolute;
    top:50%;
    left:50%;
  }
  </code></pre>