Trouble w/ clearing floated input fields in IE 7

**clumsy_ninja** · Jun 27 '08, 07:15 PM

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
problem.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;
}

input[type="text"],
input[type="password"],
input[type="file"],
textarea {
float: left;
width: 15em;
}

</style>
</head>

<body>

<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"
name="prompt"></textarea>
<label for="file">File:</label><input type="file" id="file"
name="file" />

</form>
</body>
</html>