Put the user avatar in a <p> block
authorHerve Saint-Amand <git@saintamh.org>
Mon, 23 Jan 2017 22:26:34 +0000 (22:26 +0000)
committerHerve Saint-Amand <git@saintamh.org>
Mon, 23 Jan 2017 22:26:34 +0000 (22:26 +0000)
This improves rendering on those clients that set the margin to 0 on <p> blocks.

app/views/notifier/_message_body.html.erb

index 29ecf9ea89f7fb4252f5a6cb0f4df54acefb656c..a108643ceb9292fd433e743c3727f61912552a06 100644 (file)
@@ -1,15 +1,21 @@
 <table style="font-size: 15px; font-style: italic; margin: 15px; background-color: #eee; width: 520px">
   <tr>
 <table style="font-size: 15px; font-style: italic; margin: 15px; background-color: #eee; width: 520px">
   <tr>
-    <td style="width: 50px; vertical-align: top; padding: 15px">
-      <%= link_to(
-          image_tag(
-            attachments["avatar.png"].url,
-            alt: @author,
-            title: @author
-          ),
-          user_url(@author, :host => SERVER_URL),
-          :target => "_blank"
-      ) %>
+    <td style="width: 50px; vertical-align: top; padding: 5px 15px">
+      <%# Some email clients (e.g. Yahoo as of 2017-01) remove the margin
+        on <p> tags. Since the body itself always starts with a <p>, by
+        wrapping the image here in a <p> as well, we ensure that they will at
+        least always be aligned with each other. %>
+      <p>
+        <%= link_to(
+            image_tag(
+              attachments["avatar.png"].url,
+              alt: @author,
+              title: @author
+            ),
+            user_url(@author, :host => SERVER_URL),
+            :target => "_blank"
+        ) %>
+      </p>
     </td>
     <td style="text-align: left; vertical-align: top; padding-right: 10px">
       <%= body %>
     </td>
     <td style="text-align: left; vertical-align: top; padding-right: 10px">
       <%= body %>