View Full Version : Float bug in ADE ?


helenouchkaia
01-05-2012, 05:13 AM
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...?

Toxaris
01-05-2012, 07:21 AM
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.

helenouchkaia
01-06-2012, 06:28 AM
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".

Toxaris
01-06-2012, 06:56 AM
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?

helenouchkaia
01-06-2012, 07:07 AM
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.

Jellby
01-06-2012, 07:24 AM
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.

helenouchkaia
01-06-2012, 08:33 AM
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...

Jellby
01-06-2012, 12:01 PM
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...

helenouchkaia
01-06-2012, 12:41 PM
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 ?

Jellby
01-06-2012, 01:37 PM
Can I ask you what you are doing yourself ?

What do you mean?

Toxaris
01-06-2012, 02:14 PM
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?

JSWolf
01-06-2012, 02:18 PM
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.

helenouchkaia
01-07-2012, 09:45 AM
What do you mean?

I was wondering about what you are doing in your job, what kind of epubs do you make ?

helenouchkaia
01-07-2012, 09:49 AM
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
01-07-2012, 09:59 AM
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 ?

Jellby
01-08-2012, 05:00 AM
I was wondering about what you are doing in your job, what kind of epubs do you make ?

I work as a researcher (chemist) in a university, and my job has nothing to do with epubs. Everything I've learned and done with ebooks has been just a hobby. I'm currently reading, correcting and preparing an epub version of "Les misérables" (in French), and reading other things that are not public domain, so I won't publish them :D

JSWolf
01-08-2012, 11:11 AM
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 ?

You can either attach the ePub to a message in this thread or you can PM me and I'll give you my email address to send it to. I can easily take a look at it in ADE 1.8 and a see how it looks.