Footnotes Indent inconsistency

[wDr]

Hey all, I have a question. I have a client whose ebook that I coded is displaying inconsistently across devices. On his there is this huge indent, and on other devices there is a small indent. However, the CSS style is coded to have no indent, and no indent is what appears on devices that don't do pop-up footnotes.

The goal is no indent.

Here is how the footnotes are displaying across a few devices (these are all paperwhites from 2 different people):







How his device displays it:



How his device is displaying other ebooks with footnotes:



Does anyone know why this is so inconsistent? Here is the code in the ebook:

<hr class="horizontalrule"/>
<div class="calibre1">
<div id="footnote-001" epub:type="footnote">
<p class="basic-paragraph"><a class="_idgencolorinherit" href="../Text/Mortgages_Ebook-8.xhtml#footnote-001-backlink">1</a> I’m talking about today. There were times when one could simply state their income, put nothing down and have poor credit—and still purchase a house. This led to a massive wave of foreclosures and short sales, which had a domino effect and contributed to a stock market crash. These NINJA loans [No Income, No Jobs or Assets] were packaged into securities called Mortgage-Backed Securities or Collateralized Debt Obligations. Many of these ended up with little to no worth as people in droves defaulted on their loans. </p>
</div>
<div id="footnote-000" epub:type="footnote">
<p class="basic-paragraph"><a class="_idgencolorinherit" href="../Text/Mortgages_Ebook-8.xhtml#footnote-000-backlink">2</a> A real estate lien is the legal right ensured to the holder of the lien to a specified amount of money upon the sale of the property or until debt owed to the lien holder is paid off.</p>
</div>
</div>


And here's the CSS it calls back to:

.calibre1 {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
display: block;
margin: 0;
padding: 0
}
.basic-paragraph {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
display: block;
font-family: "Bookerly", serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.4;
orphans: 1;
page-break-after: auto;
page-break-before: auto;
text-align: left;
text-decoration: none;
text-indent: 0;
text-transform: none;
widows: 1;
margin: 0;
padding: 0
}

Thank you to anyone who can help.

[BetterRed]

Moderator Notice
This is not a calibre issue as such. It is about how different devices deal with footnotes and associated code in ePubs.

So I'm going to move the thread to the ePub forum where the experts in this sort of issue are more likely to see it.

BR

[wDr]

Originally Posted by BetterRed

This is not a calibre issue as such. It is about how different devices deal with footnotes and associated code in ePubs.

So I'm going to move the thread to the ePub forum where the experts in this sort of issue are more likely to see it.

BR

Thanks!

[BetterRed]

BTW your images are oversize see Posting Guidelines -

Images included in posts must be no more than 600x600 pixels.

If you don't fix them soon they will be removed.

If you attach them as images to your post, they'll appear as thumbnails at the end of the post.

BR

[wDr]

Originally Posted by BetterRed

BTW your images are oversize see Posting Guidelines -



If you don't fix them soon they will be removed.

If you attach them as images to your post, they'll appear as thumbnails at the end of the post.

BR

Ooph, sorry. Fixed!

[Turtle91]

I'm not seeing anything with the CSS you provided...but I didn't see how you defined _idgencolorinherit.

As an aside: Why do you use "<p class="basic-paragraph">" instead of just defining the basic paragraph as:
p {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
display: block;
font-family: "Bookerly", serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.4;
orphans: 1;
page-break-after: auto;
page-break-before: auto;
text-align: left;
text-decoration: none;
text-indent: 0;
text-transform: none;
widows: 1;
margin: 0;
padding: 0
}

Then you can simply define the few paragraphs that are NOT basic with a separate definition, eg <p class="not_basic_paragraph"> that makes it much easier to read when troubleshooting/editing... The same can be done with your hyperlinks; define the basic hyperlink as:
a {
yadda
yadda
}

and give the few non-basic links a special class.

[Hitch]

Originally Posted by wDr

Hey all, I have a question. I have a client whose ebook that I coded is displaying inconsistently across devices. On his there is this huge indent, and on other devices there is a small indent. However, the CSS style is coded to have no indent, and no indent is what appears on devices that don't do pop-up footnotes.

The goal is no indent.

Here is how the footnotes are displaying across a few devices (these are all paperwhites from 2 different people):


How his device displays it:


Does anyone know why this is so inconsistent? Here is the code in the ebook:

<hr class="horizontalrule"/>
<div class="calibre1">
<div id="footnote-001" epub:type="footnote">
<p class="basic-paragraph"><a class="_idgencolorinherit" href="../Text/Mortgages_Ebook-8.xhtml#footnote-001-backlink">1</a> I’m talking about today. There were times when one could simply state their income, put nothing down and have poor credit—and still purchase a house. This led to a massive wave of foreclosures and short sales, which had a domino effect and contributed to a stock market crash. These NINJA loans [No Income, No Jobs or Assets] were packaged into securities called Mortgage-Backed Securities or Collateralized Debt Obligations. Many of these ended up with little to no worth as people in droves defaulted on their loans. </p>
</div>
<div id="footnote-000" epub:type="footnote">
<p class="basic-paragraph"><a class="_idgencolorinherit" href="../Text/Mortgages_Ebook-8.xhtml#footnote-000-backlink">2</a> A real estate lien is the legal right ensured to the holder of the lien to a specified amount of money upon the sale of the property or until debt owed to the lien holder is paid off.</p>
</div>
</div>


And here's the CSS it calls back to:

.calibre1 {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
display: block;
margin: 0;
padding: 0
}
.basic-paragraph {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
display: block;
font-family: "Bookerly", serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.4;
orphans: 1;
page-break-after: auto;
page-break-before: auto;
text-align: left;
text-decoration: none;
text-indent: 0;
text-transform: none;
widows: 1;
margin: 0;
padding: 0
}

Thank you to anyone who can help.

Without knowing what the basic-paragraph might be inheriting, or cascading, we can't know what the problem may be. What's the definition of the basic p class?

Hitch

[GrannyGrump]

If I'm interpreting the css right, the class .basic-paragraph IS your default paragraph styling, right?

I wonder if it might help to add "important" to your zero-indent. Thus:
text-indent: 0 !important;

I have read here and elsewhere that some devices need that to ensure the app / device software doesn't override your zero-indent. It is worth a try anyway. You could also add that attribute to your styling for <a> "_idgencolorinherit" as a fail-safe.

[Freeshadow]

Taking into consideration that we're speaking about epubs here, and the screenshots provided show a kindle, it's rather a conversation than a generic epub issue

[Hitch]

Originally Posted by GrannyGrump

If I'm interpreting the css right, the class .basic-paragraph IS your default paragraph styling, right?

I wonder if it might help to add "important" to your zero-indent. Thus:
text-indent: 0 !important;

I have read here and elsewhere that some devices need that to ensure the app / device software doesn't override your zero-indent. It is worth a try anyway. You could also add that attribute to your styling for <a> "_idgencolorinherit" as a fail-safe.

Granny:

I meant, his unadorned, plain, p styling. He may not have that left, in his CSS--but he might. If he does, it could easily be overriding the cascaded styles. He identifies this ".basic paragraph" with that--not p.basic_paragraph. I'm assuming that somewhere, there's a p. Now, if he didn't define it anywhere, the MOBI defaults could possibly be overriding the named class.

Hitch