Question

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" cellspacing="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!

Answer 1

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>