views:

349

answers:

2

I am using YUI reset and jquery AutoGrow together on the same site. It works fine on firefox, but IE 7 behaves badly. The textarea grows way to big with even a small amount of text in it.

Below is an example that demonstrates the problem. If I comment out the reset stylesheet, the autogrow behaves properly.

I am hoping there is some simple css that I can override that will fix this. I am way to far into this project to switch away from YUI reset.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.aclevercookie.com/files/jquery.autogrow.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("textarea").autogrow();
        });
    </script>
    <style type="text/css">
        textarea
        {
            width: 99%;
            line-height: 18px;
        }
    </style>
</head>
<body>
    <textarea>abc</textarea>
    <textarea>this quantity of text should not cause the textarea to grow yet.</textarea>
</body>
</html>
A: 

I had this same problem in IE8, but rather than it being related to YUI reset, it seemed to be YUI fonts causing the problem.

Fixed it by setting font-size to 1em. Give that a go.

Forbes
A: 

Thank. Putting 1em worked perfect for me.

dperezrada