Wahts influencing the loading icon position?

HTML & CSS
1

Hi from wet & cold 6 degrees C wakefiled UK :frowning:

On this page http://www.pauserefreshment.co.uk/google_ad_march_2010.html the loading icon when you click on a coffee machine is dead centre as it should be but why on this page: http://www.pauserefreshment.co.uk/index.html
and click on the flavia coffee machine next too Flavia choc offer ends Wed 31st March you can see the loading icon is skewed off to the left.

What I dont understand is that both pages pull on the same css and javascript so I dont know why the loading gif doesnt stay central.

Any insights welcome :slight_smile:

2

Ok this line is influencing the position of the loading gif:
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

But I’m still no nearerer in figuring out how to keep it dead central in whatever page in loads in :frowning:

Any insights welcome…

3

Fixed this one my self - jusat adjusted the left margin where appropriate :slight_smile:

4

Hi, sorry we weren’t able to help.

But to answer your question (as you figured it out) to center AP elements you must know the width and then all is easy :wink: (if you want vertical centering then you must know the height)


#element
{
  position:absolute;
  top:50%;
  height:300px;
  width:300px;
  left:50%;
  margin-top:-150px;/*half the heigiht value*/
  margin-left:-150px;/*half the width*/
}
Off Topic:

Are you sure you won’t reconsider my offer of the iTunes? I wnat songs :(.