CODEWITHSUNDEEP
htmlcssblackberryhtml-emailemail-templates
jsuissa
jsuissa

Reputation: 1762

Getting table/text to center in Blackberry OS5 HTML email

We're trying to see why the table and text below won't center with the Blackberry OS5. We've tried giving the table a width and a number of other tricks and workarounds. All the other clients are now working as intended.

In addition to the code sample I've included a link to our Litmus test which includes the HTML code too.

Update:

Tried a number of variations on the answers below and can't get the table to center, only it's content on BB 5OS. As a demo isolation there's no problem getting the table centered along with its contents, but not within the email.

My goal with the email design was to preserve relative sizing so this works on devices that don't read media queries. So this can be solved easily, but not without negatively impacting the other clients where it's currently centering correctly.

Updated Code Excerpt 10/20/2013:

  <td height="50" align="center"  bgcolor="#5900FF" style="border-collapse:collapse; text-align:center;">
    <center>
    <div style="display: table; text-align:center;"  >

      <table width="100%"  bgcolor="#FF0004" border="0" align="center" cellpadding="0" cellspacing="0" class="center-type table-greetings" style="display: table; text-align:center;" >


        <tbody style="text-align: center; ">
          <tr>
            <td height="40" align="center" class="center-type" valign="top" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal; text-align:center; display:block;"><font face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" size="3" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">Wrap Up Your</font></td>
          </tr>
          <tr>
            <td align="center" class="center-type" style="font-size: 29px; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; text-align:center; margin: 0 auto;"><font size="5" face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" style="font-size: 29px !important; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;  font-weight: bold;">HOLIDAY GREETINGS</font></td>
          </tr>
          <tr>
            <td height="40" align="center" class="center-type" valign="bottom" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal; text-align:center;  margin: 0 auto;"><font face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" size="3" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">Early This Year</font></td>
          </tr>
        </tbody>
      </table>

      </div>
    </center>
  </td>

Updated Litmus Test 10/20/2013: https://litmus.com/pub/bce8f62

Upvotes: 3

Views: 772

Answers (3)

doowan
doowan

Reputation: 109

It could be your line height so I took it out and I think it worked...
or that your <td> is outside your table.. or just wrap the hole body with center.. if none of those work let me know I will look at the code more thoroughly and try to fix it for you 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body align="center">
    <center>
        <td height="50" align="center"  bgcolor="#5900FF" style="border-collapse:collapse; text-align:center;">
            <div style="display:block; text-align:center;"  >
                <center>
                    <table bgcolor="#FF0004" border="0" align="center" cellpadding="0" cellspacing="0" class="center-type table-greetings" style="display: table; text-align:center;" >
                        <tbody style="text-align: center; ">
                            <tr>
                                <td height="40" align="center" class="center-type" valign="top" style="color: #ffffff; line-height: 30px; font-size: 29px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal; text-align:center; display:block;"><font face="'raleway',Futura,' Gill Sans','Gill Sans MT', Calibri, sans-serif;" size="3" style="  color: #ffffff; font-size: 29px;font-family: 'raleway',Futura,' Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;"> Wrap Up Your</font></td>
                            </tr>
                            <tr>
                                <td align="center" class="center-type" style="font-size: 29px; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-family: 'raleway',Futura,'Gill Sans',' Gill Sans MT', Calibri, sans-serif; text-align:center; margin: 0 auto;"><font size="5" face="'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;" style="font-size: 29px !important; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-family: 'raleway',Futura,'Gill Sans',' Gill Sans MT', Calibri, sans-serif;  font-weight: bold;">HOLIDAY GREETINGS</font></td>
                            </tr>
                            <tr>
                                <td height="40" align="center" class="center-type" valign="bottom" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura, 'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal; text-align:center;  margin: 0 auto;"><font face="'raleway',Futura,'Gill Sans',' Gill Sans MT', Calibri, sans-serif;" size="3" style="color: #ffffff; line-height: 30px; font-size: 29px;font-family: 'raleway',Futura,' Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">Early This Year</font></td>
                            </tr>
                        </tbody>
                    </table>
                </center>
            </div>
        </td>
    </center>
</body>
</html>

Upvotes: 3

John
John

Reputation: 12193

I know you mentioned it, but you do need a set width on your table. Also, remove the margin 0 auto as it may mess things up.

If that doesn't work, try temporarily adding bgcolor to each element and test to debug which is not expanding. To center something, the parent element has to be full width, so identifying what is not going full-width will help pinpoint the issue.

UPDATE:

Why not just do something simple like this?

<td width="600">
  <table width="100%" border="0" cellpadding="0" cellspacing="0"  bgcolor="#FF0004">
    <tr>
      <td align="center" style="color: #ffffff; line-height: 30px; font-size: 29px; font-family: 'raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: normal;">
Wrap Up Your<br>
<font style="font-size: 29px; color: #F38B00; line-height: 36px; letter-spacing : 11px; font-weight: bold;">HOLIDAY GREETINGS</font><br>
Early This Year
      </td>
    </tr>
  </table>
</td>

I didn't test it, but, unless I'm missing something, it is a pretty straight forward centering.

Upvotes: 3

Vale
Vale

Reputation: 1031

I could be misreading, but couldn't you just add center tags around it all? If not try putting it in a div, displaying it as a block, and then setting the margin to zero.

Or you might also be able to just assign it say left: 50%, top:50% and that would also center it I believe.

Sorry if I'm making myself sound like an idiot, I might have misread, but if I didn't I think that should help.

Upvotes: 1

Related Questions