Staves made with <img id=stv src=sqr.gif> ( which is ):

font-size:5mm
lll ll ll ll ll & hHhH hHhH hHhH (You really wouldn't want to read this)
font-size:7mm
ll l l l l & hHhH hHhH hHhH (Note the scaled font-size)
font-size:9mm
ll l l l l & hHhH hHhH hHhH (Note the two note-sizes)
font-size:11mm
ll l l l l & hHhH hHhH hHhH
font-size:13mm
ll l l l l & hHhH hHhH hHhH
Some of the CSS juju is 
a  {position:relative;                     font-size:80%; top:-.01em}  
i   /* use em for italics */   {visibility:hidden; font-style:normal}
#stv {position:relative;                      left:-.02em; top:.02em;
      vertical-align:center;                height:.03em; width:12em}
And here is the algorithm for font-size:9mm: <div id=msm style=height:2.25em;font-size:9mm> <u> <s id=s4><u>l</u> <img id=stv src=sqr.gif>l</s> <s id=s2><i>l</i> <img id=stv src=sqr.gif> </s> <s id=n0><i>l</i> <img id=stv src=sqr.gif> </s> <! center > <s id=n2><i>l</i> <img id=stv src=sqr.gif> </s> <s id=n4><i>l</i> <img id=stv src=sqr.gif> </s> </u> </div> This now works on both IE7 and Firefox, and it prints well from either one. Personally, I prefer the slightly smaller notes.