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>
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>
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.