[Nabodita]

I'm working on a version of Alice in Wonderland which has a few images. I'm having issues with image formatting in different e-reading apps on iOS.

Example: One of the images is a text separator and I have a very simple piece of code for formatting this image.

In the XHTML:

<div class="container">
    <img class="textSeparator" alt="text separator" src="separator.png"/>
</div>

In the CSS:

div.container {
    margin: 1em 0;
    text-align: center;
}

img.textSeparator {
    max-width: 40%
}

I want the image to be centered horizontally (hence I've set text-align: center on the containing div) and I don't want the image to take take up the entire width of the screen (hence I've set the max-width of the image to 40%).

I've tested this ebook on:

-- the desktop version of ADE (v4.5)
-- ADE for iOS
-- Bluefire reader for iOS
-- Aldiko Book Reader for iOS and android
-- Kobo Reader app for android
-- my Kobo Reader
-- my Sony Reader

where it works fine.

It doesn't work in the following:

-- Kobo App for iOS
-- Marvin 3 (iOS)
-- Marvin Classic (iOS)

In these apps, the image takes up the full width of the screen so I assume the max-width property is being ignored.

I can't make the code any simpler. Either I'm missing something fundamental or it's a conspiracy to drive me crazy.

Please share your thoughts. Thanks.

Edit: If I set max-width: 40% as an inline style in the <img> tag instead of in the CSS, it works fine in the Kobo iOS app but not in Marvin Classic or Marvin 3.