CSS Ajax loader bottom-centered positioning issues

I am trying to position this ajax-loader gif file bottom banner centered on all the main browsers - Mac Chrome/Firefox/Safari and Windows IE 8.

I am following this 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开发者_C百科: -9999em;  
    }  

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?

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

Wrapper needs to be relative, load needs to be absolute