|
|
|
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
|||
|
|||
|
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> |
|
#2
|
|||
|
|||
|
font-family : monotype
(?) |
|
#3
|
|||
|
|||
|
nup, doesn't seem to help..
|
|
#4
|
|||
|
|||
|
You might try adding a width to it.
|
|
#5
|
|||
|
|||
|
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; |
|
#6
|
|||
|
|||
|
cool that got it,
Thanks for that.... |
![]() |
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS - Text Transform |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|