...

View Full Version : Creating HTML email, formatting issues



jmejiaa
09-07-2011, 03:38 AM
Please excuse me, I have not searched this specific forum just yet but I have been on google for hours. I posted on the forum I basically live on but it's motorcycle related and even though some guys will help I'm sure I'll get more hits here.

In the mean time I'll keep searching!

Problem:(copy/paste - like I said I am pretty new to HTML besides a college course, I mainly develop in Java/SQL.)

know little about html and creating html emails in general, it seems they are pain in the *** because besides htmlo standards, some clients will show stuff different as they force different standards and strip out content.

Basically, I volunteered to create an invitation and I'm doing a border around it, the top and bottom are images, the left and right are images within columns. I'm all set pretty much except this formatting

I have something like this
Table
row
column 1 - images - this is my left border
column 2 - body consisting or text/images
column 3 - images - this is my right border.

Problem is, the second column has a longer length then the borders, getting the following effect:


I can't use CSS because gmail strips it, so I'm left with basic html. If I could align the border images to the top instead of them centering I think I could manage it. I've even tried creating images of the paws in sets of two and adding one by one until everything is good, but this isn't static and it changes in gmail....

Help? I'm doing this to help out the local animal shelter and would hate to come back with something not looking right...

Edit - I am using dreamweaver to start but at this point am pretty much working with the code, the interface is nice for instant viewing though.

