Issue with Email Signature on replies

Recently, I had some email signatures designed and they appear great when sent out, but encounter issues upon receipt or reply:

  1. The logo gets distorted and occasionally enlarges significantly during replies.
  2. The font color switches to black when receiving an email or replying.
  3. Please refer to the attached image for a visual representation of the issue with the header bar crossing the screen at times.

I utilize Thunderbird for sending emails, although I am uncertain if this has any impact on the problem.

If anyone can offer suggestions on rectifying these glitches, it would be greatly appreciated.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="keywords" content="">
    <meta name="description" content="">
  </head>
  <body style="background:#eee;padding:0;margin:0;">

    <div style="width:600px;background:#fff;font-family:Arial, Helvetica, sans-serif;">
      <div style="padding:15px 0px;background:#0c6eb7;color:#fff;">
        <div style="padding:5px 15px;">
          <h2 style="margin:0;font-size:18px;text-transform:uppercase;font-weight:black;">Health Your Way</h2>
          <h3 style="margin:0;margin-bottom:3px;font-size:14px;font-weight:normal;">&nbsp;</h3>
        </div>
      </div>
      <div style="padding:15px 15px;">
          <p style="margin-top:0px;"></p>
          <h4 style="margin:0;font-size:12px;font-weight:normal;color:#0c6eb7;">
              <img src="http://i.imgur.com/vyyo3Cs.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d4d1d8dcdbf5ddd0d4d9c1ddccdac0c7c2d4cc9bd6da9bc0de">[email protected]</a>" style="color:inherit;text-decoration:none;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0a0f0602052b030e0a071f0312041e191c0a12450804451e00">[email protected]</a></a>
              <b style="display:inline-block;margin:0px 10px;font-weight:normal;">|</b>
              <img src="http://i.imgur.com/Uwbw49m.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="tel:08006446414" style="color:inherit;text-decoration:none;">0800 644 6414</a>
              <b style="display:inline-block;margin:0px 10px;font-weight:normal;">|</b>
              <img src="http://i.imgur.com/jpcSK1r.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="http://www.healthyourway.co.uk" style="color:inherit;text-decoration:none;">healthyourway.co.uk</a>
          </h4>
          <h4 style="margin:0;margin-top:10px;font-size:12px;font-weight:normal;color:#0c6eb7;">
              <img src="http://i.imgur.com/bBNmf7g.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <div style="display:inline-block;vertical-align:middle;width:calc(100% - 30px);">Queens Gardens Business Centre, 31 Ironmarket, Newcastle-under-Lyme<br>Staffordshire, ST5 1RP</div>
          </h4>
      </div>
      <div style="width:100%;background:#fff;border-top:1px solid #eee;">
        <div style="padding:15px;padding-bottom:1px;color:#cccccc;font-size:11px;">
          <img src="http://i.imgur.com/ZSms6VI.jpg" style="height:60px;margin-right:10px;">
          <img src="http://i.imgur.com/sXHE0gU.jpg" style="height:60px;">
          <p>This message may contain confidential information. If you are not the intended recipient please inform the sender that you have received the message in error before deleting it.
Please do not disclose, copy or distribute information in this e-mail or take any action in reliance on its contents: to do so is strictly prohibited and may be unlawful.</p>
        </div>
      </div>
    </div>

  </body>
</html>

https://i.sstatic.net/vKXEj.png

https://i.sstatic.net/npRMF.png

https://i.sstatic.net/RJVoj.png

https://i.sstatic.net/KsbBU.png

htmlcssemailhtml-email

Answer №1

After reviewing the code in your original post, I've made some minor adjustments to optimize it for better performance.

Here's what has been done:

  • I added height specifications to the footer images without setting a width. This allows the images to resize proportionately based on the height provided.
  • I incorporated colors directly into the code for text styling instead of using inherited styles.

Feel free to test out the updated code below and let me know if it meets your requirements.

