Quote:
Originally Posted by charleski
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