Image alignment

[teallach]

Hi

I'm building an image gallery. My images are all different sizes and I have them centralised using text-align for horizontal and setting the margin-top value for vertical. Each time a new image is shown, I look in an array for the corresponding margin value. It all works fine except in IE, where the old image always takes the new margin value before being replaced by the new image. This makes it appear to move briefly before disappearing.

I've tried setting the containing div display to 'none' while the images swop over, and tried all orders of changing the settings, but I can't get the old image to disappear with its old margin, then the new one to appear with it's new margin. In Firefox the code below works fine:

get("main_image").style.display="none"; //hide the old image
get("main_image").src=''; //remove the old image
get("main_image").src=portfolioDir + array_names[imagePos] + '.jpg'; //get and set the new image
get("main_image").style.paddingTop=array_m_tops[imagePos] + 'px'; //give new image its top padding
get("main_image").style.display="block"; //show the new image

Can anyone advise?

If there's a better way of vertically centralising an image within a div, that would solve it all!

Thanks.