weird space in IE - Any suggestions?

The below table is the only element inside a body tag - This displays fine in Firefox 3 as i expect it to be but it does not look good in IE7. There is a weird space just between the nested table and the row above. Can you please suggest some way to remove that weird space? - Thanks

<table>
    <tr>
        <td colspan="14">
        <div>
        <table id="value_table" width="100%" border="0" cellspacing="0" cellpadding="2" style="border-collapse: collapse; display: block">
            <tr>
                <td height="20" align="center" valign="Middle" class="Header">
                <div align="left"><b>  Search Relationships</b></div>
                </td>
            </tr>
            <tr>
            <td>This is working</td>
            </tr>
            <tr valign="top">
                <td>second row</td>
                <td nowrap="nowrap" class="GrayRow" valign="top" border="1" height="40" align="center" style="border: none">
                just above the table
                <table border="1" cellpadding="0" cellspacing="0" align="left">

                    <tr valign="top">
                        <td>new row inside table</td>
                        <td class="GrayRow" nowrap="nowrap"> <b>Select:</b>   <select id="j_id19:browseType" name="j_id19:browseType" size="1" class="TextBlackNormal" onchange="showDynamicBox(this);">    <option value="NAME开发者_运维知识库">User Name</option> <option value="ID">User Id</option> <option value="IBD/Office/IP">IBD/Office /IP</option>   <option value="APA#">APA#</option></select>    </td>
                        <td>
                        <div id="dynamicBox1" style="display: block"><input id="j_id19:j_id23" name="j_id19:j_id23" type="text" value="" size="32" class="TextBlackNormal" /></div>
                        </td>
                           
                        <td>
                        <div id="dynamicBox2" style="display: none"><input id="j_id19:j_id25" name="j_id19:j_id25" type="text" value="" size="32" class="TextBlackNormal" /></div>
                        </td>
                           
                        <td>
                        <div id="dynamicBox3" style="display: none">
                        IBD   <input id="j_id19:ibdval1" name="j_id19:ibdval1" type="text" value="" maxlength="3" size="3" onkeyup="goToNextFocus(this);" class="TextBlackNormal" />   
                        OFF   <input id="j_id19:ibdval2" name="j_id19:ibdval2" type="text" value="" maxlength="3" size="3" onkeyup="goToNextFocus(this);" class="TextBlackNormal" />   
                        IP    <input id="j_id19:ibdval3" name="j_id19:ibdval3" type="text" value="" maxlength="3" size="3" onkeyup="goToNextFocus(this);" class="TextBlackNormal" />
                        </div>
                        </td>
                           
                        <td>
                        <div id="dynamicBox4" style="display: none">
                        Average Price Account#    <input id="j_id19:apaval1" name="j_id19:apaval1" type="text" value="" maxlength="3" size="3" onkeyup="goToNextFocus(this);" class="TextBlackNormal" />  <input id="j_id19:apaval2" name="j_id19:apaval2" type="text" value="" maxlength="3" size="3" onkeyup="goToNextFocus(this);" class="TextBlackNormal" />  <input id="j_id19:apaval3" name="j_id19:apaval3" type="text" value="" maxlength="3" size="3" onkeyup="goToNextFocus(this);" class="TextBlackNormal" />
                        </div>
                        </td>
                              
                        <td class="GrayRow" nowrap="nowrap">
                        <div id="msg_multiple_inputs" style="display:none">
                        <font color="#990000" size="1">Enter multiple separated by
                        commas   </font>
                        </div>
                                                         
                        </td>
                        <td><input id="j_id19:display" name="j_id19:display" type="submit" value="Display" class="TextBlackNormal" /></td>
                    </tr>
                </table>
                </td>
            </tr>
        </table>
        </div>
        </td>
    </tr>

</table>

---

This is one of many of IE's layout bugs, which are irritating to fix. I can suggest a few things...

• Set the containing cell's padding-top to 0em
• Set the nested table's margin-top to 0em

---

The first thing that comes to my mind is: cellpadding/cellspacing. Try setting each to 0.

---

Add cellspacing,cellpadding and border as 0 to your top table.