CODEWITHSUNDEEP
cssgoogle-chromefirefoxpadding
cdmckay
cdmckay

Reputation: 32240

How to make Firefox button respect padding?

For some reason Firefox button elements don't seem to respect the CSS padding declarations, even if you make them display: block.

See this JSFiddle in Chrome and Firefox: http://jsfiddle.net/DgeQ6/

Notice how the padding works in Chrome but not in Firefox. How do I get Firefox to pay attention to padding in button elements?

Here's a screenshot of how it looks on Firefox on my machine:

https://www.evernote.com/shard/s217/sh/dc349236-9a7e-46f2-ae77-3a7581fa78c1/ea90d1f4a880ba64257fdd744b9fabcf

The padding should be 20px but it's not affected.

Upvotes: 1

Views: 242

Answers (3)

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

Padding by itself doesn't work on Mac because the Mac native-themed look for buttons overrides the padding. On Windows it works just fine, for example. I can't recall what the behavior is on Linux offhand.

The safest way to deal with this is to set -moz-appearance: none if you want to drop the native-themed look.

Upvotes: 2

Minh Nguyen
Minh Nguyen

Reputation: 273

Credit should go to Boris below but you need to use -moz-appearance:none to override the OS level button stylings. Here's a fiddle: http://jsfiddle.net/DgeQ6/8/.

HTML

<button class="btn-large">Hello</button>

CSS

.btn-large {
    padding: 100px;
    -moz-appearance: none;
}

It should also be noted that Twitter Bootstrap appears to achieve the same effect for their buttons in Firefox just by having a "border-radius" styling along with padding.

Upvotes: 4

Archna Rangrej
Archna Rangrej

Reputation: 664

enter image description here

It looks like this in my firefox.

Upvotes: 0

Related Questions