Menu
I have only the following form inside the body of my page, with nothing else.
Basically it consists of a few input boxes with labels in front, inside divs.
For some reason in IE only (IE7) the fieldset cuts of the divs and make the input boxes wrap to the next line, even though there is still enough space left on the right hand side. This happens with all divs EXCEPT the first.
As I increase the width of the outside div from 600px to say 800px then the input boxes start flowing as they should.
What is going wrong here?
[CODE]
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!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>
<style type=”text/css” >
/* The container div */
div.text_input {
margin:2px;
float:left;
clear:left;
overflow:hidden;
height:26px;
margin-right:0px;
}
/* The label */
div.text_input label {
display:block;
float:left;
min-width:150px;
font-size:10pt;
font-weight:bold;
}
/* The input box */
div.text_input input, div.text_input select{
display:block;
float:left;
width:180px;
}
div.text_input input[type=file] {
width:225px;
}
</style>
</head>
<body>
<div style=”width:600px;” id=”details_panel” class=”panel_body”>
<form>
<fieldset><legend>Upload New Picture</legend>
<input type=”hidden” name=”form_type” value=”picture” /><input type=”hidden” name=”id” value=”new” />
<div class=”text_input”>
<label>A label:</label><input type=”text” value=”Some Text” />
</div>
<div class=”text_input”>
<label>Another label:</label>
<select>
<option>Some Option that is quite long</option>
</select>
</div>
<div class=”text_input”>
<label>Yet another label:</label>
<input type=”file” />
</div>
</fieldset>
</form>
</div></body></html>