Cheers 

   

     <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta name="keywords" content="">
        <meta name="description" content="">
      </head>
      <body style="background:#eee;padding:0;margin:0;">
    
        <div style="width:600px;background:#fff;font-family:Arial, Helvetica, sans-serif;">
          <div style="padding:15px 0px;background:#0c6eb7;color:#fff;">
            <div style="padding:5px 15px;">
              <h2 style="margin:0;font-size:18px;text-transform:uppercase;font-weight:black; color:#ffffff;">Health Your Way</h2>
              <h3 style="margin:0;margin-bottom:3px;font-size:14px;font-weight:normal;">&nbsp;</h3>
            </div>
          </div>
          <div style="padding:15px 15px;">
              <p style="margin-top:0px;"></p>
              <h4 style="margin:0;font-size:12px;font-weight:normal;color:#0c6eb7;">
                  <img src="http://i.imgur.com/vyyo3Cs.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbdadfd6d2d5fbd3dedad7cfd3c2d4cec9ccdac295d8d495ced0">[email protected]</a>" style="color:#0c6eb7;text-decoration:none;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0263666f6b6c426a67663e2e"><span>Email Address</span></a></a>
                  <b style="display:inline-block;margin:0px 10px;font-weight:normal;">|</b>
                  <img src="http://i.imgur.com/Uwbw49m.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="tel:08006446414" style="color:#0c6eb7;text-decoration:none;">0800 644 6414</a>
                  <b style="display:inline-block;margin:0px 10px;font-weight:normal;">|</b>
                  <img src="http://i.imgur.com/jpcSK1r.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <a href="http://www.healthyourway.co.uk" style="color:#0c6eb7;text-decoration:none;">healthyourway.co.uk</a>
              </h4>
              <h4 style="margin:0;margin-top:10px;font-size:12px;font-weight:normal;color:#0c6eb7;">
                  <img src="http://i.imgur.com/bBNmf7g.png" style="height:20px;vertical-align:middle;margin-right:5px;"> <div style="display:inline-block;vertical-align:middle;width:calc(100% - 30px);color:#0c6eb7;">Queens Gardens Business Centre, 31 Ironmarket, Newcastle-under-Lyme<br>Staffordshire, ST5 1RP</div>
              </h4>
          </div>
          <div style="width:100%;background:#fff;border-top:1px solid #eee;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding:15px;color:#cccccc;font-size:11px;">
             
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="160"><img src="http://i.imgur.com/ZSms6VI.jpg" width="150" height="60" style="width:150px;height:60px;"></td>
      <td><img src="http://i.imgur.com/sXHE0gU.jpg" width="150" height="60" style="width:150px;height:60px;"></td>
    </tr>
  </tbody>
</table>

             
              
              </td>
    </tr>
    <tr>
      <td style="padding:15px;color:#cccccc;font-size:11px;"><p>This message may contain confidential information. If you are not the intended recipient please inform the sender that you have received the message in error before deleting it.
    Please do not disclose, copy or distribute information in this e-mail or take any action in reliance on its contents: to do so is strictly prohibited and may be unlawful.</p></td>
    </tr>
  </tbody>
</table>
<div>
              
          </div>
      </div>
    
      </body>
    </html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When I click the login button, a .ttf file is being downloaded to my computer

I have encountered an issue with my web application where custom font files in .ttf, .eot, and .otf formats are being downloaded to users' local machines when they try to log in as newly registered users. Despite attempting various solutions, I have b ...

javascriptjquerycss

PHP bug causing inaccuracies in output results

