uninvited "user agent stylesheet"

[roger64]

Hi

One friend of mine showed me an illustrated book in odt format so that I could test a converter. I was surprised by the display of some images on the EPUB: it seemed like there was an unexpected added margin around them.

I used the Calibre inspector to check what happened with the CSS. I found that a "user agent stylesheet" had crept in and wrapped a 8px margin around the image. It was unherited from the body value of this uninvited stylesheet.

Mr "User agent" had other ideas too about h2 and h3 like font-size, webkit-margin-(before, after, start, end), font-weight...

I did not have set margin for the body, but nevertheless I found this behaviour very surprising because these foreign values do not appear anywhere in the code. Had not the Inspector been around, I would have been totally puzzled.

How to prevent these "user agent stylesheets" to come in again unexpected and unrequested?

[dgatwood]

A UA stylesheet is provided by each book reading platform, and provides its default styles. You can't prevent them from being there; they just are. All you can do is override anything that you consider to be important.

A word of caution, though.... Some readers misbehave badly when you try to set the page or body padding/margins to non-default values. So when you zero the margin, do so on the img tag, not the body tag.

[roger64]

Originally Posted by dgatwood

A UA stylesheet is provided by each book reading platform, and provides its default styles. You can't prevent them from being there; they just are. All you can do is override anything that you consider to be important.

A word of caution, though.... Some readers misbehave badly when you try to set the page or body padding/margins to non-default values. So when you zero the margin, do so on the img tag, not the body tag.

Thanks for the warning. The problem is that these kinds of stylesheet are not everywhere. If they cannot be discarded, at least is there a way to detect them automatically (other than using a heavy-handed Inspector) and warn the user?

Taking into account your advice not to set the body margin to zero to avoid some readers misbehaviour, I thought I could be possible to use a negative margin in the img tag so as to counter the unwanted body margin. Using frame styles, it can be a quick process. It could work only on the margin-top and margin-left values though but it's valid CSS.