pablonolla
Level 1 (0 points)

Q: iOS7 differently displaying images with % "height" in CSS

Hello there...

 

Prior to iOS7, iBooks were displying the books we are doing one way - the way we wanted-, and with iOS7 it has changed.

 

Particularly: before, we were setting the "height" of a <div> containing an image as a % on CSS like this:

 

.contenedor_foto_autor {

height:100%;

width:auto;

page-break-before:always;

page-break-inside: avoid;

text-align:center;

font-size:0.9em;

}

.foto-autor {

height:70%;

width:auto;

}

 

And the xhtml being:

  <div class="contenedor_foto_autor">

       <div class="foto_autor">

           <img src="imagenes/Robert_Louis_Stevenson_1885.jpg"  alt="Retrato"/>

       </div>

       <p><span class="letra_mayor">R</span>OBERT <span class="letra_mayor">L</span>OUIS <span class="letra_mayor">S</span>TEVENSON</p

          </div>

 

The result of this was a picture filling the 70% of the iPad/iPhone screen height, and the text under it, as we expected.

 

 

Now, this same code results on the picture filling ALL the page and the <p> on the next page.

 

Any ideas, sugestions, help to understand what is happening and how to solve this -how to have the "height" set ???

 

Thank you!!

iBook, iOS 6.1

Posted on Oct 17, 2013 9:08 AM

Close
pablonolla

Q: iOS7 differently displaying images with % "height" in CSS

  • All replies
  • Helpful answers

  • by RoushMan427,

    RoushMan427 RoushMan427 Dec 26, 2013 11:00 AM in response to pablonolla
    Level 1 (0 points)
    Dec 26, 2013 11:00 AM in response to pablonolla

    Hi pablonolla, I am having the same similar problem, I just finished creating an Ebook today and updated to iOS7 and the new iBooks for iOS7 and now all my spacing is messed up, I did mine using primarily <p>s and <span>s, (including many many images) along with some line breaking with a clear all tag to "assure" the content would start on a new page, now I am going to have go through my entire Ebook which took me weeks to complete, and respace the whole thing. My theory is that by removing the book view with the center and outer margins, they increased the overall width of the page view which inadvertantly affects the height. Not sure how to go about this without respacing the whole thing...and what if they do this again in iOS 8???

     

    Message was edited by: RoushMan427

  • by RoushMan427,

    RoushMan427 RoushMan427 Dec 26, 2013 11:29 AM in response to RoushMan427
    Level 1 (0 points)
    Dec 26, 2013 11:29 AM in response to RoushMan427

    What I am going to try is use a clearing element at the beginning every page to force it start on the page that I want, as opposed to iBooks allowing for more text on the page than I want, I will let you know if the code works, here is the code if you want to try it yourself:

     

    <div class="Section1" style="clear:both; mso-break-type:section-break; page-break-before:always">    </div> 

     

    (PUT YOUR PAGE BETWEEN THE BEGINNING AND ENDING DIV TAGS)

     

    AND HERE IS THE CSS:

     

    @page Section1 { margin:36pt; size:432pt 648pt }

    div.Section1 { page:Section1 }

     

    Message was edited by: RoushMan427

  • by RoushMan427,

    RoushMan427 RoushMan427 Dec 26, 2013 11:24 AM in response to RoushMan427
    Level 1 (0 points)
    Dec 26, 2013 11:24 AM in response to RoushMan427

    It works!!! I'm going to do this for my whole book, good luck! If you need help with the code let me know.