0

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;
                        }
2
Contributors
4
Replies
19
Views
3 Years
Discussion Span
Last Post by pb404
0

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;
                        }
-1

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;
                        }
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.