Question

I had a table on a site on one web host and it looked fine, now I moved to another host and the table is screwed up

HTML:

<div class="right">
<table>
<tbody>
<tr>
    <tdcolspan="3">
        <img alt="" src="../App_Themes/image1.png">
    </td>
</tr>
<tr>
    <td>
        <img  alt="" src="../App_Themes/image2.png">
    </td>
    <td>
        <iframe class="iframe" scrolling="no" frameborder="0" allowtransparency="yes" src="site.com">
        Your browser does not support iframes
        </iframe>
    </td>
    <td>
        <img alt="" src="../App_Themes/image3.png">
    </td>
</tr>
<tr>
    <td colspan="3">
        <img alt="" src="../App_Themes/image4.png">
    </td>
</tr>
</tbody>
</table>
</div>

What’s happening is that there’s a (approx) 2px gap between the rows and I can’t understand why, I tried with the following CSS but with no luck:

.right tr td {padding: 0; margin:0px;}
.right tr {border-spacing: 0px; padding:0px; margin:0px;}

The images forms a border around the iframe and image 1 is 2px above 2 and 3, image 4 is 2px below image 2 and 3.

How can something simple like this break just because I move to another host?

Answer 1

Try adding this to your CSS:

table { border-collapse: collapse; }