June 17th, 2003, 07:00 PM
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..
/* I transform the text here cause Im lazy and I originally wrote the list in uppercase */
<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>
June 17th, 2003, 07:05 PM
font-family : monotype
June 17th, 2003, 07:17 PM
nup, doesn't seem to help..
June 17th, 2003, 10:47 PM
You might try adding a width to it.
June 18th, 2003, 12:52 AM
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.
June 18th, 2003, 01:53 AM
cool that got it,
Thanks for that....