How to Keep an Element from Moving Other Elements on a Transition

[pb404]

I have an <UL> with each <li> being arranged inline for my navigation. Each <li> has a transition that enlarges the text when hovered over. The problem is that when the text enlarges it causes the text to the left and right of it to move outward to make room for the enlargment. I'm trying to figure out how to keep the text from causing the neighboring text to move over when it enlarges. Thanks for any help. Below is the CSS I'm using if it is of any help.

#menu                   {
                        text-align: center;
                        margin: 0;
                        height: 24px;
                        padding: 2px 8px 0px 8px;
                        background-color: black;
                        }

#menu a                 {
                        font-size: 1.1em;
                        color: white
                        -o-transition: all .3s linear;
                        -ms-transition: all .3s linear;
                        -moz-transition: all .3s linear;
                        -webkit-transition: all .3s linear;
                        transition: all .3s linear;
                        }

#menu a:hover           {
                        color: red;
                        font-size: 1.2em;
                        }

#menu li                {
                        margin: 0px;
                        padding: 0px 5px 0px 5px;
                        display: inline;
                        }

[pb404]

I changed the CSS to use transform: scale(1.1) instead of just specifying a new font size and it solved the issue of the text being pushed outward, but now my transition to color: red; on hover is not transitioning, it just changes abruptly and the font size reverts back to original size after the transition. This is using Chrome. I just tried it in Firefox and the color transition works fine but the transform: scale(1.1); does not work at all.

I really appreciate any assistance.

New code (better than the original?)

#menu                   {
                        text-align: center;
                        margin: 0;
                        height: 24px;
                        padding: 2px 8px 0px 8px;
                        background-color: black;
                        }

#menu a                 {
                        font-size: 1.1em;
                        color: white;
                        -o-transition: all 300ms ease-in;
                        -ms-transition: all 300ms ease-in;
                        -moz-transition: all 300ms ease-in;
                        -webkit-transition: all 300ms ease-in;
                        transition: all 300ms ease-in;
                        }

#menu a:hover           {
                        color: red;
                        -webkit-transform: scale(1.1);
                        -moz-transform: scale(1.1);
                        -o-transform: scale(1.1);
                        -ms-transform: scale(1.1);
                        transform: scale(1.1);
                        }

#menu li                {
                        margin: 0px;
                        padding: 0px 5px 0px 5px;
                        display: inline;
                        }

[pb404]

I guess I answered my own question. Lots of tinkering later this works...

#menu                   {
                        margin-top: 0px;
                        margin-left: 160px;
                        margin-right: auto;
                        min-height: 24px;
                        padding: 27px 0px 0px 8px;
                        background-color: black;
                        overflow: hidden;
                        list-style-type: none;
                        }

#menu li                {
                        margin: 0px 9px 0px 9px;
                        float: left;
                        -o-transition: all 100ms;
                        -ms-transition: all 100ms;
                        -moz-transition: all 100ms;
                        -webkit-transition: all 100ms;
                        transition: all 100ms;
                        }

#menu li:hover          {
                        transform: translate(0px,-1px) scale(1.1);
                        }

#menu li a:hover        {
                        color: red;
                        }

[mitchell.schols]

hmm i would say position absolute with a zindex so it doesn't interfear with your other blocks

[pb404]

Thank you I will add that.