<p>Here is the scenario: </p>

<p>I have a table with a margin-bottom of 19px. Below that I have a form that contains some fieldsets. One of them is floated right. The problem is that the margin-bottom is not getting the full 19px in IE7. I've gone through all of the IE7 css/margin/float bugs that I can think of and have tried remedies but have been unsuccessful. I have been googling for a while now and cannot find anything that is helping out. </p>

<p>Here is what I have tried. </p>

<ol>
<li>Wrapping the form or fieldset in an unstyled div. No apparent change.</li>
<li>Nixing the margin-bottom on the table and instead wrapping that with a div and giving it a padding-bottom of 19px. No apparent change.</li>
<li>Nixing the margin-bottom on the table and adding a div with a fixed height of 19px. No apparent change.</li>
<li>Putting a clear between the table and the fieldset.</li>
</ol>

<p>I know there are some others that I am forgetting, but those are the things I have tried out recently. This happens to each fieldset. </p>

<hr>

<p>I am using a reset style sheet and have a xhtml transitional doctype. </p>

<p><strong>Edit:</strong> I also have the IE7 web developer toolbar and Firebug. The style information for both browsers says that it has a margin-bottom: 19px; but it clearly is not for IE7.</p>

[{'answer_id': 15355, 'author': 'Orion Edwards', 'author_id': 234, 'author_profile': 'https://Stackoverflow.com/users/234', 'pm_score': 1, 'selected': False, 'text': '<p>Have you got a valid doctype? Otherwise IE7 renders in quirks mode which is basically IE5.5</p>\n'}, {'answer_id': 15356, 'author': 'eplawless', 'author_id': 1370, 'author_profile': 'https://Stackoverflow.com/users/1370', 'pm_score': 1, 'selected': False, 'text': '<p>I put together what you described there, and it\'s rendering properly for me. It\'s likely you have another style somewhere that\'s having an effect on your form, or your table. If you aren\'t doing so already, using a <a href="http://developer.yahoo.com/yui/reset/#code" rel="nofollow noreferrer">reset.css</a> file is extremely useful. If you want to see which styles are affecting a particular element, the <a href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="nofollow noreferrer">Web Developer Toolbar</a> for firefox has a handy Style Information command for seeing which styles (from which files/style blocks/inline styles) are being applied to it. You can activate it by pressing <code>Ctrl+Shift+Y</code>, or hitting <code>CSS -&gt; View Style Information</code></p>\n\n<p>Here\'s the code that worked for me in IE7:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"\r\n        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;\r\n    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;\r\n        &lt;head&gt;\r\n            &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;\r\n            &lt;title&gt;Test&lt;/title&gt;\r\n            &lt;style&gt;\r\n            #mytable {\r\n                margin-bottom: 19px;\r\n                border: solid green 1px;\r\n            }\r\n            \r\n            #myform {\r\n                border: solid red 1px; \r\n                overflow: hidden;\r\n            }\r\n            #floaty {\r\n                float: right; \r\n                border: solid blue 1px;\r\n            }\r\n            &lt;/style&gt;\r\n        &lt;/head&gt;\r\n        &lt;body&gt;\r\n            &lt;table id="mytable"&gt;\r\n                &lt;th&gt;Col 1&lt;/th&gt;\r\n                &lt;th&gt;Col 3&lt;/th&gt;\r\n                &lt;th&gt;Col 2&lt;/th&gt;\r\n                &lt;tr&gt;\r\n                &lt;td&gt;Val 1&lt;/td&gt;\r\n                &lt;td&gt;Val 2&lt;/td&gt;\r\n                &lt;td&gt;Val 3&lt;/td&gt;\r\n                &lt;/tr&gt;\r\n            &lt;/table&gt;\r\n            &lt;form method="post" action="test.html" id="myform"&gt;\r\n                &lt;fieldset id="floaty"&gt;\r\n                    &lt;label for="myinput"&gt;Caption:&lt;/label&gt;\r\n                    &lt;input id="myinput" type="text" /&gt;\r\n                &lt;/fieldset&gt;\r\n                &lt;fieldset&gt;\r\n                    &lt;p&gt;Some example content&lt;/p&gt;\r\n                    &lt;input type="checkbox" id="mycheckbox" /&gt;\r\n                    &lt;label for="mycheckbox"&gt;Click MEEEEE&lt;/label&gt;\r\n                &lt;/fieldset&gt;\r\n            &lt;/form&gt;\r\n        &lt;/body&gt;\r\n    &lt;/html&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 15408, 'author': 'Kevin', 'author_id': 40, 'author_profile': 'https://Stackoverflow.com/users/40', 'pm_score': 0, 'selected': False, 'text': '<p>I wouldn\'t know for sure without testing but try placing this between the table and the fieldset:</p>\n\n<pre><code>&lt;br style="clear:both;" /&gt;\n</code></pre>\n'}, {'answer_id': 19264, 'author': 'Jeremy', 'author_id': 2076253, 'author_profile': 'https://Stackoverflow.com/users/2076253', 'pm_score': 1, 'selected': False, 'text': '<p>If you remove the float from the element below the table, does the margin appear?</p>\n'}, {'answer_id': 5616270, 'author': 'mongo296', 'author_id': 512555, 'author_profile': 'https://Stackoverflow.com/users/512555', 'pm_score': 2, 'selected': False, 'text': '<p>if you have floated and unfloated elements, the only surefire way to ensure vertical space between them cross-browser is padding-top on the subsequent element.</p>\n'}, {'answer_id': 13267525, 'author': 'user64bit', 'author_id': 1552579, 'author_profile': 'https://Stackoverflow.com/users/1552579', 'pm_score': 2, 'selected': False, 'text': '<p>Replace <code>margin-bottom: 19px;</code> with <code>&lt;div/&gt;</code> with <code>height: 19px</code>. </p>\n\n<p>Remove CSS style for <code>margin-bottom</code> and insert <code>&lt;div/&gt;</code> with <code>height: 19px</code> between <code>&lt;table/&gt;</code> and <code>&lt;form/&gt;</code></p>\n\n<p>It solved this problem in my case.</p>\n\n<pre><code>&lt;table id="mytable"&gt;\n    &lt;tr&gt;\n        &lt;th&gt;Col 1&lt;/th&gt;\n        &lt;th&gt;Col 3&lt;/th&gt;\n        &lt;th&gt;Col 2&lt;/th&gt;\n    &lt;/tr&gt;\n    &lt;tr&gt;\n        &lt;td&gt;Val 1&lt;/td&gt;\n        &lt;td&gt;Val 2&lt;/td&gt;\n        &lt;td&gt;Val 3&lt;/td&gt;\n    &lt;/tr&gt;\n&lt;/table&gt;\n&lt;div style="height:19px;"&gt;&lt;/div&gt;\n&lt;form method="post" action="test.html" id="myform"&gt;\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/15326', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1797/']