Question

I have a text area in a fixed width box. I’m struggling with browser compatibility. When I fix the width in chrome & IE, Firefox do not show proper spacing on right. Reducing cols fix issue on Firefox but on IE/Chrome, it show more space towards right.

I need textarea to be placed exactly in center in all browsers. Is it possible?

Demo code is given on JSFiddle as well as below:

HTML

<div id='container'>
    <div class='box-title'>
        Title
    </div>
    <div class='box-cont'>
        This is the contents of content area.
        No limit for these contents.
        Width will be fixed but height may be infinite long
        depending on the contents
        <textarea rows='3' cols='35'></textarea>
    </div>
</div>

CSS

#container{
    width:312px;
    border:1px #666 solid;
    margin:5px;
    padding:5px;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.box-title{
    border-top-left-radius: 5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    border:1px #F66 solid;
    border-bottom:0;
    background-color:#FAA;
    padding:2px 5px;
    margin:0;
}
.box-cont{
    border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    border:1px #F66 solid;
    background-color:#FFF;
    padding:2px 5px;
    margin:0;
}

Answer 1

hi now give to css in your textarea as like this

.box-cont textarea{
width:100%;
    height:40px;
    resize:none;
}

Demo