-1

i have created a signature JSFiddle the problem is that it looks slightly different on gMail and Hotmail (worst on outlook) but i cant figure out what is wrong.

i tried This and This but its not working. 

    <html>
  <head/>
  <body>
    <div id="mainDiv">

    <table id="tabMain2" style="max-height: 100px;width: 100%;background-color: #f7f7f7;border-spacing: 0;border-collapse: collapse;padding: 0"><tr><td colspan="2">
                <table style="border-spacing: 0;border-collapse: collapse;padding: 0"><tr><td>
                            <label class="boldText upperText normalText nameHeadder" style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 14px;line-height: 12px">
                                full name
                            </label>
                            <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                                /
                            </label>
                            <label class="upperText normalText" style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                                DEsec
                            </label>
                        </td>
                    </tr><tr><td>
                            <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                                email@gulfautomation.com
                            </label>
                            <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                                /
                            </label>
                            <label class="normalText upperText" style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                                +code-mob No
                            </label>
                        </td>
                    </tr></table></td>
        </tr><tr><td colspan="2">
                <label class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">
                     
                </label>
            </td>
        </tr><tr><td class="logoTd2" style="max-width: 68px;width: 68px;max-height: 68px;height: 68px;text-align: center">
                <img class="logoRender" src="http://seprojects.in/commonResource/images/ssa_logo_noStroke_96.png" alt="ssa" height="60" width="60" style="text-align: center;-ms-image-rendering: optimizeQuality;-o-image-rendering: optimizeQuality;image-rendering: optimizeQuality"/></td>
            <td>

                <p style="margin: 0">
                    <span class="boldText normalText companyHeadder" style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 15px;line-height: 12px">Saisanket Automation Pvt Ltd.</span>
                </p>

                <p style="margin: 0">
                    <span class="upperText normalText boldText" style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Office:</span>
                    <span class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">9029979729</span>
                    <span class="upperText normalText boldText" style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Fax:</span>
                    <span class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">28709994</span>
                </p>

                <p style="margin: 0">
                    <span class="boldText normalText" style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Address: </span>
                    <span class="normalText" style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">B 402, Western Edge II, Western Express Highway, Borivali(East), Mumbai, Maharashtra 400066, INDIA</span>
                </p>

            </td>
        </tr></table><br/><p class="disclamerText" style="font-family: Verdana, Arial, sans-serif;font-size: 9px;margin: 0">
        This e-mail message may contain confidential or legally privileged information and is intended only for the use of the intended recipient(s). Any unauthorized disclosure, dissemination, distribution, copying or the taking of any action in reliance on the information herein is prohibited. E-mails are not secure and cannot be guaranteed to be error free as they can be intercepted, amended, or contain viruses. Anyone who communicates with us by e-mail is deemed to have accepted these risks. Saisanket Automation Pvt Ltd is not responsible for errors or omissions in this message and denies any responsibility for any damage arising from the use of e-mail. Any opinion and other statement contained in this message and any attachment are solely those of the author and do not necessarily represent those of the company.
    </p>

</div>
  </body>
</html>
Community
  • 1
  • 1
