CODEWITHSUNDEEP
htmlcssbuttonhoverposition
SomerenV
SomerenV

Reputation: 3

Button shifting on mouse hover

I've got a problem with my menu buttons shifting whenever I'm hovering over them with my mouse. Once I've done that they're all in place. When I press F5 to relaod the page the buttons are already in place. The problem does not occur in IE8. I'm using Chrome (updated).

CSS:

div.header_container
{
    clear: both;
    float: left;
    height: 180px;
    width: 100%;
}

div.header
{
    margin-top: 54px;
    height: 110px;
    background-color: #000000;
    width: 100%;
}

div.logo
{
    float: left;
    margin-top: 23px;
    margin-left: 5px;
}

div.menu
{
    float: right;
    margin-top: 58px;
    margin-right: 10px;
}

div.menu ul
{

}

div.menu ul li
{
    float: left;
    margin-left: 30px;
    padding-right: 10px;
    list-style-image:url("../images/menu_block.jpg");
}

div.menu ul li:hover
{
    list-style-image:url("../images/menu_block_mo.png");
}

div.menu ul li a
{
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    font-family: 'CalibriRegular';
}

HTML:

        <div class="wrapper">
    <div class="header_container">
        <div class="header">
            <div class="logo">
                <a href="#" title="Video Photo Editing Graphics | Stefanvlemmix.nl"><img src="images/logo.png" /></a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="./index.html">Start</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="./projects.html">Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
    </div>

Any idea what I'm doing wrong?

Upvotes: 0

Views: 1408

Answers (1)

absqueued
absqueued

Reputation: 3063

Man,

You are using another image on HOVER. That hover image is not loaded initially and when you mouse hover on it - then it starts loading hence you have that shifting on first hover.

You should be using CSS Sprite to overcome these kinds of issues.

EDIT

OR, use HTML characters and CSS generated contents (:after, :before) for this. Just change the color on hover.

All you need:

div.menu ul li
{
    float: left;
    margin-left: 30px;
    padding-right: 10px;
    list-style:none;
}

.menu li:before {
    display:inline-block;
    content: "\25A0";
    color:white;
    font-size:20px;
    margin-right:5px;
}

div.menu ul li:hover:before
{
    color:red;
}

And done. See here: http://jsfiddle.net/shekhardesigner/vQjMX/

Upvotes: 1

Related Questions