1

I am trying to develop an HTML newsletter and I am experiencing problems with alignment. I have two adjacent cells ("week" and "03/2013" with different font-size and they should be align to the bottom. Tha standard solution which renders well in browsers doesn't render well in Outlook 2007. So I used a heuristic percent value to align the cells and this works in Outlook. But it's no surprise that it doesn't work in iPhone/iPad. Does anybody know how to make it work on both?

Thanks a lot Here is my code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--[if gte mso 9]>
<style _tmplitem="50" >
.article-content ol, .article-content ul {
margin: 0 0 0 24px;
padding: 0;
list-style-position: inside;
}
</style>
<![endif]-->
<style type="text/css">
@media screen and (max-width: 610px) {
a[class=fabsize]{text-decoration:none;color:#00FF00}
}

.l-footer a {
color: #b2b2b2 !important; text-decoration: underline;
}
.l-footer a:link {
color: #b2b2b2 !important; text-decoration:  underline;
}
.l-footer a:visited {
color: #b2b2b2; text-decoration: underline;
}
.l-footer a:hover {
color: #b2b2b2; text-decoration: underline;
}
.l-footer a:active {
color: #b2b2b2;text-decoration: underline;
}

</style>
</head>
<body>
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td align="center" bgcolor="#FFFFFF" style="color: #6f6f6f; border: #6f6f6f;">
<!-- block preamble starts -->
<table class="l-preamble" border="0" cellpadding="0" cellspacing="0" width="600" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="has-border-bottom-1" height="16" width="600" style="color: #6f6f6f; border-bottom: 1px solid #6f6f6f;"></td>
</tr>
<!-- element preamble-info ends -->
<!-- element preamble-year starts -->
<tr>
<td class="has-border-bottom-5 w600" height="55" width="600" style="color: #6f6f6f; border-bottom: 5px solid #6f6f6f;">
<table border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w480 normal-text" height="29" width="474" border="1" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;"></td>
<td width="34" height="29" class="normal-text is-bold" style="vertical-align: bottom; color: #6f6f6f; font-weight: bold;  border: #6f6f6f; font-size: 12px; line-height: 115%;" valign="bottom">WEEK</td>
<td width="91" height="29" class="header" style="vertical-align: bottom; text-align: right; letter-spacing: -0.04em; color: #6f6f6f; font-size: 22px; text-transform: uppercase; font-weight: bold; border: #6f6f6f;" align="right" valign="bottom">03 / 2013</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Fabbio
  • 343
  • 2
  • 16

4 Answers4

0

Try set line-height of "week" to font size from date. (line-height: 22px;)

<td width="34" height="29" class="normal-text is-bold" style="vertical-align: bottom; color: #6f6f6f; font-weight: bold;  border: #6f6f6f; font-size: 12px; line-height: 22px;" valign="bottom">WEEK</td>

here: http://jsbin.com/anejax/1/

Or if u want all text aligned to bottom u have to set valign="bottom" in 

<td class="has-border-bottom-5 w600" height="55" width="600" style="color: #6f6f6f; border-bottom: 5px solid #6f6f6f;" valign="bottom">

here: http://jsbin.com/ipafoh/1/

Pavel
  • 412
  • 3
  • 6
  • Thanks for your reply, but your solution won't be displayed correctly in MS Outlook 2007 and also not on iPhone (try to open your link with IE and then click on File->Send as Email. In the email you receive the week text is 2 or 3 pixels too low.) – Fabbio Jun 14 '13 at 08:13
0

The title of the question says “to baseline”, but the text says “to the bottom”. And you are in fact using vertical-align: bottom.

I assume that you want baseline alignment. Then you should simply set vertical-align: baseline (and remove any code you might have added to try some heuristic – i.e., guesswork – adjustment to turn bottom alignment to baseline alignment).

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks for your reply! You are right, I confused the terms, now I corrected it. Anyway, also using baseline the table won't be displayed correctly in MS Outlook 2007 (try to open your link with IE and then click on File->Send as Email. In the email you receive the week text is 2 or 3 pixels too low.) – Fabbio Jun 14 '13 at 08:21
0

In email always use the html valign="bottom" to align anything to the bottom of a table cell.

Example:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="100" width="300" valign="bottom" style="font-size:12px;" bgcolor="#959595">
      cell 1
    </td>
    <td height="100" width="300" valign="bottom" style="font-size:18px;" bgcolor="#858585">
      cell 2
    </td>
  </tr>
</table>
John
  • 11,985
  • 3
  • 45
  • 60
0

try this one. basically, put those texts in the same cell instead of two.

<table border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left;">
    <tr>
        <td height="29" width="474" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;"></td>
        <td align="right" height="29" width="126" style="color: #6f6f6f; font-weight: bold; font-size: 12px; line-height: 115%;">WEEK &nbsp;<span style="letter-spacing: -0.04em; color: #6f6f6f; font-size: 22px; text-transform: uppercase; font-weight: bold;">03 / 2013</span></td>
</tr>
</table>
hmhcreative
  • 495
  • 4
  • 9