CODEWITHSUNDEEP
htmlfirefoxhtml-email
juanlunaco
juanlunaco

Reputation: 37

HTML Email displaying wrong on Firefox

I just did an HTML email and it looks like this:

enter image description here

It looks good on Chrome and Safari but it looks like this on Firefox:

enter image description here

Here is the code

<head>
    <meta charset="utf-8">
</head>
<body>
    <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="600">
        <tr>
            <td colspan="5">
            <img src="http://pruebascolor2.com/digitalmenteguru/emkt/header.jpg" width="600" height="276" alt="Header">
            </td>
        </tr>
        <tr style="line-height: 1px;">
            <td rowspan="6" valign="top" style="line-height: 1px;">
            <img src="http://pruebascolor2.com/digitalmenteguru/emkt/fondo1.jpg" width="115" height="474" alt="Fondo 1" align="top">
            </td>
            <td colspan="3" width="370" height="41" bgcolor="#ffffff">
            </td>
            <td rowspan="6" valign="top">
            <img src="http://pruebascolor2.com/digitalmenteguru/emkt/fondo2.jpg" width="115" height="474" alt="Fondo 2">
            </td>
        </tr>
        <tr>
            <td colspan="3" width="370" height="58" bgcolor="#ffffff" align="center" style="padding-bottom:20px" >
            <span style="font-family:arial; font-size:17px; color:#005359">
            Tus datos ya están<br />
            <strong>registrados</strong>, 
            ahora estás un<br /> 
            paso más cerca de obtener
            </span>
            </td>
        </tr>
        <tr>
            <td rowspan="2" width="33" height="172" bgcolor="#ffffff">
            </td>
            <td style="line-height: 1px;">
            <img src="http://pruebascolor2.com/digitalmenteguru/emkt/beca.jpg" width="302" height="56" alt="Beca del 100%" style="display:inline; border:0">
            </td>
            <td rowspan="2" width="35" height="172" bgcolor="#ffffff">
            </td>
        </tr>
        <tr>
            <td width="302" height="100" bgcolor="#ffffff" align="center" valign="top" style="padding-top:15px">
            <span style="font-family:arial; font-size:17px; color:#005359">para tu matrícula.
            </span>
        </tr>
        <tr>
            <td colspan="3" style="line-height: 1px;">
            <a href="http://digitalmente.guru/index.php?action=form&ced='.$data['num_doc'].'" target="_blank">
                <img src="http://pruebascolor2.com/digitalmenteguru/emkt/boton.jpg" width="370" height="39" alt="Boton" style="display:inline; border:0">
            </a>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="line-height: 1px;">
            <img src="http://pruebascolor2.com/digitalmenteguru/emkt/contactanos.jpg" width="370" height="142" alt="Contactanos" style="display:inline; border:0">
            </td>
        </tr>
    </table>
</body>

Can someone help me fix it for Firefox?

Upvotes: 0

Views: 125

Answers (1)

revelt
revelt

Reputation: 2420

Basically your problem is caused either by unencoded characters (use Email on Acid character converter, www.emailonacid.com/character_converter/) or missing styling (line-height etc.). All this can be solved re-coding the table structure so it has more "breathing space". Here's my quick attempt to patch it up, it works on Firefox and my Gmail/Hotmail/YahooMail accounts:

<head>
    <meta charset="utf-8">
</head>
<body>
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td>
			<img src="http://pruebascolor2.com/digitalmenteguru/emkt/header.jpg" width="600" height="276" border="0" style="display:block;" alt="Header"/>
		</td>
	</tr>
    <tr>
    	<td>
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td rowspan="2">
			<img src="http://pruebascolor2.com/digitalmenteguru/emkt/fondo1.jpg" width="115" height="474" border="0" style="display:block;" alt="Fondo 1">
		</td>
        <td valign="top" align="center">
			<table border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                    <td style="font-family:arial; font-size:17px; color:#005359; padding-top:41px; padding-bottom:20px;" align="center">
                        Tus datos ya est&#225;n<br /><strong>registrados</strong>, ahora est&#225;s un paso<br />m&#225;s cerca de obtener

                    </td>
                </tr>
                <tr>
                	<td align="center">
                    	<a href="http://pruebascolor2.com/" target="_blank"><img src="http://pruebascolor2.com/digitalmenteguru/emkt/beca.jpg" width="302" height="56" border="0" style="display:block;" alt="Beca del 100%"></a>
                    </td>
                </tr>
                <tr>
                    <td style="font-family:arial; font-size:17px; color:#005359; padding-top:15px; padding-bottom:60px;" align="center">
                        para tu matr&#237;cula.
                    </td>
                </tr>
                <tr>
                	<td align="center">
                    	<a href="http://digitalmente.guru/index.php?action=form&ced='.$data['num_doc'].'" target="_blank"><img src="http://pruebascolor2.com/digitalmenteguru/emkt/boton.jpg" width="370" height="39" border="0" style="display:block;" alt="Boton"/></a>
                    </td>
                </tr>
            </table>
		</td>
        <td rowspan="2">
			<img src="http://pruebascolor2.com/digitalmenteguru/emkt/fondo2.jpg" width="115" height="474" border="0" style="display:block;" alt="Fondo 2">
		</td>
	</tr>
    <tr>
    	<td valign="bottom">
        	<img src="http://pruebascolor2.com/digitalmenteguru/emkt/contactanos.jpg" width="370" height="142" border="0" style="display:block;" alt="Contactanos">
        </td>
    </tr>
</table>
        </td>
    </tr>
</table>
</body>

Upvotes: 1

Related Questions