The id value is the unique destination the fragment identifier beginning #whatever can occur several times upon the page:
For example:
<a href=“#item1”>Hello, Sailor</a>
<a href=“#item1”>Hello, Aviator</a>
<p id=“item1”>Some pointless Frobozz Electric footnote</p>
It still goes to the same place, i.e. id [FONT=Courier New]item1
[/FONT]I made a mistake on the post above #3; obviously it was supposed to read id=“item1” my fingers are stiff with the cold weather.
No
the target reference is given an anchor which has an id
<a id=“item1”>[1]</a>Suzy Q. “The CSS Revolution” CSS Today. May 15, 2010.
This is the target anchor <a id=“item1”>[1]</a> that your links will point to.
Just for clarity; destination anchors in HTML documents may be specified either by the A element or by any other element (naming with the id attribute).
Anyone else?
Is that true?
If so, I suppose it is a way to make your HTML “tighter”.
TomTees
Yes, it’s true. If you use the #id designation, it can be placed against any element containing that id. It works both in an inpage link or in a link to another page.
I’m not sure what’s in the specs for it, but logically it makes sense - I think people just used the old <a id=“x”> format purely out of force of habit or because no one ever told them differently.
Anyone else?
Is that true?
Is what true? Anchors with fragments in their hrefs go to the element whose id (or, earlier, name) == that fragement.
<a href=“#item1”>this link, when clicked, will take the user to whoever has the id of “item1”</a>
<someElement id=“item1”>In most browsers, clicking on the anchor will bring focus down here, IF the page is long enough to scroll.</someElement>
You won’t see any movement or scrolling if the destination isn’t far enough down; if it’s at the bottom of the page then the scrolling will only be enough to bring the destination onscreen.
Also there are browsers like Safari who will gladly move the visual focus to the destination, but not the keyboard focus (which makes sense, since in my example above, someElement is not a clickable element. It cannot receive keyboard focus anyway). So the keyboarding user who skips down to the footnote, if the footnote is not an anchor or something focusable, their next hit of the “TAB” key will go from wherever the last place their focus was… if their focus was near the top of the page, the next focus goes from there.
Since other browsers will start the next focus from where the visual focus is, I always use anchors for destinations. However most people don’t. Just an id is easier and less code.
It isn’t a problem having two or more hyperlinks pint to the same End-Note?
Nope. Just as it’s not a problem to have two hyperlinks to the same other page.
<a href=“http://wikipedia.org”>one link</a>
some text…
<a href=“http://wikipedia.org”>another link to the same place</a>
This is fine and legal. It’s also fine and legal if the href’s are to url fragments.
Here is my best first attempt at things…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Paper with End-Notes</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body, h1, h2{
margin: 0;
padding: 0;
}
#wrapper{
width: 400px;
margin: 0 auto;
border: 1px solid #FFFFFF;
}
body{font: small/1.3em Verdana, Helvetica, Arial, sans-serif;}
h1{
margin: 1.3em 0 0.7em 0;
font-size: 1.3em;
}
ol{
line-height: 1.5em;
list-style-image: none;
list-style-type: none;
}
hr{margin: 20px 0 0 0;}
.reference{color: red;}
</style>
</head>
<body>
<div id="wrapper">
<h1>George Washington</h1>
<p>
On April 30, 1789, George Washington, standing on the balcony of Federal
Hall on Wall Street in New York, took his oath of office as the first
President of the United States. "As the first of every thing, in our
situation will serve to establish a Precedent," he wrote James Madison,
"it is devoutly wished on my part, that these precedents may be fixed
on true principles."
<sup id="cite_02">
<a href="#note_02" class="reference" title="See End-Note below...">[2]</a>
</sup>
</p>
<p>
Born in 1732 into a Virginia planter family, he learned the morals,
manners, and body of knowledge requisite for an 18th century Virginia
gentleman.
</p>
<p>
He pursued two intertwined interests: military arts and western
expansion. At 16 he helped survey Shenandoah lands for Thomas,
Lord Fairfax. Commissioned a lieutenant colonel in 1754, he fought
the first skirmishes of what grew into the French and Indian War. The
next year, as an aide to Gen. Edward Braddock, he escaped injury
although four bullets ripped his coat and two horses were shot from
under him.
<sup id="cite_01">
<a href="#note_01" class="reference" title="See End-Note below...">[1]</a>
</sup>
</p>
<p>
From 1759 to the outbreak of the American Revolution, Washington
managed his lands around Mount Vernon and served in the Virginia House
of Burgesses. Married to a widow, Martha Dandridge Custis, he devoted
himself to a busy and happy life. But like his fellow planters,
Washington felt himself exploited by British merchants and hampered by
British regulations. As the quarrel with the mother country grew acute,
he moderately but firmly voiced his resistance to the restrictions.
</p>
<p>
When the Second Continental Congress assembled in Philadelphia in
May 1775, Washington, one of the Virginia delegates, was elected
Commander in Chief of the Continental Army. On July 3, 1775, at
Cambridge, Massachusetts, he took command of his ill-trained troops
and embarked upon a war that was to last six grueling years.
</p>
<p>
He realized early that the best strategy was to harass the British. He
reported to Congress, "we should on all Occasions avoid a general
Action, or put anything to the Risque, unless compelled by a necessity,
into which we ought never to be drawn."
<sup id="cite_05">
<a href="#note_05" class="reference" title="See End-Note below...">[5] </a>
</sup>
Ensuing battles saw him fall back slowly, then strike unexpectedly.
Finally in 1781 with the aid of French allies--he forced the surrender
of Cornwallis at Yorktown.
<sup id="cite_03">
<a href="#note_03" class="reference" title="See End-Note below...">[3] </a>
</sup>
</p>
<p>
Washington longed to retire to his fields at Mount Vernon. But he soon
realized that the Nation under its Articles of Confederation was not
functioning well, so he became a prime mover in the steps leading to
the Constitutional Convention at Philadelphia in 1787. When the new
Constitution was ratified, the Electoral College unanimously elected
Washington President.
<sup id="cite_04">
<a href="#note_04" class="reference" title="See End-Note below...">[4]</a>
</sup>
</p>
<p>
He did not infringe upon the policy making powers that he felt the
Constitution gave Congress. But the determination of foreign policy
became preponderantly a Presidential concern.
<sup id="cite_06">
<a href="#note_06" class="reference" title="See End-Note below...">[6] </a>
</sup>
When the French Revolution led to a major war between France and
England, Washington refused to accept entirely the recommendations
of either his Secretary of State Thomas Jefferson, who was pro-French,
or his Secretary of the Treasury Alexander Hamilton, who was
pro-British. Rather, he insisted upon a neutral course until the
United States could grow stronger.
</p>
<p>
To his disappointment, two parties were developing by the end of his
first term. Wearied of politics, feeling old, he retired at the end of
his second. In his Farewell Address, he urged his countrymen to
forswear excessive party spirit and geographical distinctions. In
foreign affairs, he warned against long-term alliances.
</p>
<p>
Washington enjoyed less than three years of retirement at Mount Vernon,
for he died of a throat infection December 14, 1799. For months the
Nation mourned him.
</p>
<hr>
<b>ENDNOTES:</b>
<ol>
<li id="note_01">
<b><a href="#cite_01" class="reference" title="Return to Citation above...">[1]</a></b>
Richard Brookhiser. "Founding Father: Rediscovering George Washington" pg 103.
</li>
<li id="note_02">
<b><a href="#cite_02" class="reference" title="Return to Citation above...">[2]</a></b>
Daniel C. Gedacht.
<a href="http://books.google.com/books?id=-9TNKUwsPYIC&pg=PT73">
"George Washington: Leader of a New Nation"</a>
The Rosen Publishing Group. (1999). Retrieved August 26, 2010.
</li>
<li id="note_03">
<b><a href="#cite_03" class="reference" title="Return to Citation above...">[3]</a></b>
Andrew Cayton. "Learning to Be Washington," New York Times Sept. 30, 2010
</li>
<li id="note_04">
<b><a href="#cite_04" class="reference" title="Return to Citation above...">[4]</a></b>
Marcus Cunliffe, George Washington: Man and Monument (1958) pg 24-26
</li>
<li id="note_05">
<b><a href="#cite_05" class="reference" title="Return to Citation above...">[5]</a></b>
John Randall. "George Washington: A Life" (1998) pg 8,11
</li>
<li id="note_06">
<b><a href="#cite_06" class="reference" title="Return to Citation above...">[6]</a></b>
Mary Ellis. "His Excellency: George Washington" (2004) pg 8
</li>
</ol>
</div>
</body>
</html>
I’m pretty happy with the look and feel.
What do you think?
TomTees
Just be sure your footnotes are in order (you’ve got 2, 1, 5, 4 3, 6)
You mean the Citations?
If so, I agree they would normally start off [1], [2],… but if one End-Note is used in multiple places then the Citations won’t be sequential. (One End-Note can have many Citations - kind of like “keys” in a database.)
TomTees
That looks good for a first attempt 
A couple of things I would change are as follows:
<b>ENDNOTES:</b>
<ol>
The b element should be a heading element of a suitable level because a) it is a heading and b) it needs to be a block level element in that position to be semantically correct. You should avoid running inline elements into block elements (even though it is valid) as it makes the browsers construct an anonymous block box and as I said is not semantically correct either (although lots of people do this).
In the following you have a b element around the anchor and as the b element is presentational only then you could remove it and apply bold to the anchors class instead (.reference).
[B]<b>[/B]<a href="#cite_01" class="reference" title="Return to Citation above...">[1]</a>[B]</b>[/B]
If you wanted the element to be stronger (semantically) then use strong instead of b. However, it seems that you just want a visual effect so I would style the anchor directly.
Lastly, I would apply some styles to the sup element to get it more consistent and to reduce the gap that appears between lines which looks messy.
Something roughly like this.
sup {
vertical-align: super;
font-size: smaller;
line-height:1;
}
Thanks Paul. (I always strive to make you proud of me!) 
Here is my updated code. (I tried to incorporate all of your suggestions.)
Please let me know what you think…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Paper with End-Notes</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body, h1, h2{
margin: 0;
padding: 0;
}
body{font: small/1.3em Verdana, Helvetica, Arial, sans-serif;}
#wrapper{
width: 400px;
margin: 0 auto;
border: 1px solid #FFFFFF;
}
h1{
margin: 1.3em 0 0.7em 0;
font-size: 1.3em;
}
sup {
vertical-align: super;
font-size: smaller;
line-height: 0.9;
}
.reference{color: red;}
hr{margin: 20px 0 0 0;}
#endnotes{margin: 0 0 0 20px;}
#endnotes h2{
margin: 0.5em 0 -0.7em 0;
font-size: 1em;
}
#endnotes ul{
line-height: 1.3em;
list-style-type: none;
font-size: 0.8em;
}
#endnotes ul>li{margin: 0.5em 0 0 -3.8em;}
#endnotes li a{font-weight: 300;}
</style>
</head>
<body>
<div id="wrapper">
<h1>George Washington</h1>
<p>
On April 30, 1789, George Washington, standing on the balcony of Federal
Hall on Wall Street in New York, took his oath of office as the first
President of the United States. "As the first of every thing, in our
situation will serve to establish a Precedent," he wrote James Madison,
"it is devoutly wished on my part, that these precedents may be fixed
on true principles."
<sup id="cite_01">
<a href="#note_01" class="reference" title="See End-Note below...">[1]</a>
</sup>
</p>
<p>
Born in 1732 into a Virginia planter family, he learned the morals,
manners, and body of knowledge requisite for an 18th century Virginia
gentleman.
<sup id="cite_02">
<a href="#note_02" class="reference" title="See End-Note below...">[2]</a>
</sup>
</p>
<p>
He pursued two intertwined interests: military arts and western
expansion. At 16 he helped survey Shenandoah lands for Thomas,
Lord Fairfax. Commissioned a lieutenant colonel in 1754, he fought
the first skirmishes of what grew into the French and Indian War. The
next year, as an aide to Gen. Edward Braddock, he escaped injury
although four bullets ripped his coat and two horses were shot from
under him.
<sup id="cite_03">
<a href="#note_03" class="reference" title="See End-Note below...">[3]</a>
</sup>
</p>
<p>
From 1759 to the outbreak of the American Revolution, Washington
managed his lands around Mount Vernon and served in the Virginia House
of Burgesses.
<sup id="cite_01">
<a href="#note_01" class="reference" title="See End-Note below...">[1]</a>
</sup>
Married to a widow, Martha Dandridge Custis, he devoted
himself to a busy and happy life. But like his fellow planters,
Washington felt himself exploited by British merchants and hampered by
British regulations. As the quarrel with the mother country grew acute,
he moderately but firmly voiced his resistance to the restrictions.
</p>
<p>
When the Second Continental Congress assembled in Philadelphia in
May 1775, Washington, one of the Virginia delegates, was elected
Commander in Chief of the Continental Army. On July 3, 1775, at
Cambridge, Massachusetts, he took command of his ill-trained troops
and embarked upon a war that was to last six grueling years.
</p>
<p>
He realized early that the best strategy was to harass the British. He
reported to Congress, "we should on all Occasions avoid a general
Action, or put anything to the Risque, unless compelled by a necessity,
into which we ought never to be drawn."
<sup id="cite_04">
<a href="#note_04" class="reference" title="See End-Note below...">[4]</a>
</sup>
Ensuing battles saw him fall back slowly, then strike unexpectedly.
Finally in 1781 with the aid of French allies--he forced the surrender
of Cornwallis at Yorktown.
<sup id="cite_05">
<a href="#note_05" class="reference" title="See End-Note below...">[5]</a>
</sup>
</p>
<p>
Washington longed to retire to his fields at Mount Vernon. But he soon
realized that the Nation under its Articles of Confederation was not
functioning well, so he became a prime mover in the steps leading to
the Constitutional Convention at Philadelphia in 1787. When the new
Constitution was ratified, the Electoral College unanimously elected
Washington President.
<sup id="cite_02">
<a href="#note_02" class="reference" title="See End-Note below...">[2]</a>
</sup>
</p>
<p>
He did not infringe upon the policy making powers that he felt the
Constitution gave Congress. But the determination of foreign policy
became preponderantly a Presidential concern.
<sup id="cite_06">
<a href="#note_06" class="reference" title="See End-Note below...">[6]</a>
</sup>
When the French Revolution led to a major war between France and
England, Washington refused to accept entirely the recommendations
of either his Secretary of State Thomas Jefferson, who was pro-French,
or his Secretary of the Treasury Alexander Hamilton, who was
pro-British. Rather, he insisted upon a neutral course until the
United States could grow stronger.
</p>
<p>
To his disappointment, two parties were developing by the end of his
first term. Wearied of politics, feeling old, he retired at the end of
his second. In his Farewell Address, he urged his countrymen to
forswear excessive party spirit and geographical distinctions. In
foreign affairs, he warned against long-term alliances.
</p>
<p>
Washington enjoyed less than three years of retirement at Mount Vernon,
for he died of a throat infection December 14, 1799. For months the
Nation mourned him.
</p>
<hr>
<div id="endnotes">
<h2>ENDNOTES:</h2>
<ul>
<li id="note_01">
<a href="#cite_01" class="reference" title="Return to Citation above...">[1]</a>
Richard Brookhiser. "Founding Father: Rediscovering George Washington" pg 103.
</li>
<li id="note_02">
<a href="#cite_02" class="reference" title="Return to Citation above...">[2]</a>
Daniel C. Gedacht.
<a href="http://books.google.com/books?id=-9TNKUwsPYIC&pg=PT73">
"George Washington: Leader of a New Nation"</a>
The Rosen Publishing Group. (1999). Retrieved August 26, 2010.
</li>
<li id="note_03">
<a href="#cite_03" class="reference" title="Return to Citation above...">[3]</a>
Andrew Cayton. "Learning to Be Washington," New York Times Sept. 30, 2010
</li>
<li id="note_04">
<a href="#cite_04" class="reference" title="Return to Citation above...">[4]</a>
Marcus Cunliffe, George Washington: Man and Monument (1958) pg 24-26
</li>
<li id="note_05">
<a href="#cite_05" class="reference" title="Return to Citation above...">[5]</a>
John Randall. "George Washington: A Life" (1998) pg 8,11
</li>
<li id="note_06">
<a href="#cite_06" class="reference" title="Return to Citation above...">[6]</a>
Mary Ellis. "His Excellency: George Washington" (2004) pg 8
</li>
</ul>
</div>
</div>
</body>
</html>
I also took DaveMaxwell’s advice about the order of my Citations in the body text!
TomTees
Yes that looks better.
There are two errors where you have the ampersand in the url. Add amp; to the ampersand.
I don’t know if this is suitable but for modern browsers you could highlight the destination using :target.
e.g.
#wrapper :target{background:#ffc}
Footnotes seem to be one of the few defensible uses of pop-ups, or perhaps text boxes triggered on hover. The footnote is a print convention that shoves the info at the bottom of the page because book editors don’t have many options to deal with such things (the idea of a 3D pop-up footnote like a kid’s book tickles me; that would add an element of whimsy to some of those dense, footnote-laden texts I have left over from college). To my mind, footnotes are a print-based convention that we can solve with a different, and better, approach But that’s my opinion, your mileage may vary.
I just noticed that you didn’t allow for the default padding and margin on the ul hence the differences in browsers.
e.g.
#endnotes ul {
line-height: 1.3em;
list-style-type: none;
font-size: 0.8em;
[B] margin:.5em 0 0;
padding:0;
[/B]}
#endnotes[B] ul li[/B] {
[B] margin: 0.5em 0 0;
[/B]}
To my mind, footnotes are a print-based convention that we can solve with a different, and better, approach But that’s my opinion, your mileage may vary.
Yes, I don’t like the fact that you lose your place in text when you read the footnote which is why I suggested using :target to highlight where you are going and how to get back.
Perhaps a fixed footer would be a better approach as you wouldn’t lose your place in the text so easily.
e.g.
Roughly like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Paper with End-Notes</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body, h1, h2 {
margin: 0;
padding: 0;
}
body {
font: small/1.3em Verdana, Helvetica, Arial, sans-serif;
}
#wrapper {
width: 400px;
margin: 0 auto;
border: 1px solid #FFFFFF;
padding:0 0 120px;
}
h1 {
margin: 1.3em 0 0.7em 0;
font-size: 1.3em;
}
sup {
vertical-align: super;
font-size: smaller;
line-height: 0.9;
}
.reference {
color: red;
}
hr {
margin: 20px 0 0 0;
}
#endnotes {
margin: 0 auto;
width:360px;
padding:0 20px;
background:#f2f2f2;
}
#footnotes h2 {
margin: 0 auto;
padding:.5em 10px;
font-size: 1em;
width:380px;
border-top:5px solid #000;
position:relative;
background:#f2f2f2;
}
#endnotes ul {
line-height: 1.3em;
list-style-type: none;
font-size: 0.8em;
margin:0;
padding:0;
}
#endnotes ul li {
margin:0 0 .5em;
}
#endnotes li a {
font-weight: 300;
}
#footnotes{
position:fixed;
left:0;
bottom:0;
width:100%;
height:6em;
background:#fff;
padding:1em 0 1.5em;
}
#endnotes {
height:6em;
overflow:hidden;/* or overflow:scroll*/
}
#endnotes li{min-height:100px;}
* html #footnotes,
* html #endnotes{overflow:auto;height:auto}
</style>
</head>
<body>
<div id="wrapper">
<h1>George Washington</h1>
<p> On April 30, 1789, George Washington, standing on the balcony of Federal
Hall on Wall Street in New York, took his oath of office as the first
President of the United States. "As the first of every thing, in our
situation will serve to establish a Precedent," he wrote James Madison,
"it is devoutly wished on my part, that these precedents may be fixed
on true principles." <sup id="cite_01"> <a href="#note_01" class="reference" title="See End-Note below...">[1]</a> </sup> </p>
<p> Born in 1732 into a Virginia planter family, he learned the morals,
manners, and body of knowledge requisite for an 18th century Virginia
gentleman. <sup id="cite_02"> <a href="#note_02" class="reference" title="See End-Note below...">[2]</a> </sup> </p>
<p> He pursued two intertwined interests: military arts and western
expansion. At 16 he helped survey Shenandoah lands for Thomas,
Lord Fairfax. Commissioned a lieutenant colonel in 1754, he fought
the first skirmishes of what grew into the French and Indian War. The
next year, as an aide to Gen. Edward Braddock, he escaped injury
although four bullets ripped his coat and two horses were shot from
under him. <sup id="cite_03"> <a href="#note_03" class="reference" title="See End-Note below...">[3]</a> </sup> </p>
<p> From 1759 to the outbreak of the American Revolution, Washington
managed his lands around Mount Vernon and served in the Virginia House
of Burgesses. <sup id="cite_01"> <a href="#note_01" class="reference" title="See End-Note below...">[1]</a> </sup> Married to a widow, Martha Dandridge Custis, he devoted
himself to a busy and happy life. But like his fellow planters,
Washington felt himself exploited by British merchants and hampered by
British regulations. As the quarrel with the mother country grew acute,
he moderately but firmly voiced his resistance to the restrictions. </p>
<p> When the Second Continental Congress assembled in Philadelphia in
May 1775, Washington, one of the Virginia delegates, was elected
Commander in Chief of the Continental Army. On July 3, 1775, at
Cambridge, Massachusetts, he took command of his ill-trained troops
and embarked upon a war that was to last six grueling years. </p>
<p> He realized early that the best strategy was to harass the British. He
reported to Congress, "we should on all Occasions avoid a general
Action, or put anything to the Risque, unless compelled by a necessity,
into which we ought never to be drawn." <sup id="cite_04"> <a href="#note_04" class="reference" title="See End-Note below...">[4]</a> </sup> Ensuing battles saw him fall back slowly, then strike unexpectedly.
Finally in 1781 with the aid of French allies--he forced the surrender
of Cornwallis at Yorktown. <sup id="cite_05"> <a href="#note_05" class="reference" title="See End-Note below...">[5]</a> </sup> </p>
<p> Washington longed to retire to his fields at Mount Vernon. But he soon
realized that the Nation under its Articles of Confederation was not
functioning well, so he became a prime mover in the steps leading to
the Constitutional Convention at Philadelphia in 1787. When the new
Constitution was ratified, the Electoral College unanimously elected
Washington President. <sup id="cite_02"> <a href="#note_02" class="reference" title="See End-Note below...">[2]</a> </sup> </p>
<p> He did not infringe upon the policy making powers that he felt the
Constitution gave Congress. But the determination of foreign policy
became preponderantly a Presidential concern. <sup id="cite_06"> <a href="#note_06" class="reference" title="See End-Note below...">[6]</a> </sup> When the French Revolution led to a major war between France and
England, Washington refused to accept entirely the recommendations
of either his Secretary of State Thomas Jefferson, who was pro-French,
or his Secretary of the Treasury Alexander Hamilton, who was
pro-British. Rather, he insisted upon a neutral course until the
United States could grow stronger. </p>
<p> To his disappointment, two parties were developing by the end of his
first term. Wearied of politics, feeling old, he retired at the end of
his second. In his Farewell Address, he urged his countrymen to
forswear excessive party spirit and geographical distinctions. In
foreign affairs, he warned against long-term alliances. </p>
<p> Washington enjoyed less than three years of retirement at Mount Vernon,
for he died of a throat infection December 14, 1799. For months the
Nation mourned him. </p>
<hr>
</div>
<div id="footnotes">
<h2>ENDNOTES:</h2>
<div id="endnotes">
<ul>
<li id="note_01"> <a href="#cite_01" class="reference" title="Return to Citation above...">[1]</a> Richard Brookhiser. "Founding Father: Rediscovering George Washington" pg 103. </li>
<li id="note_02"> <a href="#cite_02" class="reference" title="Return to Citation above...">[2]</a> Daniel C. Gedacht. <a href="http://books.google.com/books?id=-9TNKUwsPYIC&pg=PT73"> "George Washington: Leader of a New Nation"</a> The Rosen Publishing Group. (1999). Retrieved August 26, 2010. </li>
<li id="note_03"> <a href="#cite_03" class="reference" title="Return to Citation above...">[3]</a> Andrew Cayton. "Learning to Be Washington," New York Times Sept. 30, 2010 </li>
<li id="note_04"> <a href="#cite_04" class="reference" title="Return to Citation above...">[4]</a> Marcus Cunliffe, George Washington: Man and Monument (1958) pg 24-26 </li>
<li id="note_05"> <a href="#cite_05" class="reference" title="Return to Citation above...">[5]</a> John Randall. "George Washington: A Life" (1998) pg 8,11 </li>
<li id="note_06"> <a href="#cite_06" class="reference" title="Return to Citation above...">[6]</a> Mary Ellis. "His Excellency: George Washington" (2004) pg 8 </li>
</ul>
</div>
</div>
</body>
</html>
Just an idea
Paul,
Hey! It’s not polite to steal the thunder in someone else’s thread!! 
(That is a VERY COOL solution you posted below!!! You never cease to amaze me!!)
You lost me there…
Yes, I don’t like the fact that you lose your place in text when you read the footnote which is why I suggested using :target to highlight where you are going and how to get back.
Perhaps a fixed footer would be a better approach as you wouldn’t lose your place in the text so easily.
Well, I’m not sure how practical it would be in my entire website, however it looks really impressive in the example we have been working on!
Can you please help me figure out your code?
You made A LOT of changes, and most of them I didn’t follow why.
Specifically…
1.) Why the need for two styles: Endnotes and Footnotes?
2.) What is up with the position: relative; and position: fixed;?
3.) Can you explain how your :target thing works?
Just an idea
Yet another impressive one! :tup: (Now if I can just understand it?!) 
TomTees
Tom, I’m standing by to take notes on Paul’s explanation. I want to know, too.
You lost me there…
He’s removing the side margins and adding some top margin on the ul and the li’s, and removing the padding on the ul.
Some browsers start out with left padding on ul’s and ol’s (to make room for (possible) bullets). Other browsers use a left margin. If you want lists to look the same cross-browser, you need to set your margins and padding on them by hand in your CSS, to override the whatever-defaults they have (it wouldn’t be so bad, except the defaults differ so much between browsers… why most defaults you can leave alone. Just not here).
Hitting the back button will bring you back to the link you clicked (dunno if that’s cross-browser though) and someone above, in one of the early responses, already solved that issue by having the footnote itself being a link back (though this would not work for multiple references to the same footnote in the text, unless you just always went back to the top of the page).
Footnotes is just a footer element.
Endnotes, I don’t know why that’s a div around a ul, instead of just the id on the ul directly… unless there’s a possibility of multiple ul’s in there?
2.) What is up with the position: relative; and position: fixed;?
I’m missing the position: relative… where is it?
The footer is position: fixed. This is called a fixed footer. It remains at the bottom of the screen at all times, since it’s attached not to the page, but to the viewport.
Fixed footers have the disadvantage of not being able to scroll from side-to-side, so if the user’s screen is less than the width of the footer content, everything to the right is lost. Maybe this has something to do with why Paul has a div around the ul?
3.) Can you explain how your :target thing works?
:target is a pseudo class (which doesn’t work in IE, lawlz) that styles whoever is the destination of an in-page link.
<a class=“stylin” href=“#tehFo0teR”>To tha f00ter!</a>
later on the page…
<div id=“tehFo0teR”>
<p>Yaar, we be at teh fo0teR, mateys. Yaar.</p>
</div>
If you style that like so:
.stylin:target {
color: #fff;
background-color: #f00;
border: 1px solid #090;
}
Then when the user clicks the link called “stylin”, their browser does the usual jumping down to tehFo0teR, but also tehFo0teR is now festive for teh holidayz. Yay.
The target is now diamonds!
They don’t call me Robert Wellock for nothing; I am usually fairly accurate with markup and semantics. 
Although obviously I was never actually showing an example of a Footnote, or how I would markup one. That may have confused one or two people, I was merely showing an extremely crude example of a fragment identifier at work.
I see a few problems with example; you don’t see the later endnotes on a smaller screen when tabbing and it is not obviously the main column is scrollable but other than that it is clever.
Then you won’t (easily) be able to provide a link back to the point where the reader was before clicking on the footnote link. Using a class would only help for general styling of all hyperlinks, the reason for using an ID was to allow the reader to jump back up the page to continue from where they left off.
If you put the contents of the note in the title attribute on the link, rather than just “See end-note below”, that will make it a whole lot more helpful and user-friendly, and for some people will obviate the need for them to find their way back - because they can read the footnote in the tooltip, they never need to move away from that place in the main text.
Hi Tom,
I think the others have already answered these question but I’ll add my 1p.
In your example you had used negative margins on the ul to pull it into position because you didn’t realise that it already had a default left padding. However some browsers use left padding and some use left margin and therefore the position was different in various browsers.
Therefore reset margins and padding to zero and then just apply what you need and all browsers will be the same.
e.g. ul.test{margin:0;padding:0 5px}
Well, I’m not sure how practical it would be in my entire website, however it looks really impressive in the example we have been working on!
Yes it was just throwing ideas up. It seemed to work well and you could set the footer to overflow:scroll instead of hidden and avoid the problem that Robert noticed although it won’t look quite so pretty.
You could move the notes to the top if you wanted or even the side.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Paper with End-Notes</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body, h1, h2 {
margin: 0;
padding: 0;
}
html,body{min-width:832px}
body {
font: small/1.3em Verdana, Helvetica, Arial, sans-serif;
}
#wrapper {
width: 400px;
margin: 0 auto;
border: 1px solid #FFFFFF;
padding:0 0 10px;
}
h1 {
margin: 1.3em 0 0.7em 0;
font-size: 1.3em;
}
sup {
vertical-align: super;
font-size: smaller;
line-height: 0.9;
}
.reference {
color: red;
}
hr {
margin: 20px 0 0 0;
}
#endnotes {
margin: 0 auto;
padding:0 20px;
}
#footnotes h2 {
margin: 0 auto 10px;
padding:.5em 10px;
font-size: 1em;
border-top:5px solid #000;
border-bottom:5px solid #000;
background:#f2f2f2;
}
#endnotes ul {
line-height: 1.3em;
list-style-type: none;
font-size: 0.8em;
margin:0;
padding:0;
}
#endnotes ul li {
margin:0 0 .5em;
}
#endnotes li a {
font-weight: 300;
}
#footnotes {
position:fixed;
left:0;
top:50%;
bottom:0;
margin-top:-5em;
width:200px;
height:10em;
background:#fffccc;
padding:1em 0 1.5em;
}
#endnotes {
height:6em;
overflow:scroll;/* or overflow:hidden*/
overflow-x:hidden;
}
#endnotes li {
min-height:100px;
}
* html #footnotes, * html #endnotes {
overflow:auto;
height:auto;
width:400px;
margin:auto;
padding:0;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>George Washington</h1>
<p> On April 30, 1789, George Washington, standing on the balcony of Federal
Hall on Wall Street in New York, took his oath of office as the first
President of the United States. "As the first of every thing, in our
situation will serve to establish a Precedent," he wrote James Madison,
"it is devoutly wished on my part, that these precedents may be fixed
on true principles." <sup id="cite_01"> <a href="#note_01" class="reference" title="See End-Note below...">[1]</a> </sup> </p>
<p> Born in 1732 into a Virginia planter family, he learned the morals,
manners, and body of knowledge requisite for an 18th century Virginia
gentleman. <sup id="cite_02"> <a href="#note_02" class="reference" title="See End-Note below...">[2]</a> </sup> </p>
<p> He pursued two intertwined interests: military arts and western
expansion. At 16 he helped survey Shenandoah lands for Thomas,
Lord Fairfax. Commissioned a lieutenant colonel in 1754, he fought
the first skirmishes of what grew into the French and Indian War. The
next year, as an aide to Gen. Edward Braddock, he escaped injury
although four bullets ripped his coat and two horses were shot from
under him. <sup id="cite_03"> <a href="#note_03" class="reference" title="See End-Note below...">[3]</a> </sup> </p>
<p> From 1759 to the outbreak of the American Revolution, Washington
managed his lands around Mount Vernon and served in the Virginia House
of Burgesses. <sup id="cite_01"> <a href="#note_01" class="reference" title="See End-Note below...">[1]</a> </sup> Married to a widow, Martha Dandridge Custis, he devoted
himself to a busy and happy life. But like his fellow planters,
Washington felt himself exploited by British merchants and hampered by
British regulations. As the quarrel with the mother country grew acute,
he moderately but firmly voiced his resistance to the restrictions. </p>
<p> When the Second Continental Congress assembled in Philadelphia in
May 1775, Washington, one of the Virginia delegates, was elected
Commander in Chief of the Continental Army. On July 3, 1775, at
Cambridge, Massachusetts, he took command of his ill-trained troops
and embarked upon a war that was to last six grueling years. </p>
<p> He realized early that the best strategy was to harass the British. He
reported to Congress, "we should on all Occasions avoid a general
Action, or put anything to the Risque, unless compelled by a necessity,
into which we ought never to be drawn." <sup id="cite_04"> <a href="#note_04" class="reference" title="See End-Note below...">[4]</a> </sup> Ensuing battles saw him fall back slowly, then strike unexpectedly.
Finally in 1781 with the aid of French allies--he forced the surrender
of Cornwallis at Yorktown. <sup id="cite_05"> <a href="#note_05" class="reference" title="See End-Note below...">[5]</a> </sup> </p>
<p> Washington longed to retire to his fields at Mount Vernon. But he soon
realized that the Nation under its Articles of Confederation was not
functioning well, so he became a prime mover in the steps leading to
the Constitutional Convention at Philadelphia in 1787. When the new
Constitution was ratified, the Electoral College unanimously elected
Washington President. <sup id="cite_02"> <a href="#note_02" class="reference" title="See End-Note below...">[2]</a> </sup> </p>
<p> He did not infringe upon the policy making powers that he felt the
Constitution gave Congress. But the determination of foreign policy
became preponderantly a Presidential concern. <sup id="cite_06"> <a href="#note_06" class="reference" title="See End-Note below...">[6]</a> </sup> When the French Revolution led to a major war between France and
England, Washington refused to accept entirely the recommendations
of either his Secretary of State Thomas Jefferson, who was pro-French,
or his Secretary of the Treasury Alexander Hamilton, who was
pro-British. Rather, he insisted upon a neutral course until the
United States could grow stronger. </p>
<p> To his disappointment, two parties were developing by the end of his
first term. Wearied of politics, feeling old, he retired at the end of
his second. In his Farewell Address, he urged his countrymen to
forswear excessive party spirit and geographical distinctions. In
foreign affairs, he warned against long-term alliances. </p>
<p> Washington enjoyed less than three years of retirement at Mount Vernon,
for he died of a throat infection December 14, 1799. For months the
Nation mourned him. </p>
<hr>
</div>
<div id="footnotes">
<h2>Sidenotes:</h2>
<div id="endnotes">
<ul>
<li id="note_01"> <a href="#cite_01" class="reference" title="Return to Citation above...">[1]</a> Richard Brookhiser. "Founding Father: Rediscovering George Washington" pg 103. </li>
<li id="note_02"> <a href="#cite_02" class="reference" title="Return to Citation above...">[2]</a> Daniel C. Gedacht. <a href="http://books.google.com/books?id=-9TNKUwsPYIC&pg=PT73"> "George Washington: Leader of a New Nation"</a> The Rosen Publishing Group. (1999). Retrieved August 26, 2010. </li>
<li id="note_03"> <a href="#cite_03" class="reference" title="Return to Citation above...">[3]</a> Andrew Cayton. "Learning to Be Washington," New York Times Sept. 30, 2010 </li>
<li id="note_04"> <a href="#cite_04" class="reference" title="Return to Citation above...">[4]</a> Marcus Cunliffe, George Washington: Man and Monument (1958) pg 24-26 </li>
<li id="note_05"> <a href="#cite_05" class="reference" title="Return to Citation above...">[5]</a> John Randall. "George Washington: A Life" (1998) pg 8,11 </li>
<li id="note_06"> <a href="#cite_06" class="reference" title="Return to Citation above...">[6]</a> Mary Ellis. "His Excellency: George Washington" (2004) pg 8 </li>
</ul>
</div>
</div>
</body>
</html>
These are just ideas an I’m not saying this is the best way.
1.) Why the need for two styles: Endnotes and Footnotes?
The two divs were needed because IE won’t center the position:fixed element in the viewport. We first make a 100% wide fixed element at the bottom of the viewport then we nest a static fixed width element which can be centred in the usual way with margin:auto.
2.) What is up with the position: relative; and position: fixed;?
Mallory answered this already and fixed positioning (which doesn’t work in IE6) fixes the element in position when the screen scrolls.
The position:relative on the h2 isn’t needed but originally I had moved the up a bit with relative positioning but changed my mind.
3.) Can you explain how your :target thing works?
It just allows for the destination that you reached via the fragment identifier to receive styling. It doesn’t matter that some browsers don’t understand it because it’s an enhancement and not a necessity.