Resize your page when the problem is occurring and you’ll see the image reposition itself. Using Firebug I see that when resizing the viewport the main image (among other, related elements) gets a width assigned. I suppose the script is positioning everything by (re)calculating the image width. However, it is doing this before the image actually is done loading, and since you haven’t assigned any width attribute to the image (
<img src="…" width="500" …>) that might be giving the browser a clue about the intrinsic dimensions of the image the script doesn’t know the width yet. The solution is, as said, to assign a width attribute to the image. If that’s not feasible, a workaround could be to call the resize event after the image has loaded.
Yeah, you should study jQuery first because that code is totally correct (although not optimal in terms of efficiency). You could as well write it like so:
Originally Posted by fireplace_tea
This is called “chaining” functions. But as said, that could be optimized to include every style in one
margin: '0 auto',