Home/ Questions/Q 114915
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T02:56:11+00:00

I have attempted to use this CSS to set the width of my form

  • 0

I have attempted to use this CSS to set the width of my form elements:

input[type='text'], textarea { width:250px; }

If you look at this Firefox screenshot you’ll see that the fields are not the same width. I get a similar effect in Safari.

alt text http://screamingv.com/ss.png

Are there any workarounds?

UPDATE: Thanks for the info so far. I’ve now made sure padding/margin/border on both elements are set the same. I was still having the problem. The original CSS I posted was simplified… I was also setting the height of the textarea to 200px. When I remove the height styling, the widths match. Weird. That makes no sense.

Browser bug?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Try removing padding and borders. Or try making them the same for both elements

    input[type='text'], textarea {     width:250px;     padding: 3px;     border: none;     }

    Or:

    input[type='text'], textarea {     width:250px;     padding: 0;     border: 1px solid #ccc;     }

    INPUT and TEXTAREA elements often have some padding applied by the browser (varies by browser) and this can make things appear effectively wider than the assigned width.

    UPDATE: also box-sizing: border-box; is a handy way to set widths that that padding and border will eat into rather than add onto. See: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

    • 0