I've always been taken with the way that the BBC styles their A-Z index using a simple list and CSS. However, because they use pixels to set the dimensions of each list item, the design breaks when you increase the text size.

It's always been important to me not to break the browser's ability to resize text and so I thought I'd have a go at creating an A to Z index along the same lines that doesn't break when you resize your text.

The code is actually pretty straight forward. Here's the CSS first:

#azindex { background: #75B9D0; float: left; margin: 5px 0 20px 10px; padding: 0px 5px 15px 5px; width: 520px; }

* html #azindex { padding: 5px 5px 10px 5px; width: 490px; }

#index { font: bold 100% Verdana, Helvetica, sans-serif; margin: 0; padding: 0; }

#index li { float: left; height: 2em; list-style-type: none; margin: 0.65em 0.3em; padding: 0; width: 3em; }

* html #index li { margin: 0.2em 0.2em; }

#index a:link, #index a:visited { backg

round: #fff; color: navy; display: block; height: 2em; padding: 0.75em 0 0 0; text-align: center; text-decoration: none; width: 3em; }

#index a:hover { background: #93D1E4; color: #fff; text-decoration: underline; }

And here's the HTML:

< div id="azindex"> < a href ="#a"> A < a href ="#b"> B < a href ="#c"> C < a href ="#"> etc < a href ="#z"> Z

Christian Watson is a web designer. You can find an example of the above technique on his blog.