Nikhil Meher
  • 47
  • 9
  • 1
    do you have any screenshots of the behaviour you're experiencing in the respective mail clients? is there a reason you are adding `class`es to your elements (for older mailclient support you should only rely on inline styles for styling)? why are you using `label` elements (these should only be used inside `form` elements)? – haxxxton Jan 12 '15 at 06:06
  • ignore the class tag, i forgot to remove the class tag, but i included all the css inline. i have attached the images(click on gmail or hotmail in my question). About the label element, what else should i use if i have text to display. – Nikhil Meher Jan 12 '15 at 06:10
  • `span` or `p` will work and are intended to be used for text based elements, if you want to avoid having to overwrite default styling, go with `span` as it has no default `margin`. You will probably find, it is this default `margin` that is also being applied to the `label` elements that is causing the mismatch in height between gmail and hotmail – haxxxton Jan 12 '15 at 06:17
  • i replaced all `label` tags with `span` tags. it dint work. And cant use `p` as it starts on the new line(i need some text on same line with different formatting) :( – Nikhil Meher Jan 12 '15 at 06:25
  • ok i figured out the vertical spacing issue with the **company name**, **address** and **contact number**. `span` was inside `p` which inserted spacing in hotmail. its almost looking same in both the mail clients now, but not completely same. any suggestions how i can resolve that? – Nikhil Meher Jan 12 '15 at 06:47

1 Answers1

0

A combination of table-layout:fixed and adding cellspacing="0" cellpadding="0" to your tables as well as being more specific about the heights of your spans trs and tds should fix these layout issues. I took the liberty to add &nbsp;s where i assumed you didnt want your lines breaking, and removing all the class and id attributes

<div>
    <table style="max-height: 120px;height:120px;width: 100%;background-color: #f7f7f7;border-spacing: 0;border-collapse: collapse;padding: 0" cellspacing="0" cellpadding="0">
        <tr style="height:20px;border-spacing: 0;border-collapse: collapse;">
            <td colspan="2" style="height:20px;border-spacing: 0;border-collapse: collapse;">
                <table style="table-layout:fixed;border-spacing: 0;border-collapse: collapse;padding: 0;height:20px;margin:0;" cellspacing="0" cellpadding="0">
                    <tr style="height:20px;">
                        <td style="height:20px;">
                            <span style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 14px;line-height: 12px;display:inline-block;">
                                full name
                            </span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">
                                /
                            </span>&nbsp;<span style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">
                                DEsec
                            </span>
                        </td>
                    </tr>
                    <tr style="height:20px;">
                        <td style="height:20px;">
                            <span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">
                                email@gulfautomation.com
                            </span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">
                                /
                            </span>&nbsp;<span style="text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">
                                +code-mob No
                            </span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr style="height:12px;">
            <td colspan="2" style="height:12px;">
                <span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px;display:inline-block;">&nbsp;</span>
            </td>
        </tr>
        <tr style="max-height: 68px;height: 68px;">
            <td style="max-width: 68px;width: 68px;text-align: center">
                <img src="http://seprojects.in/commonResource/images/ssa_logo_noStroke_96.png" alt="ssa" height="60" width="60" style="text-align: center;-ms-image-rendering: optimizeQuality;-o-image-rendering: optimizeQuality;image-rendering: optimizeQuality" />
            </td>
            <td style="max-height: 68px;height: 68px;width:auto;">
                <p style="margin: 0;height:12px;">
                    <span style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 15px;line-height: 12px">Saisanket Automation Pvt Ltd.</span>
                </p>
                <p style="margin: 0;height:12px;">
                    <span style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Office:</span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">9029979729</span>&nbsp;<span style="font-weight: bold;text-transform: uppercase;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Fax:</span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">28709994</span>
                </p>
                <p style="margin: 0;height:12px;">
                    <span style="font-weight: bold;font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">Address: </span>&nbsp;<span style="font-family: Helvetica, Arial, sans-serif;font-size: 11px;line-height: 12px">B 402, Western Edge II, Western Express Highway, Borivali(East), Mumbai, Maharashtra 400066, INDIA</span>
                </p>
            </td>
        </tr>
    </table>
    <br/>
    <p style="font-family: Verdana, Arial, sans-serif;font-size: 9px;margin: 0">
        This e-mail message may contain confidential or legally privileged information and is intended only for the use of the intended recipient(s). Any unauthorized disclosure, dissemination, distribution, copying or the taking of any action in reliance on the information herein is prohibited. E-mails are not secure and cannot be guaranteed to be error free as they can be intercepted, amended, or contain viruses. Anyone who communicates with us by e-mail is deemed to have accepted these risks. Saisanket Automation Pvt Ltd is not responsible for errors or omissions in this message and denies any responsibility for any damage arising from the use of e-mail. Any opinion and other statement contained in this message and any attachment are solely those of the author and do not necessarily represent those of the company.
    </p>

</div>
haxxxton
  • 6,422
  • 3
  • 27
  • 57