IE margin styling issues

Im having issues with the margin property in IE.

This is the page in question.

In Chrome when you hover over the images they roll over to the other image with no issues.

When I use IE 11.09600.17914 (My version) when you hover over the images the rest of the page jumps about 3px

I have spent lots of time trying to fix this but it has me beat.

The code im using is

<div id="catlisting_full">
<h3>Alton Towers</h3>
Save up to 37% on tickets to Alton Towers.
<div class="roll">
<img class="regular" src="http://www.greenbadgepromotions.co.uk/wp-content/uploads/2015/07/alton_towers.jpg" alt="" width="700" height="223" /><a href="http://www.greenbadgepromotions.co.uk/promotions/days-out/alton-towers/"><img class="rollover" src="http://www.greenbadgepromotions.co.uk/wp-content/uploads/2014/04/alton_rollover.jpg" alt="" width="700" height="223" /></a></div>
</div>

.roll {
	position: static;
	margin: 0;
}

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

.roll:hover .rollover {
	display: block;
	margin-top: -18px;
	margin-bottom: 37px;
}

Can anybody help.

Cheers