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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 01-05-2012, 05:13 AM   #1
helenouchkaia
Member
helenouchkaia began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
Float bug in ADE ?

Hello all and happy new year !

I have a problem with an epub using float div. In attached file, you will see what I obtain in ADE with float positionning. It works fine in iBooks, Firefox, Safari... Is that a bug in ADE or an error from myself...?
Attached Thumbnails
Click image for larger version

Name:	Capture d’écran 2012-01-05 à 10.54.17.png
Views:	301
Size:	133.6 KB
ID:	80787  
helenouchkaia is offline   Reply With Quote
Old 01-05-2012, 07:21 AM   #2
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
What is the coding? Remember, ePUB uses a subset of XHTML and CSS2. It could be that it is neither a bug, nor an error from yourself but that it only works on readers/programs that uses a web renderer instead of a ePUB renderer.
Toxaris is offline   Reply With Quote
Old 01-06-2012, 06:28 AM   #3
helenouchkaia
Member
helenouchkaia began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
Thaks a lot for your answer Toxaris and sorry for the delayed response - spent 8 hours to emergency yesterday because of the wind ! Nature's always the stronger... makes me put all this in perspective :-) Anyway, still getting crazy with those readers... About what you says, if I understand you well, I would respond that it works in ibooks but not in ADE, that are both epub renderers...? Hoping it is a beginner error (I jumped into XHTML/CSS 5 months ago...)

The HTML code is :
<div class="image_right"><img alt="" src="../Images/basilic.gif" /></div>

<div class="recette">
<p class="titre_recette brun"><img alt="" src="../Images/cuiller_2-01.png" />&nbsp;Sirop</p>

<p class="ingredients rosefonce">200 g de feuilles de basilic, 1/2 litre d’eau, sucre brut de canne blond</p>

<p>Portez l’eau à ébullition, puis jetez le basilic grossièrement haché dans l’eau bouillante. Laissez reprendre l’ébullition, puis couvrez et stoppez la source de chaleur. Laissez infuser jusqu’au refroidissement. Filtrez en pressant bien. Pesez le liquide obtenu et ajoutez-lui le même poids de sucre. Faites chauffer à feu doux en remuant régulièrement, jusqu’à la fonte totale. Quand le sirop commence à bouillir, baissez le feu jusqu’à maintenir juste un frémissement et prolongez la cuisson pendant 15 min. Mettez en bouteilles. En variante, mélangez 100 g de basilic et 100 g d’agastache (rugosa ou foeniculum), aux vertus également digestives. Ces sirops seront utilisés de la même façon que celui à l’anis (voir p.11).</p>
</div>

CSS:

.image_right{
float: right;
}

.titre_recette{
font-size: 1.8em;
font-weight : normal;
text-align : left;
vertical-align: baseline;
margin-bottom: 0;
padding-bottom:0.5em;
}

.ingredients{
border-top: 2px dotted #bd7367;
border-bottom: 2px dotted #bd7367;
margin-top: 0;
margin-bottom: 0;
padding-top:0.5em;
padding-bottom:0.5em;
}

.brun{
color: #624a30;
}

.rosefonce{
color: #bd7367;
}

I didn't use the style "recette".
helenouchkaia is offline   Reply With Quote
Old 01-06-2012, 06:56 AM   #4
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
What I mean is that some reading applications, like iBooks, did not bother to create an ePUB rendered which honors the specifications, but used a web-renderer. Although in a lot of cases the result is the same, it is not always the case. This is because the ePUB specifications differ from XHTML and CSS2 specifications. Sometimes this results into unexpected results.

Anyway, I looked at your code and I would actually expect the result you have in your screenshot. So, what did you expect?
Toxaris is offline   Reply With Quote
Old 01-06-2012, 07:07 AM   #5
helenouchkaia
Member
helenouchkaia began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
The pink dotted lines come above/overlaps the picture, what I don't want. I expect that the whole div "recette" wraps the image. See screen capture of Sigil.
Attached Thumbnails
Click image for larger version

Name:	Image 1.png
Views:	268
Size:	85.1 KB
ID:	80837  
helenouchkaia is offline   Reply With Quote
Old 01-06-2012, 07:24 AM   #6
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
I guess she(?) expected the dotted borders not be drawn above the image, but to be limited by the floating picture.