jmejiaa
09-07-2011, 05:14 AM
I used valign to get it to the top, still no dice though :(

I sent it without the right/left borders so hopefully they can use that for now. I'd still like to figure this out though so I can help them in the future.

teedoff
09-07-2011, 05:17 AM
You'll get much more help if you post the complete code you're working with along with the CSS.

jmejiaa
09-07-2011, 05:38 AM
That would help! I'm getting closer by putting a table on the top for the border and in the bottom, this actually fixed my issue with the borders, but it seems the clients are expanding the text, specyfying size doesn't help.

Didn't realized font was specified in each tag, I can try adding a set size there...Seems dreamweaver added all the font tags...

Images are hosted in my picasa right now, I've asked the shelter if they have a spot for them

here is my code, don't laugh too bad. This is literally a couple of hours of experience doing this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"></style>

</head>

<body > <font font face="Comic Sans MS" size="3">
</table>
<table border="0" width="650" >
<tr >
<td width="50" valign="top">
<img src="https://lh4.googleusercontent.com/-zqPd9GuAdlA/Tma6qwWKsxI/AAAAAAAADzw/GxEfIwo2kpk/singlePaw.jpg" >
</td>
<td width="650" valign="top"><img src="https://lh6.googleusercontent.com/-F3UQlDagySw/TmajvAn_HFI/AAAAAAAADzA/GMdhran9olA/HorizontalPawsWhite.jpg" width="650">
</td>
<td width="50" valign="top">
<img src="https://lh4.googleusercontent.com/-zqPd9GuAdlA/Tma6qwWKsxI/AAAAAAAADzw/GxEfIwo2kpk/singlePaw.jpg" >
</td>
</tr>
</table>
<table border="0" width="650" >
<tr >
<td width="50" valign="top">
<img src="https://lh6.googleusercontent.com/-LdFcPCNj29E/TmattX82iuI/AAAAAAAADzo/0aZ6h1rP6xo/verticalPawsWhite.jpg" >
<img src="https://lh6.googleusercontent.com/-LdFcPCNj29E/TmattX82iuI/AAAAAAAADzo/0aZ6h1rP6xo/verticalPawsWhite.jpg">
<img src="https://lh6.googleusercontent.com/-LdFcPCNj29E/TmattX82iuI/AAAAAAAADzo/0aZ6h1rP6xo/verticalPawsWhite.jpg"></td>
<td width="650" valign="top"><img src="https://lh6.googleusercontent.com/-i82dpNBxvs8/TmaqeMYP1pI/AAAAAAAADzY/7kE3Ma_UzRs/logoHeader.jpg" width="650" >

</p>
<center>
<p><img src="https://lh4.googleusercontent.com/-ME8uyIg3Luo/TmavAWIIkXI/AAAAAAAADzs/JDmIpxAprgY/crbs081209.jpg"></p>
</center>
<p> <center><strong>We Are Throwing A Big Party In Your Honor!*</strong></center></p>
<p>Hello Furry Friend,&nbsp; <br />
We are excited that you are so happy in your new home.&nbsp; But, we have to confess, we miss you A WHOLE LOT!&nbsp; So, we all got together and came up with a fabulous idea– We are throwing a big party in your honor!<br />
If you are a dog who was adopted from Pets Alive Westchester, we hope that you will come - and bring your people with you, of course!** If you are a cat or a bunny rabbit, you&rsquo;ll probably be just as happy to spend the day at home. But please send your people, so they can tell us all about you.<br />
Will you show off your new family and tell everyone how great you are doing?&nbsp; <br />
<strong><em>Yes, it&rsquo;s FREE!&nbsp; Because we want to show you just how much we love you. </em></strong><br />
<strong>When:</strong> Sunday, October 9, 2011 from 12-3p.m<br />
<strong>Where:</strong> Pets Alive Westchester.&nbsp; 100 Warehouse Lane South, Elmsford N.Y &nbsp;<br />
<strong>What:</strong> Mostly we want to reminisce and love on you, but there will also be lots of good food, music, and fun things for you to do, including:<br />
<strong>Human/Dog look-alike Competition:</strong> They say people start to look like their dogs after a while, so get your most special person to spruce up a bit so he or she resembles you even more!<br />
<strong>Clipboard Contests:</strong> Our judges will be walking around with their clipboards looking for the winners – so bone up (no pun intended) on your fast tail wagging, speedy sits and your best trick - to name just a few of the fabulous, fun contests you can compete in!&nbsp;<br />
<strong>The Parade of Heroes:</strong> This is your big chance to strut your stuff in front of everyone, and to compete for the chance to be crowned King or Queen (for details about how to enter to win, please see below).</p>
<p><strong>Please RSVP BY Sunday, October 2nd</strong>, and tell us who you will bring along with you. <br />
<strong>HOW TO RSVP </strong><br />
Reply to this message, or send email to <a href="mailto:reunion@petsalivewest.org" target="_blank">reunion@petsalivewest.org</a><u>.</u></p>
<p><strong>Please include </strong><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Your name (the one we called you before you went home).<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Your new name.<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The first and last names of the humans that you will be bringing (and their ages if any of them are children).<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; The date you adopted your new family.<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; How far you will be traveling to attend the reunion party.<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Please attach a photo of yourself.<br />
<strong>How to Win The Title King of Heroes or Queen of Heroes.</strong><br />
To enter for a chance to be crowned the Pets Alive Westchester Kingof Heroes or Queen of Heroes, just tell us, in 500 words or less, why you should be chosen.&nbsp; <br />
Send to: <a href="mailto:reunion@petsalivewest.org" target="_blank">reunion@petsalivewest.org</a> by Sunday, October 2nd.<br />
<strong>We can&rsquo;t wait to see you...</strong>&nbsp;<strong> </strong><strong>PLEASE COME.</strong><br />
<strong>Love, </strong><br />
<strong>All Your Friends at Pets Alive Westchester</strong></p>
<p>&nbsp;</p>





<p style="text-align: center;"><font face="Comic Sans MS">&nbsp;Please stay in touch. You are our partners in rescue. Follow us on facebook and twitter<br /><br />&nbsp; <span style="font-size: xx-small;"> <a href="http://www.twitter.com/PetsAliveWest" target="_blank"><img src="http://www.petsalive.com/images/twitter.png" border="0" alt="Twitter" hspace="15" width="48" height="44" /></a> <a href="http://www.facebook.com/PetsAliveW" target="_blank"><img src="http://www.petsalive.com/images/facebook.png" border="0" alt="Facebook" hspace="15" width="48" height="44" /></a> </span></font><font face="Comic Sans MS"><img src="https://lh6.googleusercontent.com/-relENltsHDQ/TmalsmDhTgI/AAAAAAAADzI/s7IRbMvY8ic/footerWhite.jpg" width="650"></font></p></td>

<td width="50" valign="top">
<img src="https://lh6.googleusercontent.com/-LdFcPCNj29E/TmattX82iuI/AAAAAAAADzo/0aZ6h1rP6xo/verticalPawsWhite.jpg" >
<img src="https://lh6.googleusercontent.com/-LdFcPCNj29E/TmattX82iuI/AAAAAAAADzo/0aZ6h1rP6xo/verticalPawsWhite.jpg">
<img src="https://lh6.googleusercontent.com/-LdFcPCNj29E/TmattX82iuI/AAAAAAAADzo/0aZ6h1rP6xo/verticalPawsWhite.jpg"></td>
</tr>

</table>
<table border="0" width="650" >
<tr >
<td width="50" valign="top">
<img src="https://lh4.googleusercontent.com/-zqPd9GuAdlA/Tma6qwWKsxI/AAAAAAAADzw/GxEfIwo2kpk/singlePaw.jpg" >
</td>
<td width="650" valign="bottom"><img src="https://lh6.googleusercontent.com/-F3UQlDagySw/TmajvAn_HFI/AAAAAAAADzA/GMdhran9olA/HorizontalPawsWhite.jpg" width="650">
</td>
<td width="50" valign="top">
<img src="https://lh4.googleusercontent.com/-zqPd9GuAdlA/Tma6qwWKsxI/AAAAAAAADzw/GxEfIwo2kpk/singlePaw.jpg" >
</td>
</tr>
</table>
</font>
</body>

</html>

jmejiaa
09-07-2011, 05:58 AM
OK basically playing with the paws, I added a couple until it looks OK in gmail and hotmail. Now to continue testing...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum