IE Incompatibility with form css styling

The source code is like this:

<div id="contact">
                <div class="form">
                    <form action="contact.php" method="post" name="contact-us">
                         <div class="right">
                            <div class="labeled">
                                <label for="text">body</label>
                            </div>
                            <textarea id="text" name="text" cols="20" rows="5"></textarea>
                        </div>
                    </form>
                </div>
            </div>

And this is css block for textarea and related objects :

div.right {
float: right;
margin: 5px 0;
}

div.labeled {
width: 150px;
float: right;
}

div.right div.form textarea#text, textarea#text {
background: #A2A2A2;
border: 1px solid #811D1D;
height: 50px;
margin-right: 20px;
width: 220px;
color: #FFFFFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
}

in FF all things are correct but in IE the textarea hasn't been styled 开发者_运维知识库and remains Intact. You can see difference in below image too :

Also as you can see the label tag styled true in FF and remains intact in IE! How could I fix these?

Regards...

Not all versions of IE support the textarea styling.

In your code, the textarea is within the div that floats right. Seems like you're asking for odd behaviour. Better float the 'labeled' div (or rather remove that div and do some trickery on the label itself).

http://jsfiddle.net/KzYgt/

overflow: auto; - for the scrollbar

Styling form elements is a serious hell since most of the controls are styled by OS and browser and those styles are hard to override, in some cases impossible. You should however be able to achieve the background color and scrollbar disappearing.

Are you certain there is no other element with the id "text" on your page?

A good overview of what's possible with css for textarea styling can be found here: http://www.456bereastreet.com/lab/styling-form-controls-revisited/text-input-multiple/#ie6-xp

Solved! There was just this css block on page's header :

div.form input[type="submit] {
padding: 2px;
background: #A2A2A2;
border: 1px solid #811D1D;
color: #000000;
height: 20px;
}

And As you see there is one lost quotation mark at [type="submit"]. IE couldn't correct code but other browsers do that! This was the problem

P.s: Special thanks to @Bakudan for introducing jsfiddle Online Editor

Regards...