Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Juan Luna
Juan Luna
11,483 Points

HTML Email displaying wrong on Firefox

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

http://i.imgur.com/bbxOhtO.png

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

http://i.imgur.com/A1gpPss.png

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? I don't know what to do.

idan ben yair
idan ben yair
10,288 Points

Hi Juan,

Input this in to your HTML

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

It should fix the issue, let me know if that works.

idan ben yair
idan ben yair
10,288 Points

You did it right the first time but this meta tag is more specific and it should solve the issue.

5 Answers

Juan Luna
Juan Luna
11,483 Points
Juan Luna
Juan Luna
11,483 Points

I think there's a padding problem, I remove the padding from a <td> and now I looks good in Fireworks but in Safari it looks like this:

http://i.imgur.com/dzziHD0.png

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

Hmm interesting, well you learn something new everyday lol. It's weird that it was the padding though. You sure you didn't change anything else?

Juan Luna
Juan Luna
11,483 Points

I'm changing the padding, so if I remove padding at all it looks nice in Chrome and Fireworks but it removes 20px from the total height on Safari (just like the last picture); but if I put a padding of 20px it looks nice in Chrome and Safari but it leaves an extra space of 20px in Fireworks. Pretty weird. I don't know what to do.

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

have you tried:

.class {
-moz-webkit-padding: 20px;
}
Juan Luna
Juan Luna
11,483 Points
Juan Luna
Juan Luna
11,483 Points

I found the problem (but not the solution), I have that big button inside the <td> that should have a height of 39px, in Firefox that button have a height of 49px because of the <a> tag.

http://i.imgur.com/sLxE0pD.png

I have tried "text-decoration:none;" but doesn't change anything.

idan ben yair
idan ben yair
10,288 Points
idan ben yair
idan ben yair
10,288 Points

Try to use webkit on all the attributes and I think it should adjust that. but also try to work with % instead of px. I found that % is better to work with at times.

.class {
-moz-webkit-padding: 5%;
}