CSS ignored by Adobe and Sony readers - fine with iPad

Hi,

After fixing the previous problem (in another thread here) and redoing all my photos for better quality, my epub has passed the flight check.

It works on the iPad just fine.

But Adobe Digital Editions and the Sony reader both ignore parts of my style sheet. Which means my photos go across several pages and fonts (which I did now embed) are ignored. <sigh>

css for the photos is:
img.photo {
max-height: 95%;
max-width: 100%;
page-break-inside: avoid;
page-break-after:avoid;
margin-right: auto;
margin-left: auto;
border: 1px solid #ff5900;
}

It totally ignores the max-height and max-width settings. Have any of you had that problem with those two readers? If so, can it be fixed?? How??

Thanks,
Ann.

I actually looked into this earlier. height on images seem to be ignored by some readers.

Especially if width is given, the height is ignored.

Sadly the CSS in ePub doesn't support the new max-width and max-height attributes.

I've had some success placing the images inside a <div> or a <table>.

Best Regards
A.Grandt

Hi Asbjorn,

Thanks for your reply. I have actually set-up each photo, as follows:

<div class="Foto-box-">
<img alt="xxx" class="photo" src="../Images/xxx.jpg" />

<p xmlns:xml="http://www.w3.org/XML/1998/namespace" class="picture-caption" xml:lang="de">caption xxx<br />
Foto: xxx</p>
</div>

class="photo" is set as described in the first posting.

class="Foto-box-" is set as:

div.Foto-box- {
text-align: center;
max-height: 100%;
padding-top: 10px;
padding-bottom: 10px;
page-break-inside: avoid;
page-break-after: avoid;
display: inline-block;
}

which is obviously ignored to.

I had replaced all tables with jpgs, as the tables messed up, too.

But I will try setting up the photos inside a table. How did you define the photo table? Anything specific I should be paying attention to?

Thanks,
Ann.

The brief test I did was :

<table><tr><td>
<div class="img"><img src="25466.jpg" alt="testImage"/><div class="desc">- image</div></div>
</td></tr></table>

CSS:
table {
page-break-inside:avoid;
height: 90%;
width: 90%;
}
div.img {

text-align: center;
orphans: 0;
page-break-inside: avoid;
}
div.desc {
text-align: left;
font-weight:normal;
font-style:italic;
text-indent: 1em;
}

This was a brief test, and nothing really came of it as I ran out of time when I was testing, and didn't get back to it afterwards. But it seems that this will help place the image inside a page on the screen.

One thing I noticed was that the caption consistently went to the next page.

I think the main problem stems from the fact that HTML which is the basis for the ePub format isn't very page centric. CSS3 and to some extend CSS2 tried to address this, however these attributes aren't a part of the ePub spec. I really wish it had been.

Hi,

Not working at all for ADE. It's like I hadn't done anything. :-(

This is driving me nuts. ADE doesn't react to width: 100%; in the css. But it does take width="100%" in the html.

It doesn't like max-width in the html neither, though.

It has been a horrible week and I am really tired. My brain is doing weird things...like if I replace all photo class definition with the photo call and an added width.... will this ever mess up me img heights or not...

(tomorrow morning well rested, I'll probably be laughing at myself....)
Ann.

From what I understand the page handling is one of the issues that is being addressed in the next version of the ePub specification, but we will be stuck with the current one for ages to come.

The problem is that HTML in general doesn't have any concept about height, it's designed to flow as high as needed unless it's a fixed height is specified, by saying 100% you are allowing it to be as high as the entire HTML page.