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 06-16-2011, 09:42 AM   #1
iain robinson
Connoisseur
iain robinson began at the beginning.
 
Posts: 75
Karma: 10
Join Date: Apr 2011
Location: UK
Device: none
float not working as expected in ADE

Hi all

We have some text + a pic in coloured box that appears at the end of various articles within our ePub. It looks good in iBooks (see screenshot attached) but breaks down in ADE.

The code is as follows;
<div class="story rightFloat">
<p class="biography-in-blue-box"><span class="bio-blue-box-pic"><img alt="nicovaneijk.jpg" class="rightFloat" height="139" src="../Images/nicovaneijk_fmt.jpeg" width="98" /></span>Nico van Eijk is Professor of meh.</p>
</div>


and the CSS is;
Code:
p.biography-in-blue-box{
background: #662282 !important;
color: white;
font-weight: bold;
padding:0.5em;
margin-right:30%;
line-height:1.25em;
-webkit-hyphens:none;
}

span.bio-blue-box-pic{
width:100%;
float:right
}
Can anyone see how I can get it to work in ADE?

thanks,
Iain
Attached Thumbnails
Click image for larger version

Name:	ADE.png
Views:	330
Size:	44.7 KB
ID:	72860   Click image for larger version

Name:	iBooks.png
Views:	323
Size:	51.0 KB
ID:	72861  
iain robinson is offline   Reply With Quote
Old 06-16-2011, 12:48 PM   #2
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 iain robinson View Post
It looks good in iBooks (see screenshot attached) but breaks down in ADE.
It may look good to you, but it's not floating or, at least, it's not what one intends when using floats.

The thing is you are using "width: 100%" for the span, so it takes the whole width of the paragraph, leaving no room for text. iBooks places no text there and skips until below the picture, while it seems ADE is placing always a word at least on each line.

I'd use something like:

Code:
span.bio-blue-box-pic{
  display: block;
  text-align: left;
}
I use "display: block", because you cannot use a <div> inside a <p>, but you could assign the background colour, etc. to the outside <div> and put the picture in another <div> before the <p>...
Jellby is offline   Reply With Quote
Old 06-17-2011, 03:05 AM   #3
iain robinson
Connoisseur
iain robinson began at the beginning.
 
Posts: 75
Karma: 10
Join Date: Apr 2011
Location: UK
Device: none
Thanks Jellby - I changed the span definition with my existing code and it is now working. And I can understand how it works. Brilliant - thanks!
iain robinson is offline   Reply With Quote
Old 06-17-2011, 04:27 AM   #4
iain robinson
Connoisseur
iain robinson began at the beginning.
 
Posts: 75
Karma: 10
Join Date: Apr 2011
Location: UK
Device: none
A supplementary question if I may - I want that purple box not to get split over two pages. If I add display: inline-block; to the CSS for the containing paragraph (biography-in-blue-box), in ADE it doesn't split but the right margin disappears and the purple box fills the width of the whole page. If I preview it in a webkit-based reader (Ibis) the box's right margin is still honoured. Any way I can stop if filling the whole width in ADE (and webkit)?
iain robinson is offline   Reply With Quote
Old 06-17-2011, 05:53 AM   #5
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
inline-block is not supported in the ePUB standard, so it's better not to use it. If you want to avoid page breaks inside an element, use "page-break-inside: avoid" (I'm not 100% sure that works in ADE, but it should)
Jellby is offline   Reply With Quote
Old 06-17-2011, 06:18 AM   #6
iain robinson
Connoisseur
iain robinson began at the beginning.
 
Posts: 75
Karma: 10
Join Date: Apr 2011
Location: UK
Device: none
Thanks Jellby. I'm pretty sure page-break-inside: avoid isn't supported in webkit but testing it out in ADE it works, but if I then apply the span to the image using the code you suggested earlier then it splits the paragraph after the pic (see attached). The text still clears the pic (here and on other pages) but it seems to be overruling the page-break-inside: avoid.
Attached Thumbnails
Click image for larger version

Name:	Untitled-1.png
Views:	310
Size:	86.2 KB
ID:	72902  
iain robinson is offline   Reply With Quote
Old 06-17-2011, 07:48 AM   #7
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 think I have had success by adding "page-break-after: avoid" (or -before) to the elements inside, try something like:

Code:
span.bio-blue-box-pic{
  page-break-after: avoid;
}
Jellby is offline   Reply With Quote
Old 06-17-2011, 08:04 AM   #8
iain robinson
Connoisseur
iain robinson began at the beginning.
 
Posts: 75
Karma: 10
Join Date: Apr 2011
Location: UK
Device: none
Thank you - that combination of code works great now
iain robinson is offline   Reply With Quote
Old 06-18-2011, 04:16 AM   #9
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
Quote:
Originally Posted by Jellby View Post
If you want to avoid page breaks inside an element, use "page-break-inside: avoid" (I'm not 100% sure that works in ADE, but it should)
It does on my Sony 650, and can be temporarily disabled by styling
"page-break-inside: auto;"
AlexBell 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
Error expected td or th jmickey Conversion 11 04-07-2011 04:14 PM
How to "float" illustrations correctly? lindsayw Workshop 5 03-29-2011 08:09 AM
ADE suddenly stopped working? suecsi Reading and Management 5 11-03-2010 01:53 PM
ADE suddenly stopped working? suecsi PDF 2 10-26-2010 02:45 PM
No. of visitors expected Manishsb General Discussions 5 08-05-2010 11:20 AM


All times are GMT -4. The time now is 09:14 AM.


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