Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Readers > Apple Devices

Notices

Reply
 
Thread Tools Search this Thread
Old 05-31-2010, 01:08 AM   #1
Ereskelios
Junior Member
Ereskelios began at the beginning.
 
Posts: 1
Karma: 10
Join Date: Feb 2009
Device: None
ePub, CSS : Bug with 'position:relative' property ?

Hello there,

From the few experiments i've made, 'position: relative' property seems to make elements invisible in iBooks.
I've only played on this with 'div' and 'span' elements.

The ePub displays fine on Adobe Digital Editions.

That's pretty embarrassing because the IDPF specs seems to allow it.

Does anyone got the same bug or am I wrong somewhere else ?

Thanks
Ereskelios is offline   Reply With Quote
Old 09-11-2014, 03:28 PM   #2
bowlins
Member
bowlins began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Jul 2014
Device: none
I've just come across the same exact problem.

And <img> with position:absolute contained in a <div> is showing ok in ereaders and Android reading apps.

However, iPad decides to not bother with it and show it blank. As soon as the position:absolute is removed the image is shown by the iPad. However, it is not vertically centred as that's why I was using the absolute positioning

Thank you Apple for making our lives more difficult
bowlins is offline   Reply With Quote
Advert
Old 09-22-2014, 01:53 AM   #3
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
I haven't seen any problems with position:relative. I'd be curious if you have a snippet that still reproduces the problem. I'd be happy to file a bug against iBooks for you if you do.

The position:absolute thing is a bit nastier, and might be caused by the way iBooks overrides -webkit-line-box-contain. Try adding this stylesheet snippet:

PHP Code:
html 
        -
webkit-line-box-containblock inline replaced !important

html body 
        -
webkit-line-box-containblock inline replaced !important

body 
        -
webkit-line-box-containblock inline replaced !important

If that doesn't help, again, a small test book is worth a thousand words.

Also note that SVG is generally the best way to get images centered across multiple reader platforms. Look around the forums, and you'll see half a dozen different approaches. Here's my approach:

PHP Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<title>Cover</title>
<style type="text/css">
    html,body {
        height: 100% !important;
        min-height: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-width: 0 !important;
        padding: 0 !important;
    }
    div.coverpage {
        height: 100%;
        margin: 0;
        padding: 0;
        border-width: 0;
    }
</style>
</head>
<body style="oeb-column-number: 1; background-color: #000000;" >
<div class="coverpage">
<svg
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1"
        width="100%"
        height="100%"
        id="svg2"
        xml:space="preserve" viewBox="0 0 2040 2640" preserveAspectRatio="xMidYMid">
    <image xlink:href="tiw-frontcover.jpg" height="2640" width="2040">
        <desc>Patriots: Traitors in Waiting</desc>
    </image>
</svg>
</div>
</body>
</html>
BTW, you'll probably have better luck asking these sorts of questions in the EPUB forum.
dgatwood is offline   Reply With Quote
Old 09-29-2014, 07:53 AM   #4
bowlins
Member
bowlins began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Jul 2014
Device: none
Yes, I can confirm that position-relative seemed to do the trick and image is now showing fine. However, the position:absolute is still a total no-go at the moment
bowlins is offline   Reply With Quote
Reply

Tags
bug, css, epub, ibooks, ipad

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
PB360, Position im Buch (CRM EPUB) wird nicht gespeichert bigfellow PocketBook 1 07-17-2010 04:13 PM
Bug: Calibre doen't include 'src' in css adrian783 Calibre 0 07-05-2010 10:57 PM
ePub not supported < div > position: absolute samsgates ePub 1 06-18-2010 11:22 AM
Small html/css bug twaits Calibre 5 01-12-2010 10:26 AM
epub-library: relative paths josepinto EPUBReader 2 12-03-2009 06:40 AM


All times are GMT -4. The time now is 11:40 PM.


MobileRead.com is a privately owned, operated and funded community.