I've written a PHP script to determine a student's final grade, taking into account weight and target grades. However, the output value it generates is incorrect. Below is my current PHP code: <?php $numassignments = isset($_GET['numass ...

phphtmlmysql

What is the process for retrieving data from a javascript file that was submitted through a form?

Can you help me with an issue I'm having with this code snippet? <form action="main.js"> <input type="text" required="required" pattern="[a-zA-Z]+" /> <input type="submit" value="Submit" /> </form> After c ...

javascripthtmlformsinputsubmit

Customizing R Shiny: Changing the color of a menu item upon selection of any submenu item

Seeking assistance with updating the color of the menuitem in a shiny app to match the active submenuitem. Currently, the active submenuitems are highlighted differently from non-active submenuitems, but we want the main menuitem to also change color when ...

cssrshinyshinydashboard

What is the process for including attachments in Resend within NextJS?

I'm currently facing the challenge of figuring out how to send attachments using Resend in NextJS (API route or Server actions). I've been on the lookout for solutions but haven't found a working one yet. Despite trying various solutions fr ...

reactjsemailnext.jsresend.com

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

javascriptphphtml

HTML elements not displaying in Ajax form

I am encountering an issue with my ajax based feedback form where the form is displaying the html from the response instead of processing it correctly. Here is the JQuery code: $(document).ready(function() { var form_holder = $('#form-holder'); ...

javascriptphpjqueryhtmlajax

What is the best way to center-align elements?

I have a couple of inquiries. First off, I'm facing an issue with centering everything within a form while aligning the text to the left side of the fields. I've attempted using justify-center and align-items within the "container" class and th ...

htmlformscssflexbox

Internet Explorer does not recognize the specific CSS code

My goal is to create a website that behaves differently on Internet Explorer browser. I am attempting to achieve this by using a separate CSS for IE and another CSS for different browsers. However, the IE-specific CSS does not seem to be working. <h ...

htmlcssinternet-explorerinternet-explorer-8

Tips for choosing a table row that is not the first or last cell

#MyTable tr+tr:hover { background: #dfdfdf; } <table id="myTable"> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>1</td> <td>2</td> &l ...

csscss-selectors

Experiencing difficulties with the footer design in bootstrap framework

After creating a basic web page, I encountered an issue with the footer. No matter what adjustments I make, the text is not centered and it does not stay fixed when changing the browser height. To view the code snippet and preview, visit: ...

htmlcsstwitter-bootstrapfooter

The issue arises when trying to use jQuery on multiple elements with the same class

Recently, I came across a jQuery script for my mobile menu that changes the class on click event. jQuery("#slide-out-open").click(function() { if( jQuery( this ).hasClass( "slide-out-open" ) ) { jQuery('#wrapper').css({overflow:"hidd ...

javascriptphpjqueryhtmljquery-mobile

What is the best way to ensure the footer is always positioned at the bottom of each page

Hey there, I'm having an issue with printing a large table on my HTML page. I want the footer to appear at the very bottom of every printed page, but so far I haven't found a perfect solution. I came across using tfoot, which prints the footer at ...

htmlcssprinting

Ensuring full height on Bootstrap 4 columns without triggering a scrollbar in the browser

I'm currently working with Bootstrap 4 and attempting to make 3 columns on the page fill 100% height, only displaying scrollbars within the columns and not on the entire page. I have experimented with applying h-100 to the row div, as well as implemen ...

htmlcsstwitter-bootstrapbootstrap-4

Discovered two instances of duplicate IDs within the elements

When using the same id names in two different form tags, I am encountering the following warnings: [DOM] Found 2 elements with non-unique id Below is a portion of my HTML code: <div class="modal-dialog"> <form action="" ...

javascripthtmljquerybootstrap-4html5-video

Unable to apply styling to table cells that are dynamically added using JQuery within an Angular

Currently working on setting up a form using Angular. Within the hotel.view.html file, there is a table that looks like this: <table id="rooms"> <tr> <td>Room Type</td><td>Beds</td><td>Q.ty</td ...

jquerycssangular

Is the CSS scale activated by mouseover or click?

My CSS code successfully scales images, but the issue is that it affects every image on the page. I am looking for a solution to apply this CSS only when the user hovers over or clicks on an image. The challenge is that images are added by non-technical w ...

javascriptcss

Space between an image and a div element

While creating a website in Dreamweaver CC, I noticed a significant gap between my image and a div tag. Here is a screenshot for reference: Below is the code from my index file: <!doctype html> <html> ... </div> Additionally, here is a ...

csshtmltagsspace

Attempting to design a form that will trigger a print dialog box displaying all the information entered in the form

I am currently working on developing a form that will allow users to input information such as Name, Age, Gender, Hobbies, Contact details, and Photo in order to create a resume. My goal is to build a simple local HTML-based application that generates a RE ...

javascriptphphtmlformsbootstrap-4

Creating dynamic templates for table rows in AngularJS directives

Is it possible to dynamically load an AngularJS Directive templateUrl while working within a table? In my scenario, I have the following HTML structure where I am repeating a tr element with a fw-rule directive: <tbody> <tr ng-repeat="rule in ...

javascripthtmlangularjsangularjs-directive