[Oxford-eBooks]

I've got an interesting problem with an ePUB for iPad only project I'm working on.
It's rather image intensive, and I'm finding that when images end up at the TOP of the screen, the first line of text flows over the top of the image.
Changing font size to shuffle the image to a different position on the screen makes the text flow properly, so it's definately related to the image being at the top of the screen.

My image is in a DIV

	<div class = "illustrationRSM">
		<img src="images/image289.png" alt = "" title = ""/><br/>
	</div>
<p>This is the texft that should flow around the image, but if the image is at the TOP of of the screen, the first line runs across the image, then the rest behaves properly</p>

and the CSS floats it to the left or right, here it's the right. The inline-block trick here keeps a potential caption with the image.

.illustrationRSM{
	float:right;
	margin-left:1em;
	margin-top:0.5em;
	margin-bottom:0.5em;
	width:30%;
	display:inline-block;	/* Keeps caption together. */
}

I've addressed the annoying size issue with images on iBooks with the IMG css by putting in an additional width:100%

	.illustrationL img,  .illustrationR img, .illustrationLSM img, .illustrationRSM img{
/*		vertical-align:top; */
		width:100%;
	}

Anyone come across this problem before, or can spot what STUPID thing I'm doing here?