Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Yahoo will ignore embedded css if it is directly preceded by a comment #25

Open
lheise opened this issue Feb 22, 2017 · 3 comments
Open

Yahoo will ignore embedded css if it is directly preceded by a comment #25

lheise opened this issue Feb 22, 2017 · 3 comments
Labels

Comments

@lheise
Copy link

@lheise lheise commented Feb 22, 2017

Example:

ul { padding: 0; } was ignored. Yahoo added its .undoreset ul { padding-left: 40px; }

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #333333;
    line-height: 16px;
  }
/*comment in code*/
  ul {
    padding: 0; 
    margin: 0 0 0 15px;
  }

  ul ul { margin: 0 0 5px 15px; }
  li { margin: 0 0 5px 0; }`

Corrected example:

Once the comment has been removed, the ul { padding: 0; } will be respected.

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #333333;
    line-height: 16px;
  }

  ul {
    padding: 0; 
    margin: 0 0 0 15px;
  }

  ul ul { margin: 0 0 5px 15px; }
  li { margin: 0 0 5px 0; }`
@hteumeuleu hteumeuleu added the bug label Feb 22, 2017
@hteumeuleu hteumeuleu added Yahoo and removed bug labels Jul 10, 2019
@husseinalhammad
Copy link

@husseinalhammad husseinalhammad commented Feb 25, 2021

Just tested to verify this still happens. It looks like Yahoo replaces CSS comments with its own div wrapper ID:

<div id="yiv4236027226">
  <title>Document</title>
  <style>
    #yiv4236027226 body {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 12px;
      color: #333333;
      line-height: 16px;
    }

    #yiv4236027226 
    #yiv4236027226 ul {
      padding: 0;
      margin: 0 0 0 15px;
    }

    #yiv4236027226 ul ul {
      margin: 0 0 5px 15px;
    }

    #yiv4236027226 li {
      margin: 0 0 5px 0;
    }
  </style>

  <div>
    <ul>
      <li>test</li>
    </ul>
  </div>
</div>

So the selector becomes #yiv4236027226 #yiv4236027226 ul { } which doesn't match anything.

Loading

@hteumeuleu
Copy link
Owner

@hteumeuleu hteumeuleu commented Feb 25, 2021

Yep, that's the bug. Thanks for clarifying that.

Loading

@JayOram
Copy link

@JayOram JayOram commented Oct 17, 2021

Just tested this again with the above CSS - Yahoo Mail still replaces the comment with the unique email #ID. But if you need to use CSS comments, it doesn't strip this single line comment:

// comment in code {}

image

However the single line comment above is stripped by Gmail as it parses it as invalid CSS and removes the whole <style> tag.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants