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.
精彩评论