Displaying Alphabets using CSS in a nice fashion

The following code snippet will display alphabets in a nice simple fashion.

Open up a Notes form, paste the following code into it, select all the text and say Pass-Thru Html

<div id="author_alphabetic"></div>

<style type="text/css">
#author_alphabetic {
    text-align:center;
}
#author_alphabetic ul {
}
#author_alphabetic li {
    float:left;
    margin:3px 3px 0 0;
}
#author_alphabetic a {
    position:relative;
    width:20px;
    height:13px;
    border:1px solid rgb(203, 214, 149);
    text-decoration:none;
    font:.7em/.7em "Times New Roman";
    float:left;
    display:inline;
    color:#330;
}
#author_alphabetic a span {
    background:url(../image/alpha_br.png) no-repeat right bottom;
    width:16px;
    height:16px;
    display:block;
    position:absolute;
    top:0;
    left:0;
}
#author_alphabetic a:hover {
    background:rgb(224, 232, 158);
    z-index:100;
}
#author_alphabetic a:hover span.first {
    display:block;
    font-size:1em;
    line-height:1.1;
    font-weight:bold;
    color:#15362d;
    cursor:pointer;
    width:30px;
    height:20px;
    top:-1px;
    left:-1px;
    background:rgb(224, 232, 158);
    border:1px solid rgb(203, 214, 149);
}
#author_alphabetic a:hover span span {
  
    display:block;
    position:absolute;
    width:25px;
    height:25px;
}
</style>


Copy and Paste the following function into your javascript header

function loadAlpha()    {

var row1=new Array(26);
    row1[0]="A";
    row1[1]='B';
    row1[2]='C';
    row1[3]='D';
    row1[4]='E';
    row1[5]='F';

    row1[6]='G';
    row1[7]='H';
    row1[8]='I';
    row1[9]='J';
    row1[10]='K';
    row1[11]='L';

    row1[12]='M';
    row1[13]='N';
    row1[14]='O';
    row1[15]='P';
    row1[16]='Q';
    row1[17]='R';

    row1[18]='S';
    row1[19]='T';
    row1[20]='U';
    row1[21]='V';
    row1[22]='W';
    row1[23]='X';

    row1[24]='Y';
    row1[25]='Z';
    row1[26]='#';  
  
    var alphaContainer=    document.getElementById('author_alphabetic');
    alphaContainer.innerHTML="<ul>";
    for (itr=0;itr<=26;itr++)    {
        alphaContainer.innerHTML+='<li><a href="#" title="'+ row1[itr]+
        '"><span class="first"><span>'+ row1[itr] +
        '</span></span></a></li>';
    }
        alphaContainer.innerHTML+="</ul>";
        return true;
}

Copy and Paste the following function into the onload event of your form 

loadAlpha()

Now save and preview your form on the  browser. You will get a nice listing of alphabets.

How ever it looks better in fire fox than in IE

Hope this helps