EPUB issues on Nook. (CSS displays strange)

[jsimms]

Hi all

I've put together a graphic-heavy Epub that looks great on my iPad, but when I loaded it on my Nook the formatting is totally different (worse). Most changes I can live with, but some of my images (PNG) that I've placed (using float) display under my HTML graphics (a colored bar) when they should appear above the graphics (as they do in iBooks)

Anybody out there had any CSS issues with the Nook and know how to resolve them?

Thanks!

[Jellby]

What's the XHTML+CSS code you used for those fragments?

[jsimms]

The problem: the red text bar (h3) appears OVER the png file.

HTML:

<div class="box2">
<h6><img alt="" src="../Images/SR-Colter.png" /></h6>

<h3><a id="MaryColter"></a>Architect of Grand Canyon</h3>

<p>IN THE EARLY 1900s, a time when few women practiced architecture, Mary Colter was hard at work designing some of the most spectacular buildings in Arizona. Her creations, several of which are found in Grand Canyon, helped define an architectural style that &nbsp;complemented the grand natural landscapes of the American Southwest.</p>

</div>

CSS:

.box2 {
font-family: "Georgia";
border: .15em solid black;
padding: 1em;
margin: 2em 0;
display: inline-block;
}

.box2 h3 {
font-family: "Georgia", Serif;
font-weight: bold;
font-style: normal;
font-size: 1.8em;
line-height: 1.1em;
text-decoration: none;
font-variant: small-caps;
text-indent: 0em;
text-align: center;
color: #FFFFFF;
background-color: #990000;
margin: 0 0 0.5em 0;
padding: .3em 0;
clear: none;
}

.box2 h6 {
float: left;
margin: -2em 0 0 -0.9em !important;
padding: 0 1em 0 0;
z-index: 2;
}

[Jellby]

I guess the problem is that "z-index" is not included in the ePUB spec, so you shouldn't expect any ePUB reader to support it. The same happens with "display: inline-block".

If you want the image over the text, you'll have to change the code so that it appears second.