TEXT AREA WIDTH AND SCROLLBAR PROBLEM! Please Help! : (

First of all, i have no problems with the text area with firefox but:

1) The textbox width changes, like is different (smaller) in chrome, safari and IE.. How can i make the textbox width the same and constant in size for every browser?

2) How can i get rid of the horizontal scrollbar that shows up in IE, Chrome and safari?

This is the code im using in dreamweaver:

<textarea name="comments"cols="124" rows="13" readonly="readonly" class="html-text-box" style="resize:none;">

<style type="text/css">
textarea.html-text-box {background-color:000000;background-image:url(http://);background-repeat:no-repeat;background-attachment:scroll;Time:: 12:43

<input type="text" style="text-align: center"/>
<textarea style="text-align: center"></textarea> border-width:2;border-style:solid;border-color:0066FF;font-family:verdana;font-size:10pt;color:red;}
input.html-text-box {background-color:ffffff;font-family:Times;font-size:10pt;color:000000;}
</style>

textarea.html-text-box {background-color:000000;background-image:url(http://);background-repeat:no-repeat;background-attachment:scroll;text-align:center;border-width:2;border-style:solid;border-color:0066FF;font-family:verdana;font-size:10pt;color:red;}
input.html-text-box {background-color:ffffff;font-family:Times;font-size:10pt;color:000000

 

While I have rows and cols attributes in my textareas (they are required!), I use CSS to set widths across browsers. You can width in px, em, pt, whatever. This still won't be 100% but it will be much closer. I have never used px but since I see you've got a background image involved, that may work exactly and across browsers.

You don't. It's a browser default to show an unused scrollbar. I'm not sure why browsers have gone that way... used to only be Opera I remember.

Supposedly you could remove it by changing the overflow to something like hidden but then you won't get a live scrollbar when your user needs it (to type more text).

This is one of those things where, users using these browsers are always seeing these scrollbars on everything as part of the browser chrome, and so are used to it. Firefox users, on the other hand, will be used to no scrollbar. Usually it's better for usability to leave default browser settings in forms, but I can imagine this'll make your image look bad.

You can try and see what happens if you make the borders transparent on the textarea (or remove them entirely) and see if the (unused) scrollbars vanish with them?

 

all browser have their own default margin and padding, some time because of that also box style change, What you need to do is for all HTML tags make all margin padding to 0px
like
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend
{
border: 0 none;
font-size: inherit;
margin: 0;
outline: 0 none;
padding: 0;
}
above code should be first line of your css code.
Now default margin padding are same for all the browser, now you can give the fixed width and height to your text box, it will render similar to all browser now.


Sheetal

 

better to use width and height in px with background image. In ie scroll bar appears by default, but in chrome and firefox it will not appear with border setting.