How to make a textbox and a textarea same width cross-browsers?

Question

Setting the width of both the textbox (ie. input type=\"text\") and the textarea to 500px doesn\'t work in IE6 and Chrome, only works fine in FF2 (haven\'t tested other browsers

Answer 1

I would recommend first to avoid that "star" reset rule, as it only brings problems down the line. Instead prefer a specific reset like

ul, ol, p, blockquote, h1, h2 /etc.../ { margin:0; padding:0; }

FORM ELEMENTs, in fact, is where the star rule does the most damage.

AFAIK, setting padding and width explicitly to a textarea and an input element, will give the exacts same pixel width in all browsers.

IE6 does add a 1px margin to the TOP and BOTTOM I believe, not the sides.

Here's an example of a RESET rule taht does'nt break the default properties of form elements:

/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/

body { 
    font-size:11px; line-height:1.2em; font-family:Verdana, Arial, sans-serif; 
    margin:0; padding:0; 
    background:#fff url(/01/images/cassis/body-bg.gif) repeat-x 50% 0;
    color:#303030;
}

p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }

/* cross-browser clearing of floats (no extra space in IE) */
div.clear { clear:both; overflow:hidden; height:0; }

These are just random, but you get the idea. Don't clear margin and padding on everything, it's much safer to clear what you need to, and leave the browser defaults elsewhere.