CODEWITHSUNDEEP
html-emailemail-clientthunderbird
Justin Smith
Justin Smith

Reputation: 385

Thunderbird centers some cells, but not others

Content in a responsive email template needs to appear centred in Thunderbird. The template involves a couple of tables nested inside a main table. Content centers in one of the tables, but not in the others and I can't understand why. Here's what it looks like:

<style>

body {
    height: 100%;
    width: 100%;
}

.bodycontainer{
    max-width: 600px;
    padding: 15px 5px 15px 5px;
    display:block;
    line-height: 140%;
    color: #34282C;
}

</style>

<body>
    <table width="100%" style="table-layout: fixed; margin: 0 auto;">
        <tr>
            <td align="center">
                <table align="center" border="0" cellpadding="0" cellspacing="0" 
                style="padding: 5px 0; font-family: Helvetica, Arial, sans-serif; 
                font-size: 11px; color: #2e5a67; width: auto !important; 
                table-layout: fixed; margin: 0 auto;">
                    <tr>
                        <!-- This content will center -->
                        <td align="center"><a target="_blank" href="" 
                        style="font-family: Helvetica, Arial, sans-serif; 
                        font-size: 10px; color: #999; text-decoration: none;">
                        This content will center</a>
                        </td>
                    </tr>
                </table>
                <table class="bodyContainer" cellspacing="0" border="0" 
                align="center" width="600" style="max-width: 600px; table-layout: 
                fixed; margin: 0 auto;">
                    <tr>
                        <!-- This content WILL NOT center -->
                        <td align="center" style="padding:15px 0px 15px;"><a href="">
                        <img width="125" src="" 
                        alt="This image will NOT center" border="0"></a></td>
                    </tr>
                </table>
                <table class="bodyContainer" cellspacing="0" border="0" 
                align="center" width="600" style="padding-top: 15px;
                max-width: 600px; table-layout: fixed; margin: 0 auto;">
                    <tr>
                        <!-- This content will center -->
                        <td class="" align="center" style="padding:10px 0 20px;">
                        <a href="" 
                        target="_blank"><img src="" 
                        alt="This image will center" width="80" 
                        border="0"></a></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

Upvotes: 0

Views: 370

Answers (1)

Gortonington
Gortonington

Reputation: 3587

The issue is the "Display:Block" in your head stylesheet. Display block will force the element to be a block element. Block elements width is based on the child content's size and also defaults to a sort of 'float:left' and there is no easy way to overwrite this. Your best bet is to remove this from the stylesheet.

If you need to include display:block inside your email template(e.g. sliced images, background colors, etc), I would use it sparingly and keep in mind that the element you place it on will be changed as stated above.

Upvotes: 1

Related Questions