Textarea width affected by font type. How to fix this?

Question

I have a comment box that is basically a textarea. I set the cols property to 113 cols and it looks good in Firefox but not in chrome or IE9.

I then change the font to a fixed width font and all 3 browsers display it correctly. The thing about it is, it is just ugly.

Do you have any ideas as to why it would only properly calculate the width of columns in firefox but not the others?

Thank you.

Here's the CSS:

#wrap_mid #nav_body .entry_container .comment_new_container .ta_new_comment
{
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    color: #999;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    padding: 3px 4px;
    width: 795px;
    resize: none;

}

Here's the HTML:

<div class="comment_new_container">
<img src="img/avatar45.png" />
<textarea class="ta_new_comment" cols="113" rows="0">Write a comment...</textarea>
<!-- Float fix --> 
<div class="clear">&nbsp;</div>
</div> <!-- END comment_new_container -->

Here's the JQuery:

<script type="text/javascript">

$(function(){

  $(".ta_new_comment").autoGrow();

});

</script>

Here's the JQuery Plugin:

/*!
 * ----------------------------------------------------------------------------
 * "THE BEER-WARE LICENSE" (Revision 42):
 * <jevin9@gmail.com> wrote this file. As long as you retain this notice you
 * can do whatever you want with this stuff. If we meet some day, and you think
 * this stuff is worth it, you can buy me a beer in return. Jevin O. Sewaruth
 * ----------------------------------------------------------------------------
 *
 * Autogrow Textarea Plugin Version v2.0
 * http://www.technoreply.com/autogrow-textarea-plugin-version-2-0
 *
 * Date: March 13, 2011
 */
jQuery.fn.autoGrow = function(){

    return this.each(function(){
        // Variables
        var colsDefault = this.cols;
        var rowsDefault = this.rows;

        //Functions

        var grow = function() {
            growByRef(this);
        }



        var onFocus = function(obj) {

      if ($(this).val() != 'Write a comment...') {
        return;
      } else {
        $(this).parents(".comment_new_container").children("img").show();
        //$(this).height(34);
        $(this).width(745);
        $(this).val(''); 
      }

        }

        var onBlur = function(obj) {

      if ($(this).val().length == 0) { 
        $(this).parents(".comment_new_container").children("img").hide();
        //$(this).height(16);
        $(this).width(795);
        $(this).val('Write a comment...');
      } 

        }


        var growByRef = function(obj) {

        var new_comment = '';

      if (!obj.shiftKey && obj.keyCode == 13) {

        obj.preventDefault();

        new_comment += '<div class="comment_container" id="001">';
        new_comment += '<a href="#"><i class="comment_delete">&nbsp;</i></a>';
        new_comment += '<img src="img/avatar45.png" />';
        new_comment += '<a href="/">Mickey Mouse</a>';
        new_comment += '<br/>';
        new_comment += '<div class="comment_content">' + $(this).val().replace(/\n/g, '<br />'); + '</div> <!-- End comment_content -->';
        new_comment += '<div class="comment_timestamp">13 minutes ago</div> <!-- End comment_timestamp -->';
        new_comment += '</div> <!-- End comment_container -->';

        $(new_comment).insertBefore($(this).parents(".comment_new_container"));

            var comment_total = parseInt($('.social_menu_right li a').children('.meta.comment_total').text(), 10) + 1;
          $('.social_menu_right li a').children('.meta.comment_total').text(comment_total);


        $(this).val('Write a comment...');
        $(this).blur();
        growByRef(this);



      } else {

        var linesCount = 0;
        var lines = obj.value.split('\n');

        for (var i=lines.length-1; i>=0; --i)
        {
          linesCount += Math.floor((lines[i].length / colsDefault) + 1);
        }

        if (linesCount >= rowsDefault) {
          obj.rows = linesCount + 1;
        } else {
          obj.rows = rowsDefault;           
        }

            }

    }

        var characterWidth = function (obj){
            var characterWidth = 0;
            var temp1 = 0;
            var temp2 = 0;
            var tempCols = obj.cols;

            obj.cols = 1;
            temp1 = obj.offsetWidth;
            obj.cols = 2;
            temp2 = obj.offsetWidth;
            characterWidth = temp2 - temp1;
            obj.cols = tempCols;

            return characterWidth;
        }

        // Manipulations

        $(this).css("width","795");
        $(this).css("height","auto");
        $(this).css("overflow","hidden");

        this.style.width = ((characterWidth(this) * this.cols) + 6) + "px";

        $(this).bind("focus", onFocus);
        $(this).bind("blur", onBlur);
        $(this).bind("keypress", growByRef);
        $(this).bind("keyup", grow);

    });
};

Answer 1

Use CSS and define the width/height of the textarea

Take out the cols and rows tags and use CSS

Answer 2

Monospace fonts are, as the name suggests, the same width (character-wise) for every letter, number, etc. This means 113 cols will always be the same length, whereas most fonts' have a wider 'M' than 'I' making text vary in overall width.

Try specifying the width with a CSS width property instead. Also, don't forget nearly all input fields you find on the Internet like on here are in a monospace font.