Question

I’m trying to create in HTML/CSS the following menu inside of a sidebar:

myimage http://img1.firenex.net/9Z0eupHnvV7LIPQd950r.png

Every button has its own corresponding pressed/non-pressed image, and when hovered its opacity moves from 0.8 to 1.0 via CSS.

The problem is that I get is this:

myimage2 http://img1.firenex.net/nooUcfe0HvvfMaCmz6N8.png

Not quite the result I expected 🙂

This is my HTML:

    <div id="homepageBtn"></div>
    <div id="progressiBtn"></div>
    <div id="interessiBtn"></div>
    <div id="friendzoneBtn"></div>
    <div id="emailBtn"></div>

This is my CSS:

#homepageBtn {
    background:url(img/buttons/homepage_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 30px;
    float: left;
}

#homepageBtn:hover {
    background:url(img/buttons/homepage_btn.png) no-repeat;
    opacity: 1.0;
}

#homepageBtn:active {
    background:url(img/buttons/homepage_btn_pressed.png) bottom right no-repeat;
}

#progressiBtn {
    background:url(img/buttons/progressi_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 10px;
    float: left;
}

#progressiBtn:hover {
    background:url(img/buttons/progressi_btn.png) no-repeat;
    opacity: 1.0;
}

#progressiBtn:active {
    background:url(img/buttons/progressi_btn_pressed.png) bottom right no-repeat;
}

#interessiBtn {
    background:url(img/buttons/interessi_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 30px;
    margin-top: 10px;
    clear: left;
    float: left;
}

#interessiBtn:hover {
    background:url(img/buttons/interessi_btn.png) no-repeat;
    opacity: 1.0;
}

#interessiBtn:active {
    background:url(img/buttons/interessi_btn_pressed.png) bottom right no-repeat;
}

#friendzoneBtn {
    background:url(img/buttons/friendzone_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 10px;
    margin-top: 10px;
    float: left;
}

#friendzoneBtn:hover {
    background:url(img/buttons/friendzone_btn.png) no-repeat;
    opacity: 1.0;
}

#friendzoneBtn:active {
    background:url(img/buttons/friendzone_btn_pressed.png) bottom right no-repeat;
}

#emailBtn {
    background:url(img/buttons/email_btn.png) no-repeat;
    opacity: 0.8;
    width: 188px;
    height: 29px;
    margin-left: 30px;
    margin-top: 10px;
    clear: left;
}

#emailBtn:hover {
    background:url(img/buttons/email_btn.png) no-repeat;
    opacity: 1.0;
}

#emailBtn:active {
    background:url(img/buttons/email_btn_pressed.png) bottom right no-repeat;
}

I really don’t know if I am using the correct method to do this, I would appreciate any solutions at this point… thanks in advance.

PS: this happens with Chrome, with IE for example I get it showed correctly

Answer 1

You are using clear property incorrectly. you can use this code.

<div id="homepageBtn"></div>
<div id="progressiBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="interessiBtn"></div>
<div id="friendzoneBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="emailBtn"></div>​

And Remove Clear:left from following CSS

#interessiBtn {
    background:url(img/buttons/interessi_btn.png) no-repeat;
    opacity: 0.8;
    width: 88px;
    height: 79px;
    margin-left: 30px;
    margin-top: 10px;
    clear: left;            <-- Remove this
    float: left;
}

Demo Code