How to adjust the width of a textbox depending on browsers using JavaScript

I have a textbox in a form. I have given style="width: 370px;” While browsing in Firefox its alignment is correct with all other fields in this form. But in IE It's need to increase little more. i.开发者_如何转开发e. 380px.

SO how I will give the width to that text box depending on the browsers? I know it's possible. But I don't know how it is?

Does anyone know this?

Thanks in advance

If you're using JQuery, you can use jquery.browser to detect if the browser is IE (or any number of other well documented methods of browser detection. then if IE, set the side $document.getElementByID(formelement).css(width).

Although I'd suggest looking further into why your form elements don't align in IE, and fix that instead of dynamically resizing your form elements based on the viewing browers.

Why not conditional CSS?

On js document.write(navigator.appCodeName);

On php echo array_shift(explode(' ', $_SERVER['HTTP_USER_AGENT']));

Using these you can switch css, but have you ever looked in to css framework like Blueprint css

It contains something like

<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->

You can use this conditional statements, also using this framework isn't that bad either.