img tag question..

scott.a.andrew · 02-17-2010, 06:47 PM

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.

charleski · 02-17-2010, 08:53 PM

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">)

scott.a.andrew · 02-17-2010, 09:56 PM

Quote:

Originally Posted by charleski

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..

frabjous · 02-17-2010, 10:39 PM

Does changing <br /> to <br clear="all" /> help?

scott.a.andrew · 02-17-2010, 11:31 PM

Quote:

Originally Posted by frabjous

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.

bobcdy · 02-18-2010, 12:55 AM

This works with Adobe DE and my Bebook:

<div class="center">
<div> </div>
<img src="../images/img0012.jpg" />
<div> </div>
<img src="../images/img0013.jpg" /><br />
<div> </div>
Bob

bobcdy · 02-18-2010, 12:59 AM

Sorry, the <br/> should be deleted and a last </div> inserted at end after <div> </div>
Bob

charleski · 02-18-2010, 08:15 AM

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 :/.

scott.a.andrew · 02-18-2010, 09:34 AM

Quote:

Originally Posted by charleski

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..

bobcdy · 02-18-2010, 02:38 PM

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> </div> and that seems to take care of the problem. It's always worked for me with ADE, etc. as a replacement. Bob

02-17-2010, 06:47 PM	#1
scott.a.andrew Junior Member 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.

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

02-17-2010, 08:53 PM	#2
charleski Wizard Posts: 1,196 Karma: 1281258 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">)

02-17-2010, 10:39 PM	#4
frabjous Wizard 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?

02-18-2010, 12:55 AM	#6
bobcdy Fanatic Posts: 527 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> </div> <img src="../images/img0012.jpg" /> <div> </div> <img src="../images/img0013.jpg" /><br /> <div> </div> Bob

02-18-2010, 12:59 AM	#7
bobcdy Fanatic Posts: 527 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> </div> Bob

02-18-2010, 08:15 AM	#8
charleski Wizard Posts: 1,196 Karma: 1281258 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 :/.

02-18-2010, 02:38 PM	#10
bobcdy Fanatic Posts: 527 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> </div> and that seems to take care of the problem. It's always worked for me with ADE, etc. as a replacement. Bob