3

I am using Thunderbird as my primary work mail client. I have just created a new HTML signature, which shows correctly in the Thunderbird, in Opera and in an online HTML Viewer but not on GMail. I would be very grateful if anyone could point me in the direction of what the problem is about. I have attached the .html signature file.

EDIT: I realized that I didn't specify the problem: when I inspect the elements in Opera on the GMail web inbox I see that the whole text is formated to Arial, 12.8 px while losing the different color on the first line (class = .name).

My CSS is very rusty so I suspect the error is on my side...

EDIT 2: code below as corrected by Tim Gerhard (thanks a lot!)

<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style type="text/css">
      .normal{font-family:"Arial"; font-size:9pt; line-height:1.25; color:#606060; font-weight:400}
      .name{font-size:10.5pt; color:rgb(119,187,65); font-weight:700;}
      .link{color:rgb(17,85,204)}
    </style>
  </head>
  <body>
    <div class="normal">
      <span class="name">Rostislav Janda</span></br>
      Obchodní zástupce</br></br>
      <a style="link"; href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</br>
      <a style="link"; href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
      </br></br>
      IQ Budovy s.r.o.</br>
      <a style="link"; href="[map link]">Mečířova 5, 612 00 Brno</a></br></br>
      <img alt="IQ_Logo" src="[image address]">
      <br><br><br>
    </div>
  </body>
</html>
Rostislav Janda
  • 33
  • 6
  • 1
    Just from looking at it I see a mistake: style="link" is not a valid css property. Use class="link" instead. Style is used for direct stylings like this: style="color:blue; font.weight:bold;" – Tim Gerhard Mar 26 '18 at 11:48
  • Html and css errors can cause what you're experiencing. Can you please tell me if the errors still occur after you take my snippet? – Tim Gerhard Mar 26 '18 at 12:03
  • Hello and thanks for your time! I have tried using "class" (shameful mistake) but with no change in how GMail displays the first line (no color, different size of font). – Rostislav Janda Mar 26 '18 at 13:45
  • Hi, I've noticed that your question still hasn't a marked solution. Is this because you simply forgot or is your question still unanswered? I'd be happy to help you further with your case, otherwhise please mark this question as solved as it helps other users for a better experience on stackoverflow. – Tim Gerhard Apr 03 '18 at 05:55
  • Hello, and thanks for your reminder. I had almost given up after more experimenting, but then I used your suggestion and learned how to use inline styles correctly. It looks like HTML signatures should rather be based on inline CSS as styles are not used rendered consistenly. Now I can write the answer myself or you can write it as it was your idea - which would you prefer, @TimGerhard? – Rostislav Janda Apr 04 '18 at 07:04
  • Hi, I'm glad I could lead you in the right direction. I edited my answer so you can mark it as a solution if you want to. – Tim Gerhard Apr 04 '18 at 07:25

1 Answers1

1

Edit:

You can use inline stylings to style your E-Mail as classnames aren't fully supported (as far as I', concerned). Use style="color:red" instead of classes. Inline should work with every Mail program.

 

Your html was full of errors which probably caused the issue.

I took the time to fix it and this is the (now correct) markup:

<html>

  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style type="text/css">
      .normal {
        font-family: "Arial";
        font-size: 9pt;
        line-height: 1.25;
        color: #606060;
        font-weight: 400;
      }

      .name {
        font-size: 10.5pt;
        color: rgb(119, 187, 65);
        font-weight: 700;
      }

      .link {
        color: rgb(17, 85, 204);
      }

    </style>
  </head>

  <body>
    <div class="normal">
      <span class="name">Rostislav Janda</span><br/>
      Obchodní zástupce<br/>
      <br/>
      <a class="link" href="tel:+420%20721%20604%20707" value="+420721604707" target="_blank">+420 721 604 707</a><br/>
    <a class="link" href="http://www.iqbudovy.cz"> www.iqbudovy.cz</a>
      <br/>
      <br/>
      IQ Budovy s.r.o.<br/>
      <a class="link" href="[map link]">Mečířova 5, 612 00 Brno</a><br/>
      <br/>
      <img alt="IQ_Logo" src="[image address]"/>
      <br><br><br>
    </div>
  </body>
</html>

What was wrong?:

  • You use the <br> tag wrong. It's <br/> and not </br>
  • One of your image tags was not closed properly
  • One of your hyperlinks (<a>) was not closed
  • You use style="" instead of class=""
Tim Gerhard
  • 3,477
  • 2
  • 19
  • 40
  • Terrible mistakes, thanks for yout time. However even using our code doesn't bring about the change in how the first line (name) is displayed on GMail. – Rostislav Janda Mar 26 '18 at 13:43
  • You wrote that you're using gmail in Opera. I think this might be browser related as your email displays perfectly on my gmail. Try opening gmail in a different browser or even a cellphone and tell me if this problem still occurs – Tim Gerhard Mar 26 '18 at 13:48
  • I have checked both Chrome and IE, the error is the same. I hope I am not doing someting silly. I have checked that I am using the corrected version of the signature (I am). As soon as I send it from Thunderbird to Gmail, part of the styling is lost. When I try to view it in online HTML code viewer (e.g. Tryit) it works as expected. Change of browser doesn't change anything. – Rostislav Janda Mar 26 '18 at 14:34
  • 1
    Maybe it has something to do with thunderbird. Sometimes mail programs override stylings. You can try inline stylings (for example: instead of class="someclass" you set style="color:blue; font-size:12pt"). Maybe that works – Tim Gerhard Mar 27 '18 at 05:53
  • 1
    It seems that CSS classes are indeed not reliably supported. Changing all CSS to inlines proved to solve the problem, thanks! – Rostislav Janda Apr 05 '18 at 10:51