CODEWITHSUNDEEP
css
JoJo
JoJo

Reputation: 20115

How to apply CSS width to a submit input on Firefox?

I applied the same width to an anchor and a submit input. The anchor looks right, but the submit input's width is too small. The problem occurs only in Firefox. Chrome is fine.

Browser

enter image description here

HTML

<a>Save</a>
<input type="submit" value="save" />

CSS

a,
input {
   display: block;
   width: 5em;
   text-align: center;
   font-size: 1.4em;
   padding: 0.6em 2em;

   /* hack to get the width to work on Chrome */
   box-sizing: content-box; 
}

Upvotes: 2

Views: 469

Answers (4)

maxedison
maxedison

Reputation: 17553

I get the same effect in Chrome. I'm not sure why, but it looks like the padding-right is not getting applied to the input element. How you should solve this depends on your specific case, which I don't know enough about to answer. Hopefully knowing the immediate cause of the issue will be enough.

Edit
See the OP's comment on this post for his solution. All that's needed to make it work in FF is -moz-border-box: content-box

Upvotes: 1

Dips
Dips

Reputation: 3290

Try inline-block instead of block

a,
input {
   display: inline-block;
   width: 5em;
   text-align: center;
   font-size: 1.4em;
   padding: 0.6em 2em;
}

Upvotes: 0

mkk
mkk

Reputation: 7693

I think your mistake is that you use em for dimensions like width or for padding.
There are a lot of articles why it is encouraged to use em for font-size, however you should not really use them for size, padding, margin etc. If you want to make your layout 'flexible', use % instead. Otheriwse stick to px.

Upvotes: 0

timmackay
timmackay

Reputation: 1024

Try adding a CSS reset, It looks like the default width/padding of each of these elements is coming into play here.

a, input { width:0; padding: 0; margin: 0;}

Upvotes: 0

Related Questions