popup note images are showing in the epub

[increase]

I am using kindle previewer on PC
Using this code as my link,
<a epub:type="noteref" href="#n1" style="font-size: 14pt; font-family: arial;">gender</a>, <span style="font-size: 1em;">

And this as the popup note
<aside class="hidden" epub:type="footnote" id="n1"><p style="font-size: 1em; padding-bottom: 3px;"></p>
<a href="#n1"><img alt="return" src="../Images/return.png" width="30" height="16"/></a>

The popup all works fine, but the image is showing in the ebook

[phillipgessert]

No real advice, but I'd just use a unicode arrow if it were me; and since (it looks like) you're trying to hide the endnote anyway, I'm actually not sure the arrow serves much purpose. Probably I'm misunderstanding, though.

[increase]

Originally Posted by phillipgessert

No real advice, but I'd just use a unicode arrow if it were me; and since (it looks like) you're trying to hide the endnote anyway, I'm actually not sure the arrow serves much purpose. Probably I'm misunderstanding, though.

Yes it is because it is nested, so when I click on the main link, it pops up the note and I want to have an arrow on the popup to take it back to the link

Seems to be something to do with the syntax in this line
<aside class="hidden" epub:type="footnote" id="na"><h5 style="color: green;"><a href="#n1"><img alt="return" src="../Images/return.png" width="30" height="16"/></a></h5>

I got it to work when by mistake I put the same reference on two of the popup codes and the third one showed the arrow, so it needs the above code modyfying but I am not sure how

[increase]

Got it!
<aside class="hidden" epub:type="footnote" id="n1"><h5 style="color: green;"><a href="#nb"><img alt="return" src="../Images/return.png" width="30" height="16"/></a></h5>
Just swapped the references around and bingo

[increase]

False alarm I still have the problem

[increase]

Originally Posted by increase

False alarm I still have the problem

But.. this works in stylesheet
.hidden { visibility: hidden; }

[DNSB]

Originally Posted by increase

But.. this works in stylesheet
.hidden { visibility: hidden; }

Personally, I'd prefer:

.hidden {
    display : none;
}

Why this choice? Simply, a visibility:hidden; element will still use up space on the page, one hidden by display:none; will not. See CSS visibility Property for more information.

[increase]

Originally Posted by DNSB

Personally, I'd prefer:

.hidden {
    display : none;
}

Why this choice? Simply, a visibility:hidden; element will still use up space on the page, one hidden by display:none; will not. See CSS visibility Property for more information.

Thanks, but it is in kindle previewer that i have the issue, the notes show in the main chapter and I am trying to hide them

[jhowell]

Originally Posted by increase

Thanks, but it is in kindle previewer that i have the issue, the notes show in the main chapter and I am trying to hide them

Some Kindle devices/apps do not support pop-up footnotes. Footnotes will show as pop-ups where they are called out on some devices. On other devices clicking on the footnote tag will take the reader to the point in the document where the footnote appears.

In either case the actual footnote is still part of the visible book content somewhere. (Typically at the very end of the book.)

[DNSB]

Originally Posted by increase

Thanks, but it is in kindle previewer that i have the issue, the notes show in the main chapter and I am trying to hide them

This may not be exactly what you want but have you considered having an endnotes file instead of placing the notes in the chapter files? The links/backlinks are easy enough to set up and you will not have the issue of the notes visible in the chapters. Easy enough to skip over the endnotes when you are finishing the book.

As for trying to hide them? That is what display:none does and it does the job without having the space where the text would be showing as a blank box. Of course, the text will also be hidden when you pop up the note. Something about cake and eating it comes to mind.