CODEWITHSUNDEEP
htmlcssfacebook
Carson Lee
Carson Lee

Reputation: 2903

Unable Target div first button CSS

I have little question and unclear on the CSS. I have no idea why the first social-fb btn are not target like social-twitter and social-g.

Here is my HTML code 

<div class="cus-social">
    <button id="social-fb" class="btn btn-success" type="button"><a href="https://www.facebook.com/sharer/sharer.php?u=http://myhero.asia/"><i class="icon-facebook"></i></a></button>
    <button id="social-twitter" class="btn btn-success" type="button"><a href="https://twitter.com/share?text=MYHERO%20is%20so%20powerful"><i class="icon-twitter"></i></a></button>
    <button id="social-g" class="btn btn-success" type="button"><a href="https://plus.google.com/share?url=http://myhero.asia/"><i class="icon-google-plus"></i></a></button>
</div>

And here is my CSS style sheet

    .cus-social {
    position: fixed;
    top: 40%;
    left: 0;
    width: 50px;
    margin-right: 20%;
    margin-top: 5px;
    z-index: 9999;
    }

    .cus-social .btn {
    font-size: 20px;
    position: relative;
    float: left;
    }

    .cus-social > .btn:hover {
        width: 95px;    
    }

    #social-fb {
        background-color: #1B668C;
        border-color: #1B668C;
        width: 55px;
    }

    #social-twitter {
        background-color: #86BEE0;
        border-color: #86BEE0;
    }

    #social-g {
        background-color: #CC322A;
        border-color: #BA241F;
    }

    .btn-success i {
        padding-left: 10px;
    }

Twitter and Google Plus are able to working as desired but facebook is the only 1 who acting strange here. Anyone please tell me did I accidentally did something wrong with the style sheet. Thanks.

I putting the width to 55px because if that 55px if appear to be

enter image description here

Upvotes: 0

Views: 139

Answers (2)

Sunny Sharma
Sunny Sharma

Reputation: 4944

Just remove 

width: 55px;

from 

#social-fb {
    background-color: #1B668C;
    border-color: #1B668C;
    width: 55px;     /* This line of style is causing the issue. */
}

DEMO

Your CSS should read like:

.cus-social {
    position: fixed;
    top: 40%;
    left: 0;
    width: 50px;
    margin-right: 20%;
    margin-top: 5px;
    z-index: 9999;
    }

.cus-social .btn {
font-size: 20px;
position: relative;
float: left;
}

.cus-social > .btn:hover {
    width: 95px;    
}

#social-fb {
    background-color: #1B668C;
    border-color: #1B668C;        
}

#social-twitter {
    background-color: #86BEE0;
    border-color: #86BEE0;
}

#social-g {
    background-color: #CC322A;
    border-color: #BA241F;
}

.btn-success i {
    padding-left: 10px;
}

Upvotes: 1

Max Langerak
Max Langerak

Reputation: 1207

Looking at your code, there is nothing wrong with the CSS. You should check if your HTML works. For instance: The image might not load properly.

Upvotes: 0

Related Questions