Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Creating HTML email, formatting issues

    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!

    Problemcopy/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.
    Attached Thumbnails Attached Thumbnails Creating HTML email, formatting issues-untitled.jpg  

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You'll get much more help if you post the complete code you're working with along with the CSS.
    Teed

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    PHP Code:
    <!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.&nbspButwe have to confesswe miss you A WHOLE LOT!&nbsp;  Sowe all got together and came up with a fabulous idea&#8211; We are throwing a big  party in your honor!<br />
      
    If you are a dog who was adopted  from Pets Alive Westchesterwe hope that you will come - and bring your people  with youof course!** If you are a cat or a bunny rabbityou&rsquo;ll probably be just as happy to  spend the day at homeBut please send your peopleso 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>Yesit&rsquo;s FREE!&nbspBecause we want to  show you just how much we love you. </em></strong><br />
      <
    strong>When:</strongSundayOctober 92011 from 12-3p.m<br />
      <
    strong>Where:</strongPets Alive Westchester.&nbsp100 Warehouse Lane SouthElmsford  N.&nbsp;<br />
      <
    strong>What:</strongMostly we want to reminisce and love on youbut there will also  be lots of good foodmusic, and fun things for you to do, including:<br />
      <
    strong>Human/Dog look-alike Competition:</strongThey 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:</strongOur judges will be walking around with  their clipboards looking for the winners &#8211;  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:</strongThis 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 winplease see below).</p>
      <
    p><strong>Please RSVP BY SundayOctober 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 Heroesjust tell usin 500  words or lesswhy you should be chosen.&nbsp; <br />
        
    Send to: <a href="mailto:reunion@petsalivewest.org" target="_blank">reunion@petsalivewest.org</aby SundayOctober 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
    Last edited by jmejiaa; 09-07-2011 at 04:52 AM.

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK basically playing with the paws, I added a couple until it looks OK in gmail and hotmail. Now to continue testing...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •