View Single Post
Old 09-07-2012, 06:48 AM   #1
Raja1205
Member
Raja1205 began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Apr 2012
Device: none
Why Text content 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.

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.


Regards,
Raja. S
Attached Thumbnails
Click image for larger version

Name:	Text overlaps on Image_Before_Zoom-in.png
Views:	67
Size:	407.3 KB
ID:	91962   Click image for larger version

Name:	Text reflows properly_After_Zoom-in.png
Views:	64
Size:	387.8 KB
ID:	91963  
Raja1205 is offline   Reply With Quote