表单元素具有相同的宽度但未显示对齐

Question

I have the following two form fields. They have the same width so they should be displayed aligned and they do so except for Google Chrome. In Google Chrome, the textarea has a little more width. Please help me out in fixing it. Thanks

           <input name="phone" type="text" id="phone"  style=" font-family: Verdana; color:#FFFFFF; font-size: 13px;background-color: #0E0E0F; border: 1px solid #740086; width:385px;  margin-bottom:10px;" size="38" value="Phone #" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
   <textarea
    name="message"
    cols="38"
    rows="12"
    id="message"
    style="font-family:Verdana; color:#FFFFFF; font-size:13px; background-color:#0E0E0F; border:1px solid #740086; width:38px; margin-bottom:10px;overflow:hidden;"
    onFocus="if(this.value==this.defaultValue)this.value='';"
    onBlur="if(this.value=='')this.value=this.defaultValue;">
Message

Answer 1

in the code you posted your text area has a width:38px; did you mean to have width:385px; to match the width of the input field? you may also want to include a reset.css

Answer 2

I suspect that 38px in the style for the textarea element is a typo and should be 385px, otherwise you would the area as narrow on all CSS-enabled browsers. And I suspect that in the real code, there is something that causes a line break between the input and textarea elements; otherwise it is difficult to compare their widths.

The reason why the textarea is slightly wider on Chrome is that by the browser stylesheet for WebKit-based browsers , textarea elements have 2px padding. You can see this if you use the Inspect element tool of Chrome (via right-clicking) and view “Metrics” there.

The apparent solution is then textarea { padding: 0; } textarea { padding: 0; } . But since the padding is actually useful, it might be better to set

textarea, input { padding: 2px; }

Answer 3

You seem to be sizing the input element using the size attribute and using cols in your textarea.

You also are defining two styles: width:385px and width:38px (the inequality is probably your problem). I'm not sure which takes precidence ( size or cols ), but why not avoid confusion and just set equal an width for both elements and just remove the size and row / col definitions?