Why does my contact form render incorrectly on windows browsers?

Question

I have created a contact form on the contact us page of a website I am building. Mac browsers render it properly, so does IE7 AND IE8 on Windows.

FF, Chrome and Safari have issues with spacing on the Windows platform. My code is listed below;

<form action="" method="post">
    <fieldset id="fs1">
        <div id="formLeftCol">
            <ol>
                <li>
                    <label for="name">Your Name*</label> 
                </li>
                <li>
                    <input id="name" name="name" type="text" />
                </li>
                <li>
                    <label for="email">E-mail*</label>
                </li>
                <li> 
                    <input id="email" name="email" type="text" />
                </li>
                <li>
                    <label for="website">Website</label> 
                </li>
                <li>
                    <input id="website" name="website" type="text" />
                </li>
                <li>
                    <input type="submit"name="submit" value="SUBMIT" />
                </li>
            </ol>
        </div>
        <div id="formRightCol">
            <ol>
                <li>
                    <label>Your Message*</label> 
                </li>
                <li>
                    <textarea name="message" cols="40" rows="7">
                        Please leave us a message...
                    </textarea>
                </li>
            </ol>
        </div>
    </fieldset>
</form>

Now the CSS:

#formLeftCol, #formRightCol {
    float: left;
}
#formLeftCol {
    width: 150px;
}
#formRightCol {
    width: 473px;
    margin-left: 15px;
}
input, textarea {
    background: #f9f9f9;
    border: 1px solid #c1c1c1;
    font-family: Helvetica, Arial, sans-serif;
    color: #818181;
    margin: 10px 0;
    padding: 10px;
}
fieldset {
    padding: 15px;
} 
textarea {
    width: 451px;
}
#fs1 {
    border: 1px solid #c1c1c1;
}

The textarea will not space itself accordingly, it's too wide on these browser, but every other one works.

Thanks

Answer 1

Your problem is in the CSS for sure. I'm not sure what you've got going on with OSX, but I see the issue in a bunch of browsers on Windows (IE, FF, Chrome).

Try specifying a width for your inputs via CSS:

input {
    width:141px;
}

That seems to give the effect I'm imagining you want: http://jsfiddle.net/P5jkJ/1/