1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'CSS' started by Beelzerius, Oct 4, 2011.

  1. #1
    First of all, i have no problems with the text area with firefox but:
    SEMrush
    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
     
    Beelzerius, Oct 4, 2011 IP
    SEMrush
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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?
     
    Stomme poes, Oct 5, 2011 IP
  3. SheetalCreation

    SheetalCreation Peon

    Messages:
    42
    Likes Received:
    1
    Best Answers:
    3
    Trophy Points:
    0
    #3
    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
     
    SheetalCreation, Oct 5, 2011 IP
  4. you-me

    you-me Peon

    Messages:
    67
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    you-me, Oct 9, 2011 IP