Moving endnotes/footnotes - Page 2

JSWolf · 08-14-2012, 05:07 PM

I don't think you can have a <p> inside a <div> as they are both paragraph level elements.

SBT · 08-14-2012, 05:43 PM

Quote:

Originally Posted by Jellby

You can't have a <div> inside a <p>, but nothing prevents you from turning the outer <p> into a <div>, or the inner <div> into a <span> with display:block.

Thanks for pointing that out, Jellby; the footnote CSS then becomes pretty similar to what I started with. The W3C validator still accepts it:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
span.footnote {
display:inline;
border-style:solid;
border-width:1px;
background:yellow;
width: 0.6em;
height:0.6em;
overflow:hidden;
position:fixed;
}

span.footnote:active {width:auto;height:auto;}
span.footnote span{
display:block;
font-size:0.5em;
margin:0 0.2em;
}
span.footnote span+span{ font-size:0.9em;}
</style>
</head>
<body>
<p class="footnote">Sic transit gloria mundi.Click on this footnote.<span class="footnote">
     <span>1</span>
     <span>Isn't it fun reading through all the footnotes?</span>
</span>&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>
<p>Credo Elvem ipsum etiam vivere.</p>
</body>
</html>

(Span, span, lovely span ...)

JSWolf · 08-14-2012, 10:30 PM

Quote:

Originally Posted by SBT

Thanks for pointing that out, Jellby; the footnote CSS then becomes pretty similar to what I started with. The W3C validator still accepts it:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
span.footnote {
display:inline;
border-style:solid;
border-width:1px;
background:yellow;
width: 0.6em;
height:0.6em;
overflow:hidden;
position:fixed;
}

span.footnote:active {width:auto;height:auto;}
span.footnote span{
display:block;
font-size:0.5em;
margin:0 0.2em;
}
span.footnote span+span{ font-size:0.9em;}
</style>
</head>
<body>
<p class="footnote">Sic transit gloria mundi.Click on this footnote.<span class="footnote">
     <span>1</span>
     <span>Isn't it fun reading through all the footnotes?</span>
</span>&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>
<p>Credo Elvem ipsum etiam vivere.</p>
</body>
</html>

(Span, span, lovely span ...)

Time to see the code still needs fixing...

Code:

<p class="footnote">Sic transit gloria mundi.Click on this footnote.<span class="footnote">
     <span>1</span>
     <span>Isn't it fun reading through all the footnotes?</span>
</span>&nbsp;&nbsp;
Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>

should be...

Code:

<p class="footnote">Sic transit gloria mundi.Click on this footnote.<span class="footnote">1Isn't it fun reading through all the footnotes? Pretaerae censeo Cartago esse delendam. Navigare necesse est, vivere non est necesse.</p>

You don't need and you don't want spans that do nothing as all they do is make the size of the XML larger and that could be an issue if it's too large. Also, those non-breaking spaces can go too. They don't actually do anything in this case.

SBT · 08-15-2012, 02:51 AM

JSWolf's edits are incorrect.

The empty spans are actually <p>-surrogates (see the stylesheet), and the non-breaking spaces prevent the footnote marker from running into the next word.

Please try code in a browser or similar before asserting and correcting apparent errors.

Jellby · 08-15-2012, 05:48 AM

Quote:

Originally Posted by JSWolf

I don't think you can have a <p> inside a <div> as they are both paragraph level elements.

Yes, you can. A <div> can contain block or inline elements. The restriction preventing block-level content applies only to <p>. I think I pasted the relevant part of the spec not long ago... here it is.

Quote:

Originally Posted by JSWolf

You don't need and you don't want spans that do nothing

But they do something. They are matched by the "span.footnote span" and "span.footnote span+span" selectors.

DiapDealer · 08-15-2012, 05:52 AM

Quote:

JSWolf's edits are incorrect.

JS has zero tolerance for code he didn't write. I think it might actually cause him physical pain to see code that doesn't conform to his personal conventions.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Footnotes and Endnotes	Ken Irving	Writer2ePub	2	01-02-2011 10:05 AM
Footnotes/Endnotes	crutledge	Sigil	17	07-17-2010 12:56 PM
'Unexpected Error' using endnotes, footnotes, etc	Gideon	Amazon Kindle	0	11-10-2009 12:59 AM
How do endnotes/footnotes work?	JSWolf	ePub	4	04-22-2009 06:54 PM
Do footnotes/endnotes work in FB2?	rfog	HanLin eBook	3	12-05-2008 11:22 PM

08-14-2012, 05:07 PM	#16
JSWolf Resident Curmudgeon Posts: 76,395 Karma: 136466962 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	I don't think you can have a <p> inside a <div> as they are both paragraph level elements.

08-15-2012, 02:51 AM	#19
SBT Fanatic Posts: 580 Karma: 810184 Join Date: Sep 2010 Location: Norway Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad	JSWolf's edits are incorrect. The empty spans are actually <p>-surrogates (see the stylesheet), and the non-breaking spaces prevent the footnote marker from running into the next word. Please try code in a browser or similar before asserting and correcting apparent errors.

Advert

Advert