CSS - Text Transform

I have set up a simple A-Z list which runs

A | B | etc.... to | Z

I have them in lowercase, but on mouse over they change UPPERCASE with a background around them.

Problem Im having is that when changing to UPPERCASE they take up more or less width then the lowercase version.

This causes the A-Z text to step out to the right or left.

I have tried adding padding to the controlling class and I still can't get anywhere... Any ideas how to get around this..

CSS
//
/* I transform the text here cause Im lazy and I originally wrote the list in uppercase */
.azList {
text-transform: lowercase;

}

.azList a:link{
text-decoration: none;
text-transform: lowercase;
padding: 20px;
}

.azList a:visited{
text-decoration: none;
}

.azList a:hover{
text-decoration: underline;
text-transform: uppercase;
background-color: #99CC66;

}

HTML
//
<h1 class="azList"><a href="#a">A</a> | <a href="#b">B</a> | <a href="#c">C</a> | <a href="#d">D</a> | <a href="#e">E</a> | <a href="#f">F</a></h1>

font-family : monotype

(?)

nup, doesn't seem to help..

You might try adding a width to it.

Like Duke suggested, you need a fixed width font, so each character is the same width regardless of case or character. It's monospace tough, not monotype.

font-family: monospace;

cool that got it,

Thanks for that....