iPad CSS works differently on desktop vs iPad

[Cepheus]

I have created an eBook with a number of chapters containing a graphic at the beginning of each with the following CSS for style:

div.epigraph-facing div.mediaobject img {
margin: 1em auto;
width: auto !important;
height: auto;
text-align: center;
padding: 0;
border: 2px solid black;
}

One chapter uses a different image at the beginning and should not have a border. I have written the following CSS for to target that specific image.


div.epigraph-facing div.mediaobject img[src="images/e_MapOfLincoln.png"] {
border: none !important;
}

This CSS turns off the border to the specific image when I open the book in iBooks on my desktop computer. Unfortunately when I open the eBook in iBooks on my iPad the border is still there.

Is there any explanation for why the border is still there on the iPad???

[JSWolf]

The border is still there because you specified the border. Try this code and see how you get on.

div.epigraph-facing div.mediaobject img {
margin-top: 1em;
margin-bottom: 1em;
text-align: center;
text-indent: 0;
}

[Cepheus]

Thanks for the response JSWolf. In the first CSS statement I did specify the border. This is for the 20 or so chapters that use the same image. The second CSS statement is for a specific image that should not have a border:

div.epigraph-facing div.mediaobject img[src="images/e_MapOfLincoln.png"] {
border: none !important;
}

Not sure why but that image does not have a border when viewed on iBooks on the desktop but does have a border when viewed on the iPad.

Any thoughts why that is happening?

[cedhax]

Typically, EPUB reader apps, including iBooks or Apple Books, render HTML/CSS/Javascript by using a web browser component bundled with the operating system such as macOS or iOS. Thus, the difference you observed may be due to the difference in the system web browser component on macOS and iOS. It may also be due to different version numbers.

One way to explore the issue is to view individual HTML files with Safari browser running on macOS and iOS respectively. If both sets of results are the same, then the bug is probably with the app. Otherwise, it's likely to be the OS.

Moreover, try it with a different ebook reader app to see what results you'll get.

[DNSB]

Originally Posted by Cepheus

Thanks for the response JSWolf. In the first CSS statement I did specify the border. This is for the 20 or so chapters that use the same image. The second CSS statement is for a specific image that should not have a border:

div.epigraph-facing div.mediaobject img[src="images/e_MapOfLincoln.png"] {
border: none !important;
}

Not sure why but that image does not have a border when viewed on iBooks on the desktop but does have a border when viewed on the iPad.

Any thoughts why that is happening?

Order of evaluation? I've seen issues where some renderers seem to evaluate the stylesheet entries in different orders. I would suggest creating a differently named CSS entry without the border entry and see how it behaves. E.g.:

div.epigraph-facing div.mediaobject img {
margin: 1em auto;
width: auto !important;
height: auto;
text-align: center;
padding: 0;
border: 2px solid black;
}

div.epigraph-facing div.mediaobject2 img {
margin: 1em auto;
width: auto !important;
height: auto;
text-align: center;
padding: 0;
border: none;
}