Floated text missing in Aldiko Book Reader for iOS

[Nabodita]

Let me start by saying that I'm only facing this issue on the iOS version of Aldiko Book Reader... the formatting works in the android version so this may be a bug.

I have a contents page where I have the chapter numbers (in roman numerals) and the name of each chapter. I want the numbers right-aligned and the chapter names left-aligned. See the first screenshot attached below.

In order to style the numbers differently from the names, the chapter names and the chapter numbers are placed in separate <span> tags within a containing <p> tag. I have one <p> tag for each entry in the html TOC.

In my XHTML:

<div id="contentsContainer">
    <p>
        <span class="rightAlign">I.</span>
        <span class="left-align">Down the rabbit-hole</span>
    </p>

    <p>
        <span class="rightAlign">II.</span>
        <span class="left-align">The pool of tears</span>
    </p>
</div>

In my CSS:

div#contentsContainer {
    width: 75%;
    margin: 1em 12%;
    text-align: center
}

/* Formatting unrelated to floating text */

div#contentsContainer p {
    font-family:"Some Font";
    font-size: 1em;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

/* Format chapter numbers */
/* Give the <span> a width, float it left and right-align */

span.rightAlign {
    display: block
    width: 15%;
    float: left;
    text-align: right;
}

/* Format chapter names */

span.leftAlign {
    display: block;
    text-align: left;
    text-indent: 0.5em; /* Little space between number and name */
}

This CSS floats the <span> containing the chapter numbers to the left of the containing <div> and then places the <span> containing the chapter names up against it.

This code works for all the apps and e-readers which I've tested on except Aldiko Book Reader for iOS. In Aldiko, the floated text is simply missing. See the second screenshot.

Note: I've only added borders to make it easier to understand the layout of the page.

Can anyone spot if I've missed something? Or is it a bug which needs to be reported?

Thanks in advance
Nabodita

[JSWolf]

Given that this is an ePub, do you actually need a contents page since you already have the NCX ToC?

[Turtle91]

It looks like you are trying very hard to use a div to make a table or an ordered list. How about just using an ordered list??

<ol>
    <li>Down the rabbit-hole</li>
    <li>The pool of tears</li>
</ol>


CSS:
ol {margin:.5em 25%; list-style-type:upper-roman; list-style-position:outside} 
li {margin:0 0 .5em; text-align:left; page-break-inside:avoid}

[Nabodita]

Originally Posted by JSWolf

Given that this is an ePub, do you actually need a contents page since you already have the NCX ToC?

To be honest, I absolutely do not need this page... I'm not even sure I'll keep this page in the final version. I just wanted to try out the formatting because I don't have much experience with floating text and images.

@Turtle91

I was also considering using an ordered list and I'm happy to have some code to try out. Will post back on this as soon as I've finished testing it. I don't know how to thank you, though.

However, my concern remains that my code works on all readers and apps that I've tested except the Aldiko Book Reader for iOS where the floated element (in this case, some text included in a span tag) is simply missing.

If this is a bug, I'd at least like to report it. In this specific case, I have alternatives... I can omit the contents page completely or I can use lists or tables. However, if Aldiko is ignoring floated elements, I hate to think what will happen to books where images etc are floated.

Edit: @Turtle91

Damn, the code is simple and works perfectly... considering the trouble I went to to achieve the same formatting, I feel like an ass!