Search code examples
htmlcssfooter

icons are not in the footer

I would like to create footer in the bottom of my webpage with social icons in. I tried this : 

#footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 40px;
    background: #111111;
}

#footer .social {
    vertical-align: middle;
}

#footer .social ul {
    list-style: none;
}

#footer .social li {
    float: left;
    padding-right: 5px;
    margin-top: 4px;
}

#footer .social li:hover{
    opacity: 0.7;
}

and the HTML

<div id="wrapper">
    <div id="footer">
        <div class="social">
            <ul>
                <li><img  src="./images/footer/twitter.png" /></li>
                <li><img  src="./images/footer/email.png" /><li>
            </ul>
        </div>
    </div>

</div>

But the result is like :

result

Thanks for reading

Solution

  • Different browsers set different default CSS rules in there browsers known as user agent stylesheet.

    Here for ul there may be a default margin, You should reset it to 0;

    Here in your code, Try Adding:

    #footer .social ul {
    margin:0;
}

    Or you can reset the whole user agent styles by including a reset.css or a normalise.css (Google any of these and find).