Trouble w/ clearing floated input fields in IE 7

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

I'm trying to create a tableless layout for a form. The following
markup works as intended in Firefox and Opera, but one of IE 7's bugs
ends up misplacing the floated input fields side-by-side even though I
have a "clear: left" declaration. I'd like to avoid changing the
markup itself, if possible, and find a pure-CSS means to fixing the

Many thanks for any help!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://">
<html xmlns=" ">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Form</title>
<style type="text/css">

label {
    float: left;
    width: 6em;
    clear: left;
    margin-right: 0.25em;

    text-align: right;

textarea {
    float: left;
    width: 15em;



<form method="post">
<label for="name" class="required">Name:</label><input type="text"
id="name" name="name" />
<label for="pw" class="required">Password:</label><input
type="password" id="pw" name="pw" />
<label for="prompt">Message:</label><textarea id="prompt"
<label for="file">File:</label><input type="file" id="file"
name="file" />


Site Timeline