CODEWITHSUNDEEP
htmlhtml-email
Joe Isaacson
Joe Isaacson

Reputation: 4132

Table row on top of columns

The text I have on top in the table row is somehow affected by the second column below it..cant seem to have it take up the entire width of the table.

http://jsfiddle.net/PmWBw/2/

Sorry I know I am the only one still working in tables. HTML emails still exist.

 <table width="800" class="bodyContent" style="border: 1px solid #b8b7b7;margin-bottom: 20px;">

            <table> 
                 <tr style="width: 800px;">TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT</tr>
            </table>


            <td valign="top" width="260" class="leftColumnContent">

                <table border="0" cellpadding="20" cellspacing="0" width="100%">
                    <tr mc:repeatable>
                        <td valign="top">
                            <img src="http://www.homeplan.com/newsletter/images/top_left.png" mc:label="image" mc:edit="tiwc300_image00" />
                        </td>
                    </tr>
                </table>
            </td>


            <td valign="top" width="260" class="rightColumnContent">

                <!-- // Begin Module: Top Image with Content \\ -->
                <table border="0" cellpadding="20" cellspacing="0" width="100%">
                    <tr mc:repeatable>

                        <td valign="top">

                            <img src="http://www.homeplan.com/newsletter/images/top_right.png" mc:label="image" mc:edit="tiwc300_image01" />

                        </td>
                    </tr>

                </table>  
            </td>                  
</table>

Upvotes: 0

Views: 205

Answers (2)

Mike
Mike

Reputation: 1544

For starters, your first row consists of a td inside a tr that's inside ANOTHER td. If nothing else, that should probably be addressed.

Also, a bit unrelated to you original question, but it seems a bit redundant to have tables inside of your cells, when I'm not seeing any real benefit or function gained by the added code. You're styling your inner tables with the same things you can be applying to either the td or the image itself. At least in this particular application.
Just a thought.

UPDATED:

<table width="600" class="bodyContent" style="border: 1px solid #b8b7b7;margin-bottom: 20px;">
    <tr>
        <td colspan="2">
            <table>
                <tr style="width: 600px;">
                    <td>TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT</td>
                </tr>
            </table>
        </td>
    </tr>

    <tr>
        <td valign="top" width="260" class="leftColumnContent">
            <table border="0" cellpadding="20" cellspacing="0" width="100%">
                <tr mc:repeatable>
                    <td valign="top">
                        <img src="http://www.homeplan.com/newsletter/images/top_left.png" mc:label="image" mc:edit="tiwc300_image00" />
                    </td>
                </tr>
            </table>
        </td>

        <td valign="top" width="260" class="rightColumnContent">
            <!-- // Begin Module: Top Image with Content \\ -->
            <table border="0" cellpadding="20" cellspacing="0" width="100%">
                <tr mc:repeatable>
                    <td valign="top">
                        <img src="http://www.homeplan.com/newsletter/images/top_right.png" mc:label="image" mc:edit="tiwc300_image01" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Upvotes: 3

mrbackman
mrbackman

Reputation: 51

First of all, you can not have the code looking like this:<td><tr><td>asdf</td></tr></td>. It the <tr> needs to be wrapped by <table>.

Upvotes: 0

Related Questions