12 Replies Latest reply on Apr 15, 2019 8:58 PM by arpine

    Uploading HTML - CSS help

    arpine

      Hi all,

      I uploaded a packaged HTML email into Eloqua, however I'm having issues with it - it looks wonky from Outlook or all other web clients. It looks good when clicking on the link to view the online version, or on mobile.

      This is an online version link: test

      Please ignore all images, broken links or copy.

      My best guess is that CSS that is referenced in the email conflicts with Eloqua css as per these requirements https://docs.oracle.com/cloud/latest/marketingcs_gs/OMCAA/Help/Emails/HTMLemailCodeRequirements.htm?Highlight=html

       

       

      Oracle Eloqua uses CSS to style the code in the Source Editor. Because of this, if you use CSS class names that are also used by the editor, your email might not display as expected. To help avoid this CSS conflict, avoid using the following class names in your HTML code:

      • .body
      • .elq-form
      • .elq-form-ce
      • .elq-responsive
      • .hidden-border
      • .inline-styled-view
      • .main
      • .overlays-active
      • .sc-container-view
      • .sc-view
      • .sc-view.static-layout
      • .sc-view-overflow

       

      I believe I need to rename some classes, but the problem is:

      - I don't know CSS (I can edit html but I don't have Dreamweaver)

      - The engineer who created the email just went on a medical leave

       

      I am trying to figure out how to correct the css so that it displays correctly. Can anyone help? I will be eternally grateful. I assume it is more difficult than just searching for these classes and renaming them everywhere.

      Thanks in advance!

      Arpine

        • 1. Re: Uploading HTML - CSS help
          Alessandro La Banca

          Hi there,

           

          Do you have a Litmus account to test these emails?

           

          You said that on online version and mobile version they are appearing fine so I believe these ones are rendering issues, nothing to do with Eloqua. Outlook for instance is very well known to have all sort of rendering issues so it would really depend on the email template how to fix them. Maybe your email template was build with the 'mobile first' concept so for this reason is displaying fine on mobile and not on desktop but this is just a guess.

           

          Unless you have used the above 'classes' these are not issues simply given by CSS.

          1 person found this helpful
          • 2. Re: Uploading HTML - CSS help
            arpine

            Thank you for the quick response, Alessandro -  I believe the issue is exactly that the engineer used some of the above classes (I definitely know they used .body) but I don't know how to replace them.

            The issues are most likely with Eloqua, because if I put the content of the CSS into the body of the email, it changes to look fine in the preview, but as soon as I hit "Save", the formatting all goes crazy. So it is something that kicks in within Eloqua that overrides this CSS.

            Also, the online version of the email looks good, but the mobile version does not - it only looks good if I click "view the online version" on mobile - sorry for the confusion!

            • 3. Re: Uploading HTML - CSS help
              Alessandro La Banca

              Oh ok I see then probably it is easy to fix. You then to change all classes that means that you need to search in your HTML any class that you mentioned above and change them and then change them in the CSS as well. It is just a matter of replacing the classes name in both HTML and CSS

              1 person found this helpful
              • 4. Re: Uploading HTML - CSS help
                arpine

                Thanks! I'll try that... hopefully I can figure it out and it would work. I don't have Dreamweaver which also doesn't help. Fingers crossed!

                1 person found this helpful
                • 5. Re: Uploading HTML - CSS help
                  arpine

                  No, sadly nothing worked. I'm completely at a loss what else can this be. Can you see this? test 

                  This is the online version and it looks perfectly fine.

                  Testing it in email, and it becomes a nightmare...

                  • 6. Re: Uploading HTML - CSS help
                    Alessandro La Banca

                    On the link you shared it seems fine but because it is the online version I guess. May I please ask you to check if in the html code the person who built the template used <div> or <td>

                    1 person found this helpful
                    • 7. Re: Uploading HTML - CSS help
                      arpine

                      Yes, the link is the online version and on there it looks exactly like it should - so the code works fine, but something happens with it when it's used in an email...

                      Yes, there are a lot of div tags in the email - no tables so no td...

                      • 8. Re: Uploading HTML - CSS help
                        Alessandro La Banca

                        Ok so that's the problem. Emails don't work with <div> but with <tr> <td> and <table>. Unfortunately there is no easy way to replace them because the syntax is pretty different. You can try to replace all the <div> with the <tr> <td> and <table> but it is not so straight forward. If you have coding skills then that's fine otherwise I believe the only way is to handle it to somebody with coding skills.

                        • 9. Re: Uploading HTML - CSS help
                          arpine

                          I just tried that and it didn't do anything, unfortunately. Still looks fine in the online version and wonky in the email client...

                          I feel like the issue is with the css because when I am editing an email in Eloqua in the split screen editor, if I insert CSS into the email directly, the formatting changes on the left hand side and the email looks good... as soon as I hit "save", the left side of the screen changes format and strips everything out - which is how it ends up looking in the email client. So it is something Eloqua adds to the email upon saving that conflicts with our css...

                          • 10. Re: Uploading HTML - CSS help
                            Alessandro La Banca

                            If you think is something that Eloqua adds to the CSS I would suggest you to compare the 2 CSS and see if there is any difference. In case you spot anything let me know and I will try to help you out.

                            • 11. Re: Uploading HTML - CSS help
                              arpine

                              I am not really sure how to see the CSS that eloqua adds to the email when it's sent - because the online version looks fine and when I view source in there what I see is our code only...

                              • 12. Re: Uploading HTML - CSS help
                                arpine

                                So our FE figured out the issue and it has to do with the security certificate - when our code is uploaded and using the https link, the email clients can't access it because of the security certificate and then some random styles are added to the email instead. Not sure if there is a workaround for it - we've had an issue with http/https after we implemented the branding package but it seemed to have been resolved for the time being. I think I may have to ask Eloqua support about it.