aligning CSS rollover images?

First of all, clean your markup. The WYSIWYG is messing with your div, avoid using that. When writing markup in the post content, always use only HTML (now called Text) tab, never switch to Visual.

So we have this in the markup

<div class="roll">
	<img src="image-url-01" alt="" class="regular">
	<a href="some-link">
		<img src="image-url-02" alt="" class="rollover">
	</a>
</div>

and this is now in the CSS

.roll .rollover, .roll:hover .regular {
	display: none;
}

.roll:hover .rollover {
	display: block;
}

Try this instead of the above

.roll { position: relative; display: inline-block; }
.rollover { position: absolute; top: 0; left:0; }
.roll .rollover { display: none; }
.roll:hover .rollover { display: block; }