CODEWITHSUNDEEP
gmailhtml-emailpre
Akash Ramchandani
Akash Ramchandani

Reputation: 81

Issue with GMail - Wrapping up Html email with unwanted PRE tag

I am trying to send HTML email to GMail. But GMail is internally wrapping up Html of my email with pre tag.

For ex: my email contains below html

<html>
<body>
    <table>
        <tr>
            <td> TEST 1 </td>
        <tr> 
    </table>
    <table>
        <tr>
            <td> TEST 2 </td>
        <tr> 
    </table>

</body>

But Gmail translates this html in different way as shown below

<pre><table>
        <tr>
        <td> TEST 1 </td>
    <tr> 
</table>
<table>
    <tr>
        <td> TEST 2 </td>
    <tr> 
</table></pre>

Can anyone help me, how does this PRE tag gets added in GMail?
The problem with this pre tag is that it has got some styles coming up from gmail that breaks the look and feel of my email. Below is the CSS.

.gs pre {
  white-space: pre-wrap;
}

Also, Is there a way to override the above CSS to change the value of 'white-space' to 'initial' instead of 'pre-wrap'? If this is possible, my issue will be resolved.

Any help on my above doubts is really appreciated.

Upvotes: 2

Views: 4151

Answers (1)

Akash Ramchandani
Akash Ramchandani

Reputation: 81

@RDE, You are absolutely right. Gmail does not wraps PRE tag.

I just figured out the problem and the solution too.

Issue I was using Adobe CQ(content management tool) to send emails. While sending emails my entire HTML was wrapping up with PRE tag. This was most probably due to Adobe CQ Mail API that sends email. Issue occurred for me in all email clients.

Solution I have wrapped PRE tag outside entire html with style "white-space:initial". When CQ generates email, I get two pre tags now, one(outer PRE tag) from CQ and another one(Inner PRE tag) which i used to wrap my HTML. The inner PRE tag took the priority over outer one and overrides the styles which were causing the issue. Adding the code for better clarity

<pre style="white-space:initial"> 
Your hTML that goes through CQ
</pre>...

Now once you send email through CQ your final html will be like this

<pre>
    <pre style="white-space:initial">
        Your hTML that goes through CQ
    </pre>
</pre>

Upvotes: 5

Related Questions