CODEWITHSUNDEEP
htmlcssfirefox
Joshua Ohana
Joshua Ohana

Reputation: 6121

Image background cut off in Firefox only

I use images as buttons, and have some CSS to make the background look and behave like a button. This works perfectly in all browsers normally, and on most of the pages I have. On this one button in Firefox only, half of the image is cut off.

  1. How can I get it to appear the same in Firefox?

http://jsfiddle.net/863ux696/ View this in Chrome and then Firefox to see what I mean.

Correct view, Chrome <-Correct view, Chrome Incorrect view, Firefox <- Incorrect view, Firefox

CSS:

.login-button {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: 100%;

    background-image: url(http://placehold.it/274x59);
    width: 274px;
    padding-left: 274px;
    height: 59px;
}

HTML

<img class="login-button" />

Upvotes: 1

Views: 345

Answers (2)

Michel
Michel

Reputation: 28239

Replace your <img> tag with a <div> one :

<div class="login-button"></div>

You are using an <img> tag, but you are in fact not really displaying an image. I understand that you probably choosed this one because you have an image in the background.

Using <img class="login-button" /> is a bit heretic, as you do not have an src attribute, and this is against the specification of <img> tag

Demo of the updated fiddle

Upvotes: 1

Stickers
Stickers

Reputation: 78676

You can make the img as a a block or inline-block element.

.login-button {
    display: inline-block;
}

Demo http://jsfiddle.net/863ux696/1/

Upvotes: 1

Related Questions