1

I downloaded some HTML Newsletter template, adjusted it for my needs, and when i send it, it shows the whole CSS code at the top of the email.

This is mostly happening in Outlook, on Gmail i don't see this problem but some other discrepancies (like buttons size etc.) Please look up the screenshot to see exactly how it looks like exactly when email received please look up the screenshot

In addition, i read somewhere that CSS code should be moved from <head> tags to just after beginning of <body> tag, but the problem still persists

How do i solve this problem?

Thanks

PS: I put the example of the code below, but i had to cut it because it exceeds 30000 characters... so i don't know if it is working now

paranoic
  • 33
  • 7
  • AFAIK, you can add only in-line styles to HTML emails. Have you tried using an email service, like Mailchimp? – Allan Jebaraj May 10 '19 at 06:47
  • Without a (small) example of the HTML code you use, it is hard to suggest improvements. – KIKO Software May 10 '19 at 06:52
  • hi @AllanJebaraj and thx for respond... the CSS is inline but part of the code is separated. now i dont know what to inline... i am also not that crafty with CSS. i dont use Mailchimp because i dont have big amount of recipients, if you refer to ssending mails via Mailchimp – paranoic May 10 '19 at 06:52
  • Having the shown part start with `!important` may suggest that that rule is [unsupported](https://stackoverflow.com/questions/31934741/css-important-declaration-not-working-in-outlook-2007). – KIKO Software May 10 '19 at 06:54
  • It is impossible to give you a reliable answer without seeing your code. Preferably as a [MCVE] . By reducing the problem the smallest possible version, you may come accross the answer itself – Jon P May 10 '19 at 06:56
  • Ok guys, i put some code but had to cut it, it was to big @KIKOSoftware – paranoic May 10 '19 at 07:01
  • @JonP i put some code – paranoic May 10 '19 at 07:01
  • Ah, I see now, that you've scrolled down in the image, not showing use where the CSS actually starts. So forget what I said about that. Still curious to see where it actually starts. – KIKO Software May 10 '19 at 07:02
  • You should keep the ` – KIKO Software May 10 '19 at 07:06
  • @KIKOSoftware the probem is same when i put ` – paranoic May 10 '19 at 07:15
  • Not all of your CSS is inline. Inline is when you use the `style` attribute on an element. Something like `

    `. You have a `` element, which is called embedded styles. Not all email clients support embedded styles. Read [this article](https://www.bitdegree.org/learn/inline-css) for more info on inline vs embedded CSS.

     – Trevin Avery May 10 '19 at 07:32

1 Answers1

0

OK guys i found the solution.

This was downloaded newsletter template which has inline code but for some reason it has some embedded code which was not necessary to be there.

The CSS coed which was showing in email disappeared just after i erased it from the file, and template without this code part was working just perfectly.

So i would say this was some kind of putting unnecessary code from developer in HTML file... the reasons i don't really know, but now it works.

In addition, i downloaded some newsletter files in the past they had the same problem. CSS showing in top was mostly seen on outlook.

I appreciate very much your assistance. I would say this problem is solved.

paranoic
  • 33
  • 7