Question 218154 in Html Question posted in
Some basic documentation can be found here.

Html – Yahoo email client not applying css to <img> element with embedded CSS

HTML email template i am sending to the Yahoo client does not have CSS applied to the <img> elements:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      .image1 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }

      .image2 {
        width: 100px;
        height: 50;
        margin: 0 auto;
      }

      .container {
        background: red;
      }
    </style>
  </head>
  <body>
    <img src="someimage1.jpg" class="image1" />

    <div class="container">
      <img src="someimage2.jpg" class="image2" />
    </div>
  </body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For the Yahoo client, img elements need to have id attributes with CSS that we want to apply.

    Solution:
    I added same id names as the class and just added in the CSS that same CSS properties apply to them.

    NOTE:
    I left classes present, just to be sure if some other client messes with class on some other elements:

    <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>
      .image1,
      #image1 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }

      .image2,
      #image2 {
        width: 100px;
        height: 50;
        margin: 0 auto;
      }

      .container {
        background: red;
      }
    </style>
  </head>
  <body>
    <img src="someimage1.jpg" class="image1" id="image1" />

    <div class="container">
      <img src="someimage2.jpg" class="image2" id="image2" />
    </div>
  </body>
</html>

    Elaboration
    The issue was, that Yahoo client strips CSS that are referred in the image1 and image2 classes for <img> elements. Not sure why, but this only happens for this img tag.

    Most of the email clients transfer embedded CSS into inline, and for Yahoo, it seems they are not transferring onto <img> elements.


  2. 0

    Yes, you are right. You need to write inline CSS. And also for most email clients it is always recommended to write table-based html. And you also have to avoid a lot of CSS rules that doesn’t work for emails. Like here, border-radius will not work in Outlook. So when writing CSS you can also check what CSS property you can use for emails.

    <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  
<body style="margin: 0; padding: 0;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td>
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;">
          <tr>
            <td>
              <img src="someimage1.jpg" width="100" height="100" style="border-radius: 50%;"/>
            </td>
          </tr>
          
          <tr>
            <td bgcolor="red">
              <img src="someimage2.jpg" width="100" height="50" style="margin: 0 auto;"/>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search