I'm not sure that would be the correct behaviour. Floats affect the contents of other elements, but the borders? What the block with a border is higher, should only the top border be reduced? What should happen with the right border if present? One could use the z-index property to ensure the image appears on top of the border, but z-index is not in the ePub spec.
Jellby is online now   Reply With Quote
Old 01-06-2012, 08:33 AM   #7
helenouchkaia
Member
helenouchkaia began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
Hello Jellby ! How heartwarming it is for me, a "young" girl, yes beginner working alone, to have guys like you both trying to help ! Thank you ! I hope soon I will know enough to be able to help someone in return

I tried z-index, doesn't change anything. What do you mean by "I'm not sure that would be the correct behaviour." How would you get the result I want ? If you have time...
helenouchkaia is offline   Reply With Quote
Old 01-06-2012, 12:01 PM   #8
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by helenouchkaia View Post
What do you mean by "I'm not sure that would be the correct behaviour." How would you get the result I want ? If you have time...
I mean that I don't know how exactly floats and borders are supposed to interact (according to the CSS specification). It might be that what you are seeing in ADE is the correct behaviour, or at least that it is one of the possibilities.

As for a solution, you could try at least placing the <div class="image_right"> inside the <div class="recette">, although I don't expect it to make a difference...
Jellby is online now   Reply With Quote
Old 01-06-2012, 12:41 PM   #9
helenouchkaia
Member
helenouchkaia began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
I'm sure you're right about the "interaction" of borders and floats, I made differents tests that seem to confirm this. Unfortunately, placing the div image inside the div recette does not change anything. Thanks a lot anyway for the time you spent responding me Jellby !
As a solution, I put max-width of 60% for the ingredient div, which has the borders, and another max-width of 35% to the image div. It works quite well now.
Thanks again,
Helenouchkaia

Can I ask you what you are doing yourself ?
helenouchkaia is offline   Reply With Quote
Old 01-06-2012, 01:37 PM   #10
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by helenouchkaia View Post
Can I ask you what you are doing yourself ?
What do you mean?
Jellby is online now   Reply With Quote
Old 01-06-2012, 02:14 PM   #11
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
I am guessing that the setting the border is actually causing the problem. It looks like it is ignoring the float. What happens if you make a picture of the dotted line and place it there?
Toxaris is offline   Reply With Quote
Old 01-06-2012, 02:18 PM   #12
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,657
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Have you tried your code using the ADE 1.8 Preview version to see what happens? If you post the ePub, I can give it a look and see how it renders in 1.8.
JSWolf is online now   Reply With Quote
Old 01-07-2012, 09:45 AM   #13
helenouchkaia
Member
helenouchkaia began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
Quote:
Originally Posted by Jellby View Post
What do you mean?
I was wondering about what you are doing in your job, what kind of epubs do you make ?
helenouchkaia is offline   Reply With Quote
Old 01-07-2012, 09:49 AM   #14
helenouchkaia
Member
helenouchkaia began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
Quote:
Originally Posted by Toxaris View Post
I am guessing that the setting the border is actually causing the problem. It looks like it is ignoring the float. What happens if you make a picture of the dotted line and place it there?
Thanks Toxaris for your answer. I'm sure it would be ok with an image, I will try that. Apparently borders and floats are not friends !
helenouchkaia is offline   Reply With Quote
Old 01-07-2012, 09:59 AM   #15
helenouchkaia
Member
helenouchkaia began at the beginning.
 
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
Quote:
Originally Posted by JSWolf View Post
Have you tried your code using the ADE 1.8 Preview version to see what happens? If you post the ePub, I can give it a look and see how it renders in 1.8.
Thanks for your answer JSWolf ! I was not able to know which version of ADE is installed on my iMac
Can I send you the epub from here ? Dis you see my other post about font problem ?
helenouchkaia is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
float not working as expected in ADE iain robinson ePub 8 06-18-2011 04:16 AM
Embedded font bug or CSS bug in ADE JSWolf ePub 10 06-11-2011 02:34 PM
How to "float" illustrations correctly? lindsayw Workshop 5 03-29-2011 08:09 AM
Bizarre ADE bug with brackets charleski ePub 4 08-12-2010 07:23 AM
ADE bug in calculating width DaleDe ePub 6 01-17-2010 09:33 AM


All times are GMT -4. The time now is 04:58 PM.


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