CSS Ajax Loader Bottom Centered Positioning Issues

Question

Hi,

Hoping someone can assist with the issues I am having, trying to position this ajax-loader gif file bottom banner centered on all the main browsers - mac chrome/ffox/safari and windows ie8.

Pls see this tutorial at:> tutorial

The CSS in this tutorial for the ajax-loader is positioned at the top right corner of the banner (see demo page), using:

  #load {  
        display: none;  
        position: absolute;  
        rightright: 10px;  
        top: 10px;  
        background: url(images/ajax-loader.gif);  
        width: 43px;  
        height: 11px;  
        text-indent: -9999em;  
    }  

Can someone pls let me know using this css for #load, how to position bottom centered under the big green tickbox of this same example and also work on all popular browsers mentioned above?

Thanks.

Answer 1

#wrapper{
  position:relative;
}
#load{
  width:100%;
  text-align:center;
  bottom:0px;
  position:aboslute;
  background: url(images/ajax-loader.gif) top center no-repeat;
}

Wrapper needs to be relative, load needs to be absolute