I’m coding a windows program which is a WYSIWYG form generator.
In a very simple test I placed a fieldset and dropped a checkbox and a text input field onto it.
The generated HTML looks fine when I read it, but it displays wrongly in Firefox, MSIE & K-meleon (which I think has an FFF engine). The fieldset height does no seem to be rendering correctly.
I also tried removing the height attribute to see if the fieldset would wrap around its child controls, but it looked the same in the browser. Probably a mistake in my HTML, I guess, but I can’t spot it…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<form action="C:\temp\aa.php" method="get">
<div class="TGroupBox" id="GroupBox1" style="position: absolute; top:32px; left:32px; width: 185px; height: 105px;">
<fieldset>
<legend>GroupBox1</legend>
<div class="TCheckBox" id="CheckBox1" style="position: absolute; top:24px; left: 16px; width: 97px; height: 17px;"><input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div>
<div class="TEdit" id="Edit1" style="position: absolute; top:64px; left: 16px; width: 121px; height: 21px;"><input type="text" name="Edit1"></div>
</fieldset>
</div>
</form>
</body>
</html>
That’s because elements inside your fieldset are all absolutely positioned, and out of content flow. Fieldset just collapses to empty content.
So you need to manually set fieldset’s height to 105px (equal to parent div’s height).