View Single Post
Old 10-23-2013, 01:08 PM   #13
Lucas Malor
Pain in the arse
Lucas Malor will give the Devil his due.Lucas Malor will give the Devil his due.Lucas Malor will give the Devil his due.Lucas Malor will give the Devil his due.Lucas Malor will give the Devil his due.Lucas Malor will give the Devil his due.Lucas Malor will give the Devil his due.Lucas Malor will give the Devil his due.Lucas Malor will give the Devil his due.Lucas Malor will give the Devil his due.Lucas Malor will give the Devil his due.
 
Lucas Malor's Avatar
 
Posts: 758
Karma: 77856
Join Date: Apr 2013
Device: Kobo Aura One, Kindle 4
Ok, I've found it and created a very simple testcase: shortly, I think the problem is that Calibre ebook viewer calculates the width of an element summing the widths of all the pages that element spans:

PHP Code:
<!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" dir="ltr">
    <
head>
        <
title>Test</title>
        <
style type="text/css">
            
#container
            
{
                
width500px;
                
overflowhidden;
            }

            
#content
            
{
                
positionrelative;
            }
        </
style>
    </
head>
    
    <
body>
        <
div id="container">
            <
div id="content">
                
1<br />
                
2<br />
                
3<br />
                
4<br />
                
5<br />
                
6<br />
                
7<br />
                
8<br />
                
9<br />
                
10<br />
                
11<br />
                
12<br />
                
13<br />
                
14<br />
                
15<br />
                
16<br />
                
17<br />
                
18<br />
                
19<br />
                
20<br />
                
21<br />
                
22<br />
                
23<br />
                
24<br />
                
25<br />
                
26<br />
                
27<br />
                
28<br />
                
29<br />
                
30<br />
                
31<br />
                
32<br />
                
33<br />
                
34<br />
                
35<br />
                
36<br />
                
37<br />
                
38<br />
                
39<br />
                
40<br />
                
41<br />
                
42<br />
                
43<br />
                
44<br />
                
45<br />
                
46<br />
                
47<br />
                
48<br />
                
49<br />
                
50<br />
                
51<br />
                
52<br />
                
53<br />
                
54<br />
                
55<br />
                
56<br />
                
57<br />
                
58<br />
                
59<br />
                
60<br />
                
61<br />
                
62<br />
                
63<br />
                
64<br />
                
65<br />
                
66<br />
                
67<br />
                
68<br />
                
69<br />
                
70<br />
                
71<br />
                
72<br />
                
73<br />
                
74<br />
                
75<br />
                
76<br />
                
77<br />
                
78<br />
                
79<br />
                
80<br />
                
81<br />
                
82<br />
                
83<br />
                
84<br />
                
85<br />
                
86<br />
                
87<br />
                
88<br />
                
89<br />
                
90<br />
                
91<br />
                
92<br />
                
93<br />
                
94<br />
                
95<br />
                
96<br />
                
97<br />
                
98<br />
                
99<br />
                
100<br />
            </
div>
        </
div>
    </
body>
</
html
To be concise, the problem rises when a #content div is the child of a #container div; #container has a not-auto width and hides overflows, while #content is relative positioned and its contents span more than one ebook page.

Notice that if you set #container width to 1000px you can see the second page but not the third, that's why I think the viewer wrongs to calculate the element width. It's not clear why this happens only when #content is relative positioned.

Last edited by DoctorOhh; 10-23-2013 at 07:43 PM. Reason: back to php tags
Lucas Malor is offline   Reply With Quote