How to make textarea the same width in IE and Firefox?

Question

I want to have textarea that is 500px, this is the CSS that I use for textarea:

width: 498 pixels; padding: 0px; margin: 0px;

I noticed that IE and Chrome have a 1px border by default, on the other hand, FF has a 2px border, which leads to textarea being 502px instead of 500px, any workarounds?

Just a note, I can explicitly indicate the width of the border of the techarea, i.e. border-width: 1px, but the problem here is that it does not work well with IE (by default, the textarea border in IE does not look normal when the border is set to 1px), I could change the border color, but I don't want To do this, I prefer to keep the default browser styles, I just want the width to be the same in all browsers without changing the default styles or setting the color on the border, is this possible?

Answer 1

You can set all browsers to have the same default styles using the CSS Reset sheet at the top of the document. I like YUI Reset CSS . This should lead to the fact that the basic styles for all controls will be the same in all browsers to start with, and this should allow a more predictable layout.

IMO, if you allow each browser to have its own style (which can even be customized by the user!), You are on the way to an unpredictable style for your application, with problems appearing in places you never thought they would. It's better to use CSS Reset, and then draw your applications accordingly. If you order the yahoo website (link), they will also have their own “basic” CSS, from which you can start, which is pretty cool.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css"> 

Answer 2

We strive to create separate stylesheets for IE and FF to get around their “quirks”. You can then use a simple bit of code to provide the correct stylesheet.

 <!--[if lte IE 6]> works for < than IE 6 <link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" /> <![endif]--> 

There is also works for IE 6

etc...

Answer 3

we use jQuery to decorate our html elements and let them solve cross-browser issues.

Answer 4

In essence, you regret that the browser settings do not match with each browser, but do not want to directly change these properties.

It does not make sense.

Like others, I recommend using the reset stylesheet (I'm a big fan of Eric Meyer's), and then the border style exactly as you want. Easy. To clear. No flaws.