HTML Emails :(

Neodite

Neodite

Neodite

Soldato
Joined
10 Sep 2008
Posts
2,570
Location
Grendon
Hi Guys,

Got an issue with damn HTML Emails, and wondered if anyone had any ideas on how I can fix it.

Here is the HTML

Code: 
<center><table border="0" cellpadding="0" cellspacing="0" style="width:900px; margin:auto; font-family:Helvetica;">
        
        <tr><td style="background-color:#EDEDED" align="center" valign="top">
            <a href="http://helpdesk"><img src="email_header.png" alt="header"></a>
        </td></tr>
        
		<tr><td valign="top" style="padding:40px;font-size:14px;background-color:#F4F4F4;">
            <strong>Subject:</strong> %{ticket.subject}
            <br>
			<strong>Ticket:</strong> #%{ticket.number} 
            <br><br>
			%{recipient.name.full} 
			<br><br>
			Service Ticket #%{ticket.number} has been updated: 
			<br><br>
			%{response} 
			<br><br>
			%{signature} 
        </td></tr>
			
        <tr><td style="color:#fff;background:#404041;font-size:16px;padding-top:15px;padding-bottom:15px;text-align:center;">
            Footer
        </td></tr>

</table></center>

Nothing special and nice and simple. Works fine in a browser and "used" to work fine in emails (For one day) then randomly stopped working.

Here it is in a web browser:

browser.png


And here it is in a emai:

email.png


As you can see in the email, it looks like the image file is the only thing that stays the correct size, everything else seems stretched/zoomed.

I have tried setting the width of 900px (the header size) on everything, but still the same results.

Any ideas? :(
 
No, tried it with and without :(

Works fine in gmail...

And oddly the emails from Friday have now gone the same, so now thinking it has something to do with my outlook?

Dammit 365!
 
Ok ignore me, i'm a spaz!!!

Windows thought it would be fun to change "Change the size of text, apps and other items" to 125%!!!!

But, while i'm here (As I am sure others will have the same thing) is there a way to get around that so it still shows correctly at 125%?
 
The problem is you're using an image as the banner. Personally I'd say to try and stay away from this for a technical email like this. Plus it's not even complex so you could just replaced it with a grey background and actual text.

If you want to keep the image then you need to left-align the image and set the table cell's background to the same grey so when it expands it's still on the left and the colour fills the extra space.
 
One thing with an HTML email like that it to put a width on everything. Such as your images and maybe even TD if it is being a pain. Personally I would set a background colour on your banner and write it as text. Most people wont bother clicking download images and they'll get a blank space.
 
I'd wrap everything up in:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" valign="top" align="center">
<table width="800" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="800" cellpadding="0" cellspacing="0">
<!-- CONTENT -->
</td>
</tr>
</table>
</td>
</tr>
</table>
 
You must log in or register to reply here.
Back
Top Bottom