CODEWITHSUNDEEP
htmlhtml-table
3Dom
3Dom

Reputation: 805

Why does td width get ignored and instead become 100%?

Ok, this is making me absolutely furious. There doesn't seem to be anything wrong with this code, but for some reason, renders the 1st td out at 100% of the available width of the table, and the remaining td's just push and expand the width of the table. Anyone? If you want to see the full thing, check here. It's driving me f...ing crazy. this is what happens

    <!-- FOOTER -->
<tr width="630" align="left" height="65" bgcolor="#322e39">

<!-- TEASERS -->
<td width="137" height="65" bgcolor="#322e39">
<img src="http://www.webedgemarketing.info/dev/msa/images/em-ft-tease-1.png" width="137" height="65"/>
</td>

<td width="125" height="65" bgcolor="#322e39">
<img src="http://www.webedgemarketing.info/dev/msa/images/em-ft-tease-2.png" width="125" height="65"/>
</td>

<td width="128" height="65" bgcolor="#322e39">
<img src="http://www.webedgemarketing.info/dev/msa/images/em-ft-tease-3.png" width="128" height="65"/>
</td>

<!-- SOCIAL MEDIA ICONS -->

<td width="53" height="65" bgcolor="#322e39">
<img src="http://www.webedgemarketing.info/dev/msa/images/em-ft-sm-fb.png" width="53" height="65"/>
</td>

<td width="60" height="65" bgcolor="#322e39">
<img src="http://www.webedgemarketing.info/dev/msa/images/em-ft-sm-yt.png" width="60" height="65"/>
</td>

<!-- UNSUBSCR. AND MANAGE -->
<td width="127" height="65">
<a href="#" style="text-decoration:none;">
<font face="Arial" size="1" color="#cfccd3">
Manage My Account
</font>
</a>
<br/>
<a href="#" style="text-decoration:none;">
<font face="Arial" size="1" color="#cfccd3">
Unsubscribe
</font>
</a>
</td>

</tr>

Upvotes: 3

Views: 753

Answers (1)

Krish
Krish

Reputation: 2660

The issue is because you put the footer also in a same table use a separate table like this

<table>
<!-- start email content-->
</table>

separate the tables

    <table>
    <tr align="left" height="65" bgcolor="#322e39">

    <!-- TEASERS -->
    <td width="137" height="65" bgcolor="#322e39">
    <img src="http://www.webedgemarketing.info/dev/msa/images/em-ft-tease-1.png" width="137" height="65">
    </td>

    <td width="125" height="65" bgcolor="#322e39">
    <img src="http://www.webedgemarketing.info/dev/msa/images/em-ft-tease-2.png" width="125" height="65">
    </td>

    <td width="128" height="65" bgcolor="#322e39">
    <img src="http://www.webedgemarketing.info/dev/msa/images/em-ft-tease-3.png" width="128" height="65">
    </td>

    <!-- SOCIAL MEDIA ICONS -->

    <td width="53" height="65" bgcolor="#322e39">
    <img src="http://www.webedgemarketing.info/dev/msa/images/em-ft-sm-fb.png" width="53" height="65">
    </td>

    <td width="60" height="65" bgcolor="#322e39">
    <img src="http://www.webedgemarketing.info/dev/msa/images/em-ft-sm-yt.png" width="60" height="65">
    </td>

    <!-- UNSUBSCR. AND MANAGE -->
    <td width="127" height="65">
    <a href="#" style="text-decoration:none;">
    <font face="Arial" size="1" color="#cfccd3">
    Manage My Account
    </font>
    </a>
    <br>
    <a href="#" style="text-decoration:none;">
    <font face="Arial" size="1" color="#cfccd3">
    Unsubscribe
    </font>
    </a>
    </td>

    </tr>
    </table>

Upvotes: 1

Related Questions