CODEWITHSUNDEEP
htmlcsshovermove
Ben Dover
Ben Dover

Reputation: 73

CSS - Text moves when hovering

I've been at this for about an hour now, and cant seem to grip it.
Everytime I hover over this text (I'm wanting to put a background color for it to hover), the text moves, along with the bgcolor. Here is what I got:

        #innerheader ul {
            list-style:none;
            margin:0;
            padding:0;
        }
        #innerheader li {
            display:block;
            float:left;
            height:25px;
            margin:0 2px;
            padding:15px 10px 0 10px;
            color:#FFFFFF;
            font-weight:bold;
            font-size:10px;
            text-transform:uppercase;
        }

        #innerheader li a, 
        #innerheader li a:link, 
        #innerheader li a:visited, 
        #innerheader li a:active {
            color:#FFFFFF;
            text-decoration:none;
        }
        #innerheader li a:hover {
            background-color: blue;
            padding: 10px 10px 10px 10px
        }

Upvotes: 7

Views: 41639

Answers (5)

chhantyal
chhantyal

Reputation: 12262

It's because of padding. Remove it then it will work just fine.

Upvotes: 1

Kai Qing
Kai Qing

Reputation: 18843

you're putting padding on the li a:hover! Of course it's going to shift the text. To fix this you need to define the width and height and reduce them by the padding amount on hover. OR move the padding to the non hover state.

Upvotes: 0

Nate B
Nate B

Reputation: 6344

It's moving because you are changing the padding in the hover block. Remove that and it should be fine.

Upvotes: 0

Michael C. Gates
Michael C. Gates

Reputation: 992

Get rid of padding, that is what is causing it to move.

Upvotes: 0

Scott
Scott

Reputation: 21890

Remove the padding in the hover declaration. Or simply move the padding to the anchor before the hover state, like the code below.

The reason the text is moving is there is no padding on the anchor, then when you hover, there's padding.

#innerheader li a, 
    #innerheader li a:link, 
    #innerheader li a:visited, 
    #innerheader li a:active {
        color:#FFFFFF;
        text-decoration:none;
        padding: 10px;
    }
    #innerheader li a:hover {
        background-color: blue;
    }

Upvotes: 11

Related Questions