Why is there a white bar above and below my iframe?

I am trying to place an iframe in an area that depicts rounded borders. In an effort to do this, I'm using an HTML table. My content displays as I want, but there is a white bar above and below the iframe. I'm not sure why this is happening. Here is my code:

<table border="0" cellpadding="0" cell开发者_如何学Cspacing="0" style="width:640px;">
  <tr>
    <td style="height:12px; width:12px; vertical-align:top; background-color:white; font-size:6pt;"><img alt="" src="c1.png" style="width:12px; height:12px; vertical-align:top;" /></td>
    <td class="height:12px; vertical-align:top;"><div style="background-color:silver; height:12x;">&nbsp;</div></td>
    <td style="height:12px; width:12px; vertical-align:top; background-color:white; font-size:8pt;"><img alt="" src="c2.png" style="width:12px; height:12px; vertical-align:top;" /></td>
  </tr>
  <tr>
    <td style="background-color:silver; font-size:6pt;">&nbsp;</td>
    <td style="background-color:silver; font-size:6pt;"><iframe id="myIframe" frameborder="0" style="border:0px; overflow:visible; width:100%;" width="100%" src="/Test.aspx" scrolling="no"></iframe></td>
    <td style="background-color:silver; font-size:6pt;">&nbsp;</td>
  </tr>
  <tr>
    <td style="background-color:silver; font-size:6pt;"><img alt="" src="c3.png" 
      style="width:12px; height:12px; vertical-align:bottom;" /></td>
    <td style="background-color:silver; font-size:6pt;">&nbsp;</td>
    <td style="background-color:silver; font-size:6pt;"><img alt="" src="c4.png"    
      style="width:12px; height:12px; vertical-align:bottom;" /></td>
  </tr>
</table>

Can somebody tell me how to get rid of the white bars? Thanks!

I think the problem is that in your middle cell, your "text" (the non-breaking space) is taller than the row height should be.

Also, you have one class attribute instead of style.

Would this simplified code work for you? If I understand correctly what your intention is...

<table style="border-collapse: collapse; width:640px;" cellpadding="0">
  <tr>
    <td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c1.png" style="width:12px; height:12px;" /></td>
    <td style="background-color: silver; height:12px;"></td>
    <td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c2.png" style="width:12px; height:12px;" /></td>
  </tr>
  <tr>
    <td style="background-color: silver;"></td>
    <td style="background-color: silver;"><iframe id="myIframe" style="border: none; overflow:visible; width:100%;" src="/Test.aspx" scrolling="no"></iframe></td>
    <td style="background-color: silver;"></td>
  </tr>
  <tr>
    <td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c3.png" style="width:12px; height:12px;" /></td>
    <td style="background-color: silver; height:12px;"></td>
    <td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c4.png" style="width:12px; height:12px;" /></td>
  </tr>
</table>

I recommend using Firebug in Firefox (or the "Elements" developer tool in Chrome) to inspect your html elements and see which element is occupying that space. It's also helpful for questions like these if you could list what browser(s) show the issue. It's probably better suited to doctype.com as well.