How do I stop the text from moving when hovered? (background-image is involved)


Tags: html,css,positioning,background-image

Problem :

This is basically the problem that I am facing now, http://jsfiddle.net/NCJeP/.

HTML

      <nav>
    <ul id="city-navigation">
        <li><a href="../chennai/" class="active">Chennai</a></li>
        <li><a href="../trichy/">Trichy</a></li>
        <li><a href="../madurai/">Madurai</a></li>
        <li><a href="../coimbatore/">Coimbatore</a></li>
        <li><a href="../salem/">Salem</a></li>
    </ul>
    </nav>​

CSS

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
}

#city-navigation li a:hover {
    background-image: url(http://i.imgur.com/QVzKG.png);
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 4;
}

#city-navigation .active {
    background-image: url(http://i.imgur.com/HbLa1.png);
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
}​

I can't seem to figure out how I can stop the text from moving to the right because of the extra width that the background image adds. I know there is enough space, I just want the image & text to be static.

If anyone can help out, I'd be very much thankful! =) Cheers!



Solution :

The width on your hover is causing the jump. I moved it to the "a" tag and cleaned up the other code a bit as well:

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
    display: block;
    text-align: center;
    width: 116px;
    height: 60px;
}
#city-navigation li a:hover {
    background: url(http://i.imgur.com/QVzKG.png) no-repeat;
    color: #000;
}
#city-navigation .active {
    background: url(http://i.imgur.com/HbLa1.png) no-repeat;
    color: #000;
}

    CSS Howto..

    In GWT, how to create a Style object and associate it with a Widget WITHOUT using a CSS file and WITHOUT UiBinder

    How can I add a hover effect to icons with CSS? [closed]

    How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)

    How to make CSS animation jump rather than slide

    How to make contents vertical align inside div

    Openlayers Map is shown only if the CSS contains a syntax error

    how to zoom in an image and center it

    How are CSS frameworks used?

    How to display a border-bottom only if table cells are not empty (CSS)

    How do you get multiple views in one window like JSFiddle does [closed]

    How to control spaces/margin between bars?

    How to format CSS of a dropdown menu so if the 'parent' dropdown is current then the children will not take the formatting of the parent

    how to display data in html

    Css: How to make position fixed 100% resizable with bottom padding? - JS Fiddle provded

    How To Turn JS Objects To HTML And Style With CSS

    How does Bootstrap's Jumbotron example create space in navbar elements

    How do I change the alignment of my search box?

    CSS: How to center texts with transitioning position?

    how to CSS select all th cells, except the last one on IE7/8?

    How do I restrict style to affect content only in modal?

    How do I fix my css floats on IE 6 & 7? Or how can I lay this out better?

    How to do auto slide for divs [closed]

    How to get two column float left div layout to word wrap?

    How can I hide a style element in html

    How to set css style dynamically with angularjs?

    Simple CSS: How to fix display:inline issue

    how to make a css gradient stop after so many pixels?

    How to use HTML-CSS on outputting data conditionally?

    How to render no-table HTML form into two columns with CSS using classes?

    CSS: how to do away with automatic rescaling of font-size on Safari