Help: How to fix image cloning?

[zuperbuu]

I'm a new Ebook writer and have been suffering repeated issues with getting anything I write to display correctly on my Nook Glowlight; previously I used PDFs which displayed fine until a recent Office update made porting the PDFs to my Nook downright impossible to read afterwards on the device.
I have since migrated to converting with Calibre and have so far had positive results from it.

However, I have started added images to my books and have run into some very annoying problems; my image is only supposed to display on one page and it appears to do so just fine, it's on the page it should be.
But then when I move to the next page the image is there again, just slightly higher up, and has text from the next page overlaying it, and the same happens again on the next page only the image moves higher up. This does not go away unless I move several pages forward, and when I attempt to go back the image appears again.

I checked the HTML source and it displays like this.

<br class="calibre2"/><br class="calibre2"/><img src="images/map.jpeg" alt="Image" class="calibre4"/><br class="calibre2"/><br class="calibre2"/>

Usually I can understand basic HTML, but this just confuses me since from what I can see there is nothing wrong with this line, but clearly something is wrong because the glitch appears on every single book I am editing images into.

Any help would be greatly appreciated, Ive been working on these books for the past 6 years and just need to add images to finish them all.

[theducks]

That looks a little odd, but valid I will assume the source layout was the same

2 blank lines (the br)
the image with CSS properties of calibre4
2 blank lines

Personally, if I was coding I would just use padding: 2em 0; in calibre4
alt="Map of..." would be a better Alt tag, but there is no way Calibre can guess the image contents

[gbm]

Use this:

<div="calibre2"/><img src="images/map.jpeg" alt="****" class="calibre4"/></div>

Then fix your line spacing in the css style sheet.

I have found that using two <br /> causes problems with images.

bernie

[zuperbuu]

Originally Posted by theducks

That looks a little odd, but valid I will assume the source layout was the same

2 blank lines (the br)
the image with CSS properties of calibre4
2 blank lines

Personally, if I was coding I would just use padding: 2em 0; in calibre4
alt="Map of..." would be a better Alt tag, but there is no way Calibre can guess the image contents

There were two blank lines to give space between the image and the text above and below it, I found without them that the text got too close. I will give you idea a try and see how it goes.

Originally Posted by gbm

Use this:

<div="calibre2"/><img src="images/map.jpeg" alt="****" class="calibre4"/></div>

Then fix your line spacing in the css style sheet.

I have found that using two <br /> causes problems with images.

bernie

I'll give this a try as well if the previous posters idea doesn't give me the visual look I need. Thank you both!

EDIT: I have tried both methods, and whilst both stop the image being cloned onto the following page (page 6) it creates new problems.
Method 1 (theducks) makes the glitch reappear again with the same problem on ALL pages from 7 to 15.
Method 2 (gbm) oddly makes all pages after page 6 inaccessible.

With both everything looks normal on Calibre, but when on the Nook it all looks wrong.