02-03-2022, 08:02 PM | #1 |
Banned
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. |
02-03-2022, 08:20 PM | #2 |
Grand Sorcerer
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.
|
02-03-2022, 09:14 PM | #3 |
Banned
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. |
02-03-2022, 09:46 PM | #4 |
Grand Sorcerer
Posts: 6,470
Karma: 84000001
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
|
02-03-2022, 10:11 PM | #5 |
Banned
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. |
02-03-2022, 10:13 PM | #6 |
Grand Sorcerer
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.
|
02-03-2022, 10:33 PM | #7 |
Grand Sorcerer
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.
|
02-10-2022, 10:14 AM | #8 | |
Bookmaker & Cat Slave
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:
Hitch |
|
04-15-2022, 03:19 AM | #9 | |
Witchman
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:
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> 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> Last edited by slowsmile; 04-15-2022 at 03:49 AM. |
|
04-15-2022, 08:28 PM | #10 | |
Bibliophagist
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:
Last edited by DNSB; 04-15-2022 at 08:47 PM. |
|
Thread Tools | Search this Thread |
|
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 |