ajax loading gif not displaying properly when adding product to cart

I adjusted the the placement of the price display and the add to cart buttons on a wordpress plugin I’m using. When the button is clicked, the ajax loading gif shows up in the bottom center of the area and displaces the price display and button. When it’s done loading, the button is returned to its proper position.

How can i make it so that the price and button stay put and that the loading gif loads properly in the center of the button.

CSS

[CODE]
#mp_product_list .mp_button_addcart {
float:right;
margin: 0 0 50px 0;
}
.mp_no_stock {
opacity: 0.5;
display: inline-block; float:right;
margin: 0 0 50px 0;
}
.mp_adding_to_cart {
margin: 0 0 50px 0;
font-size: 1.1em;
color: #190;
float:right;
}
.mp_one_tile {
margin: 30px 12px 0 0;
}
.mp_product_price {
margin: 0 0 -45px 16px;
}

.mp_ajax_loading{
position: absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
background:rgba(201,201,201,.2) url(‘../images/ajax-loader.gif’) no-repeat 5px 5px;
z-index: 1;
border-radius: 0;
}
.mp_list .mp_ajax_loading{
background:rgba(201,201,201,.2) url(‘../images/ajax-loader.gif’) no-repeat 99% 5px;
}
[/CODE]

Link to site:
[url]http://jkadengeart.com/gallery[/url]

Also in #CSS _↴