1 Reply Latest reply on Feb 26, 2016 1:25 PM by soundman1963

    InDesign ePUB - can't get image bottom to be flush with vertical css borders

    soundman1963 Level 1

      hello,

       

      I'm testing my new found epub skills in InDesign CC2015. I'm working on a simple project that was originally intended for print (pdf) and have decided to make an epub version. I created an external css file where I include left & right borders for aesthetics. These borders grow and contract vertically, depending on how much content exists on the page.

       

      The problem I've run into is if I have an image as the last asset on the page, the image appears slightly higher than the bottom of the border (see screen shot on left). It looks like it's a pixel or two higher. The rasterized graphic is anchored to a blank paragraph with a single non-breaking space character. The text frame has no indentations, no space before / after values and has auto-leading set. Object styles were created for the frame and graphic and a paragraph style was made for the text. This occurs for any image I load into the page and place it at the bottom.

       

      In the other screen shot, I have a text frame as the last element and I'm getting a perfect flush appearance at the bottom (screen shot on the right).

       

      I've cracked open the epub and viewed the html pages in Chrome. I launched the F12 tools to see the html and css code and all margin values are set to zero. I can't figure out why this only happens for images and not text frames. Anyone have an idea why this occurs?

       

      digital-editions-1.jpgdigital-editions-2.jpg

        • 1. Re: InDesign ePUB - can't get image bottom to be flush with vertical css borders
          soundman1963 Level 1

          I recently figured out the answer to my own question. I indicated that I was using an external CSS file to add some additional styling, mainly for the vertical borders. After I cracked open the ePUB, I opened the html page in Chrome and burrowed down to find the <img> via the F12 tools.  I highlighted the <img> tag and took a look at the corresponding CSS. There were no margin values so I added a img {margin-bottom:-3px;} entry to it and this made the bottom of the image run flush with the bottom of the borders. Then I went back to my external CSS file for the ePUB and added the same values. Upon export to Adobe Digital Editions, I got the same desired results. The other images in the document didn't appear to be visually compromised from this either so I think that's a wrap.

           

          flush.jpg