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 02-17-2010, 06:47 PM   #1
scott.a.andrew
Junior Member
scott.a.andrew began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Feb 2010
Device: Nook
img tag question..

Ok this is a simple question. I have the following tags..

<div style="center">
<img src="1.jpg"/>
<br/>
<br/>
<img src="2.jpg"/>
<br/>
<br/>
<img src="3.jpg"/>
</div>

What i would expect is that each image is center aligned on has 1 break between each image..

However this doesn't work for multiple images you get overlapping images if you have multiple images..

Should each image be wrapped in its own div? I know if i do that all is good.
scott.a.andrew is offline   Reply With Quote
Old 02-17-2010, 08:53 PM   #2
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
Join Date: Sep 2009
Device: PRS-505
I tried to reproduce your problem but the images were laid out fine without overlapping. Perhaps you could upload an example epub to show what's happening. It might be affected by some definition in your CSS file.

(I assume you mean <div style="text-align:center">)
charleski is offline   Reply With Quote
Old 02-17-2010, 09:56 PM   #3
scott.a.andrew
Junior Member
scott.a.andrew began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Feb 2010
Device: Nook
Quote:
Originally Posted by charleski View Post
I tried to reproduce your problem but the images were laid out fine without overlapping. Perhaps you could upload an example epub to show what's happening. It might be affected by some definition in your CSS file.

(I assume you mean <div style="text-align:center">)
Yes I do in my CSS.. For single images all is fine. Once i get to multiple the alignments are all off. You can see it in a few articles.. I am sure its just something in the books CSS which I am trying to keep simple..
Attached Files
File Type: epub MacNNTest.epub (1.01 MB, 88 views)
scott.a.andrew is offline   Reply With Quote
Old 02-17-2010, 10:39 PM   #4
frabjous
Wizard
frabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
frabjous's Avatar
 
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
Does changing <br /> to <br clear="all" /> help?
frabjous is offline   Reply With Quote
Old 02-17-2010, 11:31 PM   #5
scott.a.andrew
Junior Member
scott.a.andrew began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Feb 2010
Device: Nook
Quote:
Originally Posted by frabjous View Post
Does changing <br /> to <br clear="all" /> help?
No.. What works are a couple of things..

1.) Changing the <br/> to <p/>
2.) wrapping each image in div, which is more difficult..

(this is automatically generated parsing a web page and converting to epub)

On solution i have is to convert to two <br/> tags into a <p/> which appears to be equivalent and then the styling works. It seems to just affect img tags.
scott.a.andrew is offline   Reply With Quote
Old 02-18-2010, 12:55 AM   #6
bobcdy
Fanatic
bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.
 
bobcdy's Avatar
 
Posts: 509
Karma: 1048576
Join Date: May 2009
Device: bebook; prs-950; nook simple touch; HTC Jetstream tablet
This works with Adobe DE and my Bebook:

<div class="center">
<div>&nbsp;</div>
<img src="../images/img0012.jpg" />
<div>&nbsp;</div>
<img src="../images/img0013.jpg" /><br />
<div>&nbsp;</div>
Bob
bobcdy is offline   Reply With Quote
Old 02-18-2010, 12:59 AM   #7
bobcdy
Fanatic
bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.
 
bobcdy's Avatar
 
Posts: 509
Karma: 1048576
Join Date: May 2009
Device: bebook; prs-950; nook simple touch; HTC Jetstream tablet
Sorry, the <br/> should be deleted and a last </div> inserted at end after <div>&nbsp;</div>
Bob
bobcdy is offline   Reply With Quote
Old 02-18-2010, 08:15 AM   #8
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
Join Date: Sep 2009
Device: PRS-505
It looks like you've uncovered a bug in Adobe Digital Editions with regard to image handling and the br tag.

The images render fine in calibre and the page renders fine in firefox. I tried various things with float, padding, margins and adobe's page-template, but still get the overlap. In fact I was able to crash ADE 1.7.2 by playing around with br tags. The bug seems to be dependent on the viewport being narrower than the combined width of two consecutive images. If it's wider, then they display without overlap, though side-by-side. If the first image is wider than the viewport, then the consecutive ones get pushed down but those will again overlap with each other if their combined width is too large. I've submitted it as a bug to Adobe.

It looks like post-processing the file to convert 2 br tags to <p /> is the only thing that works, sorry :/.
charleski is offline   Reply With Quote
Old 02-18-2010, 09:34 AM   #9
scott.a.andrew
Junior Member
scott.a.andrew began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Feb 2010
Device: Nook
Quote:
Originally Posted by charleski View Post
It looks like you've uncovered a bug in Adobe Digital Editions with regard to image handling and the br tag.

The images render fine in calibre and the page renders fine in firefox. I tried various things with float, padding, margins and adobe's page-template, but still get the overlap. In fact I was able to crash ADE 1.7.2 by playing around with br tags. The bug seems to be dependent on the viewport being narrower than the combined width of two consecutive images. If it's wider, then they display without overlap, though side-by-side. If the first image is wider than the viewport, then the consecutive ones get pushed down but those will again overlap with each other if their combined width is too large. I've submitted it as a bug to Adobe.

It looks like post-processing the file to convert 2 br tags to <p /> is the only thing that works, sorry :/.
Good. I wasn't going crazy for a couple of hours yesterday.. Thanks for the verification..

scott.a.andrew is offline   Reply With Quote
Old 02-18-2010, 02:38 PM   #10
bobcdy
Fanatic
bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.bobcdy ought to be getting tired of karma fortunes by now.
 
bobcdy's Avatar
 
Posts: 509
Karma: 1048576
Join Date: May 2009
Device: bebook; prs-950; nook simple touch; HTC Jetstream tablet
Andrew,
I'm certainly not an expert in css, but from what I can gather the <br/> is depreciated and should not be used
http://www.codehelp.co.uk/html/deprecated.html.
I had the same problem you mentioned which I why I suggested it above. It's simple to do a search/replace to replace the <br/> with <div>&nbsp;</div> and that seems to take care of the problem. It's always worked for me with ADE, etc. as a replacement. Bob
bobcdy 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
WIDTH and HEIGHT in <img> tags Pablo Sigil 3 06-10-2010 05:37 PM
Can you decompile an IMG file? Nate the great Android Devices 3 06-06-2010 07:37 AM
PRS-900 Help! Who can help me to pack the opt.img alansuyalun Sony Reader 5 05-08-2010 09:25 PM
Need new_opt.img for 1.2.00.18050 SpeedFreak Sony Reader Dev Corner 6 12-15-2009 08:52 AM
libprs/calibre tag question smaulz Calibre 7 05-12-2008 07:54 PM


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


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