CODEWITHSUNDEEP
htmlcssbutton
Calisto
Calisto

Reputation: 323

Button icon being cut off from top and bottom

The top and bottom areas of my button are being cut off. It's allowing me only to have my icon be the same height as my button's text. I tried overflow hidden, I tried expanding the button padding.

enter image description here

HTML:

<div id="toprow">
    <div id="homeDiv">
        <a href="#"><button type="button" id="homeBtn"><span>HOME</span></button></a>
    </div>
</div>

CSS:

#homeDiv{
    float:left; margin-left:160px;}
a #homeBtn span{
    background:url(home.png) no-repeat;
    padding-left: 45px;
    background-position: 0px -10px;}

#homeBtn{
    font-size:1em;
    outline:none;
    background:none;
    border:none;
    cursor: pointer;
    }

Upvotes: 1

Views: 3958

Answers (2)

Blacky Wolf
Blacky Wolf

Reputation: 439

Anchor tags are inline elements by default. You might try changing your link to display block or inline-block. The reason for this is inline elements are not affected by top and bottom padding. I can't remember off the top of my head but the same may be true for margin as well. display: inline-block; on the <a> tag

EDIT: Sorry, didn't notice the span tag. So the <span> tag is inline as well. Since your using the image as a background the element is only fitting to the text size, so you might try Johannes suggestion.

Upvotes: 1

Johannes
Johannes

Reputation: 67778

In this rule

a #homeBtn span{
    background:url(home.png) no-repeat;
    padding-left: 45px;
    background-position: 0px -10px;}

add: background-size: contain;

that should make the icon img just small enough to fit into its container.

EDIT / addition: Reset the backgound-position to 0px 0px, or to settings that cause a position you are satisfied with.

Upvotes: 1

Related Questions