CODEWITHSUNDEEP
htmlcsstexthover
Chickenator
Chickenator

Reputation: 109

Font size increase on hover problems?

The problem I'm getting is that when I mouse over the home the font size increases but the text moves down. I tried transform translate, I tried to do position relative then top 25px or whatever but didn't work.

here's the hover part:

home:hover{   
    font-size: 25px;

}

Here's the HTML part:

<nav> |<home> Home </home>| <photos> Photos </photos> | <contact> Contact </contact> | </nav>

Here's the CSS for the text of the nav:

nav{   
    color: #ddfeff;
    font-family: Impact, sans-serif;
    text-align: center;
    padding: 5px 0 5px 0;
    word-spacing: 125px

}

home{
    color: #ddfeff;
    font-family: Impact, sans-serif;
    text-align: center;
    padding: 5px 0 5px 0;
    word-spacing: 125px

}

photos{
    color: #ddfeff;
    font-family: Impact, sans-serif;
    text-align: center;
    padding: 5px 0 5px 0;
    word-spacing: 125px

}

contact{   
    color: #ddfeff;
    font-family: Impact, sans-serif;
    text-align: center;
    padding: 5px 0 5px 0;
    word-spacing: 125px

}

If you think you need any other bits of script let me know.

Thanks in advance

Upvotes: 0

Views: 176

Answers (1)

jlowcs
jlowcs

Reputation: 1933

How about adding a vertical-align ?

nav > * {
    vertical-align: middle
}

http://jsfiddle.net/dchkdbvq/

Upvotes: 1

Related Questions