View Full Version : 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
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
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>&nbsp;</div>
<img src="../images/img0012.jpg" />
<div>&nbsp;</div>
<img src="../images/img0013.jpg" /><br />
<div>&nbsp;</div>
Bob

bobcdy
02-18-2010, 12:59 AM
Sorry, the <br/> should be deleted and a last </div> inserted at end after <div>&nbsp;</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
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..

:thanks:

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