search

foundation / foundation-emails

Quickly create responsive HTML emails that work on any device and client. Even Outlook.
https://get.foundation/emails/docs/
MIT License
7.77k stars 1.09k forks source link

Yahoo Mail don't respect vertical align. #571

Open GBratsos opened 8 years ago

GBratsos commented 8 years ago

How can we reproduce this bug? Check the code below or try to have a fixed height with middle vertical alignment to content.

Write out the HTML (or Inky code) that causes the issue. <th class="callout-inner" style="Margin:0;background:#fff;border:0;color:#000;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:400;height:205px;line-height:19px;margin:0;padding:0 23px;text-align:left;vertical-align:middle;width:100%"><h3 class="small-text-center" style="Margin:0;Margin-bottom:0;color:inherit;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:400;line-height:1.3;margin:0;margin-bottom:0;padding:0;text-align:left;word-wrap:normal">Emails Send. <span>24</span></h3></th>

What did you expect to happen? Should be aligned middle

What happened instead? It is stuck on top.

What email clients does this happen in? YahooMail

stevesmename commented 8 years ago

I'm currently stuck on this too. Got all other major clients passing in litmus.

stevesmename commented 8 years ago

Just resolved this, needed vertical-align:middle; as css in addition with valign="middle" on the element. The CSS needs to apply to the desired table.container and also to the table.columns.

Zurb is setting vertical-align:top on the table, you need to override it (specifically in two different spots).

Quick code solution:

<container valign="middle" style="vertical-align:middle;">
  <row height="70">
    <columns small="12" large="8" valign="middle" height="70" style="vertical-align:middle;">
      ...stuff here....
    </columns>
    <columns small="12" large="4" height="70">
      ...stuff here...
    </columns>
  </row>
</container>
tdhartwick commented 8 years ago

Nice solution @stevesmename. On our radar to fix! We'd love to see a PR if you're up for the challenge.

andy-meixner commented 6 years ago

Thanks @stevesmename! I agree that this should be addressed, perhaps by just having a single attribute you can set on the columns element you want vertically aligned specifically.

thavus commented 7 months ago

It's 6 years later and this is still a bug. Except now, it doesn't seem to work even if you add valign="bottom" and style="vertical-align: bottom;" to the column. So it became worse?