View Single Post
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