View Single Post
Old 08-16-2010, 06:20 PM   #10
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 2,379
Karma: 12871193
Join Date: Apr 2010
Location: Phoenix, AZ
Device: Kindle2, iPad, KindleFire and NookColor
Quote:
Originally Posted by charleski View Post
The real issue here is why float isn't working on the iPad. Since you want to have something that will easily convert to mobi you'll need to keep things pretty simple, and certainly avoid SVG.

Post a full example of the code that's not working, as without that we're bumbling in the dark here.
Okey-dokey. Well, this should be fun. Here's the best image I have of what's happening with the page, attached (I didn't take it). You can see the "stair-stepping" problem.

Just FYI, I really struggle with CSS because I have zero three-dimensional visualization skills. And yes, before anyone says it, I know that using the break tags between the images is BAD, but after trying a bunch of padding, margins, float here, float there, etc., I finally gave up and did it this way. I know it's lame, but I'm frustrated. The "list" looks fine in EPubReader but whacks out on the iPad; I suspect it's because...you know what, I don't know what I think anymore. Maybe it's so simple I just can't see it.

Here's an example of the code:

Quote:
<h2 id="heading_id_3">Picture Books (in Alphabetical Order):</h2>

<div>
<br />
</div>

<h3 id="heading_id_4"><img class="book" alt="" src="../Images/howdoiloveyou_spanish.gif" />Come Te Amo? (Spanish)</h3>

<div>
<br />
</div>

<div>
<br />
</div>

<h3 id="heading_id_5"><img class="book" alt="" src="../Images/christmasgrandmas.jpg" />Christmas at Grandma's House<br /></h3>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<h3 id="heading_id_6"><img class="book" alt="" src="../Images/easterourhouse.jpg" />Easter at Our House<br /></h3>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<div>
<br />
</div>

<h3 id="heading_id_7"><img class="book" alt="" src="../Images/fortheloveofourearth.gif" />For the Love of Our Earth<br /></h3>
Sorry for all the breaks in the code, but if you don't see it as it really is, we can't fix it. This is the CSS for the image:

Quote:
img.book {
float:left;
padding:5px 10px 20px 0px}
I don't know how to make this simpler, I really don't. I am open to any and all suggestions...although I'm not sure I understand, Cap, how making this into a list will help me. OH--and I do want the headers, please, so the nine bazillion titles show up in the TOC, thanks.

Hitch
Attached Images
File Type: bmp stairstep.bmp (900.1 KB, 148 views)
Hitch is offline   Reply With Quote