01-05-2012, 05:13 AM | #1 |
Member
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...? |
01-05-2012, 07:21 AM | #2 |
Wizard
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.
|
Advert | |
|
01-06-2012, 06:28 AM | #3 |
Member
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" /> 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". |
01-06-2012, 06:56 AM | #4 |
Wizard
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? |
01-06-2012, 07:07 AM | #5 |
Member
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.
|
Advert | |
|
01-06-2012, 07:24 AM | #6 |
frumious Bandersnatch
Posts: 7,515
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. |
01-06-2012, 08:33 AM | #7 |
Member
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... |
01-06-2012, 12:01 PM | #8 | |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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... |
|
01-06-2012, 12:41 PM | #9 |
Member
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 ? |
01-06-2012, 01:37 PM | #10 |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
01-06-2012, 02:14 PM | #11 |
Wizard
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?
|
01-06-2012, 02:18 PM | #12 |
Resident Curmudgeon
Posts: 73,887
Karma: 128597114
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.
|
01-07-2012, 09:45 AM | #13 |
Member
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
|
|
01-07-2012, 09:49 AM | #14 |
Member
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
|
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 !
|
01-07-2012, 09:59 AM | #15 | |
Member
Posts: 18
Karma: 10
Join Date: Dec 2011
Device: ipad
|
Quote:
Can I send you the epub from here ? Dis you see my other post about font problem ? |
|
|
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 |