CODEWITHSUNDEEP
css
amit
amit

Reputation: 10261

difference between Firefox and Chrome padding

there is a difference in how firefox and chrome render the padding in css. what appears correct in chrome is extra padded in firefox. is there a way to solve?

.button {
    font-family: helvetica, arial;
    font-size: 64px;
    width: 70px;
    height: 45px;
    font-weight: bold;
    padding: 0px;
    padding-top: 25px;
    background-color: #000;
    color: #fff;
    text-align: center;
    float: right;
    margin: 7px 10px 0 0;
}

Upvotes: 23

Views: 34897

Answers (6)

Matoeil
Matoeil

Reputation: 7289

u can set a different padding for firefox

.button {
   padding:0;
}

@-moz-document url-prefix() {
    .button {
       padding:10px;
    }
}

Upvotes: 0

Kirk Ross
Kirk Ross

Reputation: 7153

The focus-inner fix works but I also add negative top and bottom margins to get it to the right height. e.g.:

*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}

I used to love Firefox, but it has become a bloated mess and fell off my Christmas list years ago.

Upvotes: 2

website programmer
website programmer

Reputation: 1

The way that worked for me was to set the height of the object so that firefox, chrome and opera render it the same way, and remove all padding.

.footertext6{
    float: left;
    padding-top:10px;
    width: 160px;
    height:102px; */setting height here*/
    background-color:#ffffff;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 15px;
    border-top-right-radius: 50px;    
}

Upvotes: -1

Joel Glovier
Joel Glovier

Reputation: 7679

You are actually correct - there is a bug in Firefox where the button element's line height cannot be changed with the CSS line-height property.

See this link for details: http://www.cssnewbie.com/input-button-line-height-bug/

The solution is to use padding instead of line-height.

Upvotes: 0

superUntitled
superUntitled

Reputation: 22527

If your .button is a button this might be a mozilla inner focus thing... try this?

.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }

Upvotes: 25

Andrew Moore
Andrew Moore

Reputation: 95324

Firefox and Chrome render padding exactly the same way. Your problem is elsewhere.

Are you using a reset CSS? If not, the default line-height declaration might be interfering with the rendering of your button.

For one, your height is way smaller than your font-size. Since you don't have overflow specified, your height will always be extended to at least font-size (or whatever your line-height specifies).

If your .button class is actually a <button> element, also apply superUntitled fix.

Upvotes: 12

Related Questions