Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 02-03-2022, 08:02 PM   #1
SigilBear
Banned
SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.
 
Posts: 244
Karma: 2112680
Join Date: Jan 2017
Device: iBooks
Problems with Image CSS

I just published a couple epubs to Amazon, Barnes & Noble and Kobo. They look OK except for the images. In most cases, the images display on separate pages, instead of within the text.

Images that are supposed to be tiny icons may span an entire page.

The problem is worst in Kobo. I e-mailed them, but never got a reply.

You can see an example if you click "Preview" @ here. The image at the top of the Table of Contents page is supposed to be a tiny icon.

This is my CSS:

/* Set width of div enclosing image. */
.x--w50 { width: 50%; }
.x--w10 { width: 10%; }

/* Images span the enclosing div, regardless of its width. */
.div--img img { width: 100%; }

/* Misc. */
.div--img { margin: 10px auto; }
.div--img img { border: none; }

/* ALIGNMENT */
.alignright, img.alignright {
margin-left: 1.5em;
display: inline;
float: right;
}

This is the HTML code for a regular image, one that spans the page...

<div class="div--img"><img src="../Images/image.jpg" alt="Image"/></div>

And here's the code for an image that's supposed to span just 10% of the page and be floated to the right:

<div class="div--img x--w10 alignright"><img src="../Images/image.jpg" alt="Image"/></div>

Does anyone know how to solve this? Thanks.
SigilBear is offline   Reply With Quote
Old 02-03-2022, 08:20 PM   #2
jhowell
Grand Sorcerer
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 6,470
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
One problem I see is that display:inline from the alignright class conflicts with width:10% from the x--w10 class. Setting width is not allowed for an inline element.
jhowell is offline   Reply With Quote
Old 02-03-2022, 09:14 PM   #3
SigilBear
Banned
SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.
 
Posts: 244
Karma: 2112680
Join Date: Jan 2017
Device: iBooks
Thanks, but I'm confused. Are you saying I can't control the size of an image if it's floated to the right?

Maybe instead of adjusting image size, I should just use tiny images (e.g. 15 pixels). I was in the habit of using larger images and assigning them a smaller size to preserve image quality.
SigilBear is offline   Reply With Quote
Old 02-03-2022, 09:46 PM   #4
jhowell
Grand Sorcerer
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 6,470
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
Quote:
Originally Posted by SigilBear View Post
Thanks, but I'm confused. Are you saying I can't control the size of an image if it's floated to the right?
No. I’m saying you should not be using display:inline. You want to control the width of the div that contains the image so leave it as a block element.
jhowell is offline   Reply With Quote
Old 02-03-2022, 10:11 PM   #5
SigilBear
Banned
SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.SigilBear ought to be getting tired of karma fortunes by now.
 
Posts: 244
Karma: 2112680
Join Date: Jan 2017
Device: iBooks
Got it, thanks.

I made some changed and republished it to Kobo. The preview hasn't changed, but maybe I just need to wait a little longer.
SigilBear is offline   Reply With Quote
Old 02-03-2022, 10:13 PM   #6
jhowell
Grand Sorcerer
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 6,470
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
Because it is floated the display:inline on the div doesn't actually matter for most HTML renderers, Kindle for example. But it appears matter to for some.
jhowell is offline   Reply With Quote
Old 02-03-2022, 10:33 PM   #7
jhowell
Grand Sorcerer
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 6,470
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
I am going to add that I am in no way an expert on Kobo an may be misdiagnosing the problem on that platform.
jhowell is offline   Reply With Quote
Old 02-10-2022, 10:14 AM   #8
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: 11,447
Karma: 157030631
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
Quote:
Originally Posted by SigilBear View Post
Got it, thanks.

I made some changed and republished it to Kobo. The preview hasn't changed, but maybe I just need to wait a little longer.
Well, nothing I do makes the preview render, so...running Chrome on a Win10PC, 64x, no reason that I can think of that it wouldn't. Can't explicate it.

Hitch
Hitch is offline   Reply With Quote
Old 04-15-2022, 03:19 AM   #9
slowsmile
Witchman
slowsmile ought to be getting tired of karma fortunes by now.slowsmile ought to be getting tired of karma fortunes by now.slowsmile ought to be getting tired of karma fortunes by now.slowsmile ought to be getting tired of karma fortunes by now.slowsmile ought to be getting tired of karma fortunes by now.slowsmile ought to be getting tired of karma fortunes by now.slowsmile ought to be getting tired of karma fortunes by now.slowsmile ought to be getting tired of karma fortunes by now.slowsmile ought to be getting tired of karma fortunes by now.slowsmile ought to be getting tired of karma fortunes by now.slowsmile ought to be getting tired of karma fortunes by now.
 
Posts: 628
Karma: 788808
Join Date: May 2013
Location: Philippines
Device: Android S5
@SigilBear...Your method of displaying the small image seems to be unecessarily complicated IMHO. Your code here:

Quote:
"And here's the code for an image that's supposed to span just 10% of the page and be floated to the right:"

<div class="div--img x--w10 alignright"><img src="../Images/image.jpg" alt="Image"/></div>
To display the above small image, right aligned without a problem, you could perhaps do it like this:

In the CSS:

div.container {
width: 10%;
height: auto;
padding: 0;
margin: 0;
}

img.imgsize {
width: 100%;
height: auto;
}

...And I would write the image code this way in the html:

Code:
<div align="right" class="container">
    <img class="imgsize" src="../Images/image.jpg" alt="Image01"/>
</div>
In the above example, I'm just using the <div> tags as a properly sized image container(at 10% of the current screen width) with the image inside it at 100% container width. The <div> container is also aligned to the right.

I also regularly add smaller-than-full-screen-width images to my epubs using this html code:

Code:
<p class="center">
    <img alt="Title Page" id="imported-image1"  src="../Images/image1.jpg" style="width: 50%;height:auto;"/>
</p>
In the above html code, I've used an inline style declaration(emphasized in bold) to assure that my image is displayed at 50% of the current screen width. Just another simpler way of doing it. I use this method alot because it uses less html/css code.

Last edited by slowsmile; 04-15-2022 at 03:49 AM.
slowsmile is offline   Reply With Quote
Old 04-15-2022, 08:28 PM   #10
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 34,517
Karma: 144552660
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos
Quote:
Originally Posted by slowsmile View Post
...And I would write the image code this way in the html:

Code:
<div align="right" class="container">
    <img class="imgsize" src="../Images/image.jpg" alt="Image01"/>
</div>
In the above example, I'm just using the <div> tags as a properly sized image container(at 10% of the current screen width) with the image inside it at 100% container width. The <div> container is also aligned to the right.
And the above example will trigger an error on most epub error checkers. 'align="right"' is just bad code.

Last edited by DNSB; 04-15-2022 at 08:47 PM.
DNSB is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Problems with Image CSS SigilBear ePub 3 02-09-2022 05:52 PM
full page image problems with iBooks/cover problems in iTunes iain robinson ePub 1 06-28-2013 11:10 AM
kindlegen - center image using CSS only? mjwilson Kindle Formats 4 09-18-2012 06:02 AM
CSS Problems Ti-Ron ePub 11 04-29-2012 06:20 PM
css, non-repeating background image ckirchho ePub 3 06-26-2009 04:35 AM


All times are GMT -4. The time now is 08:55 AM.


MobileRead.com is a privately owned, operated and funded community.