Why Floating of Images not working properly in iBooks?

Discussion in 'iBooks' started by Raja1205, Sep 7, 2012.

  1. Raja1205
    Offline

    Raja1205 iPF Noob

    Joined:
    Apr 27, 2012
    Messages:
    9
    Thanks Received:
    0
    Trophy Points:
    0
    Location:
    Chennai
    Ratings:
    +0 / 0
    Text overlaps on Floated Images in iBooks

    Hi,

    I have created a sample ePub with CSS image floating style (Ex: img {float:left;}) and loaded into the iBooks (version 2.1.1).

    Floating of "Image and text" displays well but in most of the occurrences "text content" overlaps on the floated images when increasing/decreasing the font size (zoom in/zoom out).

    Screenshots attached for your reference.


    Text overlaps on images (Before zoom in):

    -----------------------

    [​IMG]




    Text reflows properly (After zoom in):

    --------------------

    [​IMG]



    I have used the following CSS code for image floating:


    CSS code:
    ---------

    img{
    float:left;
    padding:0em 1.5em 1.5em 0em;
    clear:both;
    }

    I am wondering, how this issue happens on iBooks because iBooks is the best ePub reading system from Apple.


    Is it "iBooks" issue or CSS code issue?

    Note: The same ePub sample displays well in all other ePub reading system (Example: Adobe Digital Edition, Calibre, etc.)

    Could someone help me to solve this problem? Also advise how to identify the 100% zoom level in iBooks.


    Thanks in advance for suggestions and help.


    Thanks,
    Raja. S
    Last edited: Sep 7, 2012

Share This Page

Search tags for this page

css float and ibook apple epub

,

zooming an image in ibook