1

I am working in a Marketing Automation (Eloqua) system to deploy HTML emails and Landing Pages. Of recent, they have run some updates to their system and it has started populating an extra period inconsistently in front of one or two of my class declarations from the embedded style sheet. For example, my hosted code for HTML emails has an embedded style sheet at the top to render Responsive emails. In this style sheet I have certain class declarations. When these are being deployed I am witnessing an inconsistent error where the system will add an extra period in front of one or two of the class declarations (e.g. from .removePad to ..removePad) which obviously makes the class declaration not work. This extra period is consistent across all platforms/browsers. It is also inserting a line break just before the extra period, but as white space doesn't matter in HTML, that isn't anything more than maybe an extra clue in the scenario.

I have done extensive testing and have spent days with their support team. Their final offer of assistance to me was to tell me that my HTML was incorrect and that is why the extra period is getting inserted. Here are some snippets of what they are telling me is incorrectly written code. It revolves around setting padding and margins to 0. I have always been under the impression that when setting margins and padding to 0, a unit of measurement is not needed (e.g. margin: 0 auto; padding: 0; margin: 0; as opposed to margin: 0px auto; ... etc).

Said Code snippets:

body {width: 100%; background-color: #ffffff; margin:0; padding:0;}
.removePad {padding-right:0!important;padding-left:0!important;}
.resetType {font-size: 13px!important; line-height: normal!important; margin-top: 0;}

1: Am I incorrect in this assumption of not needing a unit of measure when setting to 0?

2: Has anyone ever witnessed anything like this inserting an line break/extra period?

3: I don't know much about what coding language their program would be written in, nor do I know complex coding languages, but does anyone know of a scenario in a coding language that would make this scenario happen?

If it were a matter of simply going in and putting a unit of measure in each of my attributes, I would do so and say good day. However, I have now witnessed and incident of this happening after doing just that, so I am confused, stumped and abandoned. Perhaps someone here could offer me a bit of insight or a direction to troubleshoot.

Thanks greatly for any thoughts!

UPDATE: entire CSS

<style type="text/css">
    .ReadMsgBody {width: 100%; background-color: #ffffff;}
    .ExternalClass {width: 100%; background-color: #ffffff;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
    body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;}
    table {border-collapse:collapse;}
    a:visited {color:#0085c3;}
    @media only screen and (max-width: 640px)  {
        body[yahoo] .deviceWidth {width: 440px!important;}
        body[yahoo] .tableWidth {width: 410px!important;}
        body[yahoo] .hide {display: none!important;}
        body[yahoo] .show {display: block!important; padding:0; width: auto !important; overflow: visible !important; max-height: inherit !important;}
        body[yahoo] .borderRadius {border-radius: 10px;}
        body[yahoo] .center {margin:0 auto;}
        body[yahoo] .headline {font-size: 22px!important; color: #ffffff!important; background-color: #0085c3!important; border-top-left-radius: 5px; border-top-right-radius: 5px; padding-top: 15px!important; padding-left:15px!important; padding-right:15px!important;}
        body[yahoo] .blueDivide {border-top: 2px solid #0085c3;}
        body[yahoo] .borderGone {border-top: none; border-right:none !important; border-bottom: none; border-left:none !important;}
        body[yahoo] .logo {height:60px; width:141px; padding-left: 15px;}
        body[yahoo] .removePad {padding-right:0!important;padding-left:0!important;}
        body[yahoo] .ctaButton {padding: 5px 10px; background-color: #0085ce !important; color: #ffffff !important; text-decoration: none !important; border-radius: 5px; width: 180px ; text-align: center !important; margin-top: 10px; display: block !important; margin: 0 auto;}
        body[yahoo] .ctaButton2 {padding: 5px 10px; background-color: #0085ce !important; color: #ffffff !important; text-decoration: none !important; border-radius: 5px; width: 340px ; text-align: center !important; margin: 0 auto !important; display: block !important;}
        body[yahoo] .resetType {font-size: 13px!important; line-height: normal!important; margin-top: 0}
        body[yahoo] .topBox {border-top-left-radius: 10px; border-top-right-radius: 10px;}
        body[yahoo] .bottomBox {border-bottom-left-radius: 10px!important; border-bottom-right-radius: 10px!important; border-bottom:#0085c3 solid 1px; border-right:#0085c3 solid 1px; border-left:#0085c3 solid 1px; padding-top: 15px; padding-left: 14px; padding-right: 14px;}
        body[yahoo] .imagePad {padding-top: 5px; padding-bottom: 5px; padding-left: 14px; padding-right: 10px;}
        body[yahoo] .rightPad {padding-right: 14px;}
        body[yahoo] .salesBox {border-radius:5px; padding: 10px 0; margin-top:15px; background-color: #eeeeee;}
    }
    @media only screen and (max-width: 479px) {
        body[yahoo] .deviceWidth {width:300px!important}
        body[yahoo] .tableWidth {width:270px!important}
        body[yahoo] .headline {font-size: 20px!important;}
        body[yahoo] .ctaButton2 {padding: 5px 10px; background-color: #0085ce !important; color: #ffffff !important; text-decoration: none !important; border-radius: 5px; width: 180px ; text-align: center !important; margin: 0 auto !important; display: block !important;}
        body[yahoo] .logo {height:50px; width:118px; padding-left: 10px;}
    }
</style>
John
  • 11,985
  • 3
  • 45
  • 60
keithiopian
  • 123
  • 1
  • 2
  • 11
  • 1
    White space **does** matter in HTML; often spaces will cause line breaks or look like padding. Also, you only need to add px or em or % etc. to **non-zero** values. `margin: 0;` is correct syntax. – TylerH Apr 03 '14 at 20:02
  • Thanks for the note on white space, that is good to correct my assumption that it doesn't matter. Though in this scenario, it is being populated as a line break post deployment along with the extra period. Thanks for the confirmation on the unit of measure. – keithiopian Apr 03 '14 at 20:07
  • I think the question is why there is an extra period being inserted in the CSS styles – Mathias Apr 03 '14 at 20:07
  • Like Tyler mentioned white space DOES matter. Also i had a really strange incident with a crazy character that DID NOT show up in my editor.. when i was copying some examples offline and pasting them in. Re-write your code BY HAND DONT COPY AND PASTE and run it again. There was a character embedded in my code that you could not see even in an editor... all from copy and paste – JayD Apr 03 '14 at 20:08
  • 2
    This is a bug in their system. What you have there is best practice. You should be putting everything you can inline for Gmail though, so that might help workaround the issue. CSS inliner tools [here](http://stackoverflow.com/questions/791070/what-tools-to-automatically-inline-css-style-to-create-email-html-code/17882057#17882057) – John Apr 03 '14 at 20:09
  • @Mathias - That is the resounding question, though uncertain I will get a definitive answer on that question as it is being deployed through 3rd party SaaS. If I do great, but even if I only gather ammunition to return to their support with, I will be grateful. Thanks! – keithiopian Apr 03 '14 at 20:11
  • Personally I've found that white space doesn't matter unless you have an empty element. You should always fill them with a ` ` anyway as some clients (Outlook) will collapse them. The mystery character thing can definitely happen though. – John Apr 03 '14 at 20:11
  • @John - Most of is inline, the embedded part is for the Responsive code for mobile devices. Gmail, yahoo, outlook will skip right over the media queries. So essentially, in desktop format, my code is being rendered perfect, but the extra period is destroying my mobile rendering. And this just started happening too, the code ran fine previously. Thanks for the note about being a bug, that is what I suspect. – keithiopian Apr 03 '14 at 20:13
  • @keithiopian I don't see anything wrong in your CSS so my guess is that it is a bug. I think the title of your question misleads people into thinking that you are having trouble with unexplained white-space between HTML elements – Mathias Apr 03 '14 at 20:13
  • If it is inside a media query, post the whole thing. I can't image why it would make a difference, but at least we'd be having a conversation in context of the surrounding code. – John Apr 03 '14 at 20:15
  • @user2515563 - that is a good thought. I do copy out of Komodo or notepad and paste into the system. Thanks! – keithiopian Apr 03 '14 at 20:15
  • @Mathias - thanks for the tip, would you have a suggestion for a title? – keithiopian Apr 03 '14 at 20:18
  • @John - about to post the entire style below, thanks! – keithiopian Apr 03 '14 at 20:18
  • @keithiopian Slightly off topic, but sometimes pasting from a text editor is not enough if bringing content out of MS Word originally. You need to convert characters like `&quot`, `&mdash` etc otherwise you get unknown characters in the email. – John Apr 03 '14 at 20:19
  • @keithiopian You should update your original question instead of posting it as an answer. – John Apr 03 '14 at 20:21
  • @keithiopian You shouldn't post your code as an answer. It might get deleted for not being a real answer. Edit your question instead. – Mathias Apr 03 '14 at 20:21
  • @John - I hear you, always go with the &quote, › method. Would never use a MS Word editor. I mostly only use Komodo, occasionally notepad for quick fixes. Thanks – keithiopian Apr 03 '14 at 20:29

2 Answers2

0

  1. You should specify units for margin and padding, or any sizing attribute. You can use px, em, %, or pt. Then at least you can be sure it's not the problem.

  2. I'm not sure what system you are using that's generating the email and web pages. Perhaps you could supply more information, but if you still have the problem after specifying units, I would guess it's on their end.

Code generators from your template code can be tricky. Try to conform to most common style to reduce the chances that their generator will choke on your code.

larboyer
  • 119
  • 1
  • 3
  • I am fairly new to this forum, and they are one of the largest Marketing Automation systems. I wasn't/am not sure what the edicate is on calling out specific companies. – keithiopian Apr 03 '14 at 20:26
  • Oh, and I made their suggested edits and ironically, the first deployment went well, but the second caused the issue again. It would also be worth noting that it wasn't consistent to begin with. When finding this issue, I tested two emails. One was good, one was bad. Both ran off the same template/wireframe. – keithiopian Apr 03 '14 at 20:27
  • 1
    @keithiopian I'd call them out. You should also tag the software in the original post. The point of this forum is to identify issues and try and find solutions. Someone else may have the same problem, particularly if their support ignores/denies it. – John Apr 03 '14 at 20:37
  • Thanks John, This was my main goal here was to reassure my knowledge and gain ammunition to take back to their development team. – keithiopian Apr 03 '14 at 20:40
  • 1
    I just noticed you put "Eloqua" there. I was soooo gonna guess them, but thought I'd be a better person. I was going to say "Does it start with E?", but didn't want to drag Exact Target down. Eloqua's support from my own experience is incredibly poor and their software for html email designers is inferior. I'm happy to go on the record saying that. They won't fix a bug until their quarterly build either, if they fix it at all. I have a handful of unresolved cases with them, where I've basically had to find my own workarounds. – John Apr 03 '14 at 20:54
0

Based on your new code, there are a couple of semi colons missing at the bottom. Email can be temperamental, so fix that and check again. I doubt it will make a difference though.

It really sounds like a bug with their software. Hopefully that doesn't mean you can't identify a way to dance around the issue.

Which classes specifically were getting the double dots? Is it always the same ones or random?

John
  • 11,985
  • 3
  • 45
  • 60
  • Good catch John. ctaButton and topBox were the affected ones. I tried removing both classes to test and it put the extra period in front of deviceWidth – keithiopian Apr 03 '14 at 20:33
  • and that is from the first media query (i.e. the first instance) – keithiopian Apr 03 '14 at 20:36
  • Did you have another email that has the same/similar code always working? Maybe there is something invisible and corrupt in there. I've had that issue in my text editor before. Replace the lot and if it still happens, that is definitely a software bug on their end. – John Apr 03 '14 at 20:44
  • I used this code in emails prior to their updates and have never witnessed and issue. Now I have seen it in two of my wire frames, but not consistently. That is what is so perplexing to me. I am going to take that suggestion and retype out the code just to eliminate that option. – keithiopian Apr 03 '14 at 20:52
  • Actually, I used one of these emails prior to their updates and never had the issue. – keithiopian Apr 03 '14 at 20:53
  • Are you on E9 or E10? How are you uploading your html? – John Apr 03 '14 at 20:57
  • I am on E10. I go through the upload option which pulls the HTML file from my computer. – keithiopian Apr 03 '14 at 20:59
  • I'm on E9 still, so not sure if this is applicable I know E10 handles their email editing differently - Go to the code editor view and copy & paste your entire html in there. See if it makes a difference. – John Apr 03 '14 at 21:18
  • If I were you, I'd stay with E9. We have experience several bugs since transitioning a couple months ago. I am going back right now and making the fixes you recommended earlier. Once I get those edits in and test, if that doesn't do any good, I'll post the entire code. – keithiopian Apr 03 '14 at 21:30