how to make textarea same width in IE and Firefox?

Question

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

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

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

Just a note, I could explicitly specify the texarea border width, ie. border-width: 1px, but the problem here is that it doesn't work nicely with IE (the default textarea border in IE doesn't visually look ok 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 browsers styles, I just want the width to be the same in all browsers without changing the default styles or setting a color to the border, is this possible?

Answer 1

You can set all of your browsers' default styles to be the same by using a Reset CSS sheet at the top of your document. I like the YUI reset CSS myself. That should set the base styles for all of the controls to be the same across all browsers to begin with, and that should allow for a more predictable layout.

IMO if you let each browser have its own style (which can even be customized by the user!) , you're on the road to having an unpredictable style for your application, with problems popping up in places you never thought they would. Better to use a reset CSS and then style your applications accordingly. If you checkout yahoo's site (referenced), they'll also have their own "base" CSS that you can start from, which is pretty cool.

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

Answer 2

We tend to create separate style sheets for IE and FF to get around their 'quirks'. A simple bit of code can then be used to ensure the correct style sheet is used.

<!--[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 it deal with cross browser issues.

Answer 4

In essence you are deploring that the browser defaults are not the same with every browser but don't want to change those properties yourself directly.

This does not make sense.

Like others I'd recommend using a reset stylesheet (I'm a big fan of Eric Meyer's) and then style the borders exactly the way you want them. Easy. Clear. No downsides.

Answer 5

Perfect!!!! YUI Is working for me.