IE7 HTML/CSS margin-bottom bug

Question

Here is the scenario:

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.

Here is what I have tried.

1. Wrapping the form or fieldset in an unstyled div. No apparent change.
2. 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.
3. Nixing the margin-bottom on the table and adding a div with a fixed height of 19px. No apparent change.
4. Putting a clear between the table and the fieldset.

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.

---

I am using a reset style sheet and have a xhtml transitional doctype.

Edit: 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.

Answer 1

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.

Answer 2

Replace margin-bottom: 19px; with <div/> with height: 19px.

Remove CSS style for margin-bottom and insert <div/> with height: 19px between <table/> and <form/>

It solved this problem in my case.

<table id="mytable">
    <tr>
        <th>Col 1</th>
        <th>Col 3</th>
        <th>Col 2</th>
    </tr>
    <tr>
        <td>Val 1</td>
        <td>Val 2</td>
        <td>Val 3</td>
    </tr>
</table>
<div style="height:19px;"></div>
<form method="post" action="test.html" id="myform">

Answer 3

Have you got a valid doctype? Otherwise IE7 renders in quirks mode which is basically IE5.5