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-contain: block inline replaced !important;
}
html body {
-webkit-line-box-contain: block inline replaced !important;
}
body {
-webkit-line-box-contain: block 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.