Question

I have the following structure, the #tabs div is a static positioned div. I would like to show the loading inner div during an ajax request and have it centered on the #tabs div (which is actually a jquery tab). But it’s not getting centered with the css I have at the moment.

<div class="span-18 last" id="top_tab_container">
  <div id="loading">
    <div id="loading_inner">
      Loading...
    </div>
  </div>
  <div class="normal-pad  ui-widget-content ui-tabs ui-widget ui-corner-all" id="tabs">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
      <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Most Voted</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs2" title="tabs2"><span>Near You xxxx</span></a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs3" title="tabs3"><span>You are Tracking</span></a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs4" title="tabs4"><span>Most Tracked</span></a></li>
    </ul>
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

    </div><div id="tabs2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>

      <div id="tabs-2">
      </div>
      <div id="tabs3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
        <div id="tracked_posts"></div>
      </div>

    <div id="tabs4" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
      <div id="most_tracked_"></div>
    </div>
  </div>
</div>

#loading_inner {
    background:transparent url(/images/loading_big.gif) no-repeat scroll center center;
    font-size:16px;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    height:100px;
    left:50%;
    line-height:normal;
    margin-left:-50px;
    margin-top:-50px;
    overflow:auto;
    padding:10px;
    position:fixed;
    text-align:center;
    top:50%;
    width:100px;
    z-index:2;
}

Answer 1

change position:fixed; to position:absolute;
and add: #top_tab_container { position:relative; }

is that what you mean?