Textarea resize vertical in ie

Question

How do i resize my textarea vertically in IE?

I did resize: vertical and it works well in Firefox but in IE it doesn't work. So what's the alternative for this?

Also, if I want to print the page, then I need the textarea to extend and print the whole contents in the box. What should I use for this?

edited -

My CSS:

@media screen {
    textarea {
        resize: vertical;
        overflow: auto;
        border: 1px #999999 solid;
        padding: 6px;
        background: #ffffff url('../images/field_bg.png') repeat-x bottom;
        width: 400px;
        height: 100px;
    }
}
@media print {
    textarea {
        border: 1px #999999 solid;
        padding: 6px;
        background-color: #ffffff;
        background-image : none;
        width: 400px;
        height: auto;
        overflow: visible;
    }
}
.field {
    display: inline;
    vertical-align: top;
    width: 25%;
}

HTML -

<div class="field">
<textarea id="xp">
some text here
</textarea> 
</div>

Edited -

I still can't figure out the solution for this. Can anybody help please?

Answer 1

The css resize property is not (yet) supported by IE. You may want to try this jquery ui plugin: http://jqueryui.com/demos/resizable/. Here's a fiddle to demonstrate.

For your second question regarding printing in IE. Try add the following CSS to the media="print" block:

textarea {
    overflow: visible;
}