#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    14

    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. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    7
    Rep Power
    0
    font-family : monotype

    (?)
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    14
    nup, doesn't seem to help..
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    You might try adding a width to it.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    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;
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Canberra, Australia
    Posts
    348
    Rep Power
    14
    cool that got it,

    Thanks for that....

IMN logo majestic logo threadwatch logo seochat tools logo