foundation-emails icon indicating copy to clipboard operation
foundation-emails copied to clipboard
verified publisher icon foundation

issue with padding shorthand and styles order

Open lekoala opened this issue 9 years ago • 4 comments

Hi,

I've been having an issue with using version 2.2.1 of Foundation Emails. Basically, my problem is that Foundation use a padding reset (padding:0) for many elements, like rows, and then overrides the padding with specific paddings (padding-left:16px, ...). Although that seems fine at first, on my gmail email client, styles order are not respected and padding:0 is put at the end, therefore removing padding for my rows.

my original html:

<th class="small-12 large-12 columns first last" style="color: #0a0a0a; font-family: Helvetica,Arial,sans-serif; font-weight: 400; padding: 0; margin: 0 auto; text-align: left; line-height: 1.3; font-size: 16px; padding-left: 16px; padding-bottom: 16px; width: 564px; padding-right: 16px;" width="564">

in my gmail mailbox becomes:

<th class="m_5132593009271789122small-12 m_5132593009271789122large-12 m_5132593009271789122columns m_5132593009271789122first m_5132593009271789122last" style="line-height:1.3;color:#0a0a0a;font-weight:400;padding-left:8px;font-size:16px;width:564px;text-align:left;padding-right:8px;padding-bottom:16px;font-family:Helvetica,Arial,sans-serif;margin:0 auto;padding:0">

notice the padding:0 at the end.

an easy fix is to replace all "padding:0" declaration by the full syntax "padding-left:0;padding-right:0;padding-top:0;padding-bottom:0"

this seems like an easy solution that only cost a few lines of css... and makes my inliner happy (currently either using one from my email api or a php class, both failed to do something nice when using both full and short padding declaration).

lekoala avatar Nov 09 '16 20:11 lekoala

And to make it easy to merge if needed...

https://github.com/zurb/foundation-emails/pull/631

lekoala avatar Nov 17 '16 04:11 lekoala

hi there, did anyone had a look at this?

lekoala avatar Dec 05 '16 10:12 lekoala

the issue also exist with margin:0 (and Margin:0)

I guess it only happens on my setup (styles being inlined by php or external api), but it seems so easy to fix with no downside that I would be nice to include it

lekoala avatar Dec 22 '16 08:12 lekoala

Even if my PR was merged it seems in 2.4 the padding:0 is still there https://github.com/foundation/foundation-emails/blob/develop/dist/foundation-emails.css

lekoala avatar Dec 06 '23 15:12 lekoala