Need help correcting code for HTML newsletter which will be used in Gmail

Question

In my browser looks ok, but when I move it to Gmail my #Container move under "K" letter in "Kamala" word inside my background image, and the other problem is when i send it as a e-mail, on the recieved e-mail everything in #Container are already under my background image.If it's not possible with divs i thi i should go back to tables, because i have so many problems now. I know that mistake is with me i want to learn, but from 2 days cannot make it the way it should be.

 <!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">
div#Container {
position: absolute;
left: 9px;
top: 15px;
 }

 div#Room {
margin-left: 83.5%;
margin-top: 11%;
width: 625px;
 }

 #Room span {
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-align: left;
font-size: 23px;
color: #522405;
 }

 #D { padding-left: 70px;
 }

 #GD { padding-left: 103px;
 }

 #GPV { padding-left: 53px;
 }

 div#Content {
margin-left: 83.5%;
margin-top: 1%;
width: 625px;
 }

 #Right {
position: absolute;
left: 1152px;
top: 222px;
 }

  img.Spacer {
margin-left: 10px;
 }

 div.content {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
color: black;
font-size: 17px;
font-weight: bold;
 }

 .BP {
vertical-align: text-top;
margin-top: 10px;
margin-left: 245px;
 }

 .table {
vertical-align: text-top;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
color: #002b55;
margin-left: 83.5%;
 }

 .TD {
margin-left: 30px;
 }

 .adress {
font-family: Times New Roman, Times, serif;
font-size: 10px;
text-align: center;
font-weight: bold;
color: #100073; 
 }

 .OOT {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #100073;
text-align:center;
 }

 .res {
vertical-align: top;
padding-left: 25px;
 }
</style>

</head>

<body>

<div align="center">

<img style="position: relative;" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BK_zpsa93ab347.png" alt="Background" />

</div>

<div id="Container">

<div id="Room" aling="left">

    <a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" >

    <img align="left" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/D_zpsf4ea5de8.jpg" border="0px" alt="Deluxe" />

    </a>

    <a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" >

    <img align="left" class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GD_zpse78278b7.jpg" border="0px" alt="Grand Deluxe" />

    </a>


    <a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" >

    <img align="left" class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GPV_zpsb381cd33.jpg" border="0px" alt="Grand Pool Villa" />

    </a>

    <br />

    <a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" style="text-decoration: none;"><span id="D">Deluxe</span></a>
    <a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" style="text-decoration: none;"><span id="GD">Grand Deluxe</span></a> 
    <a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" style="text-decoration: none;"><span id="GPV">Grand Pool Villa</span></a>
  </div>

  <div align="left" id="Content" class="content">Situated on a hill, Ayara Kamala offers a beautiful garden and ocean view rooms. The place of the hotel provides quiet, calm and romantic holiday away from all other hotels on Kamala Beach.
<br />
<br />

Big size of rooms, king size beds and impressive bathrooms, are making Ayara Kamala            perfect selection for couples who are looking for privacy and relaxing holiday.
 </div>

<table align="left" class="table" style="border-collapse: separate; border-spacing: 1px;" width="625" border="0">
 <tr>
  <td align="right" style="padding-left: 20px;" width="302"><a href="http://bit.ly/XSyPG5" title="Book Now !"><img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BP_zps15c948a1.png" border="0px" alt="Best Rate"/></a></td>
 <td width="321" valign="top"><table class="TD" style="border-collapse: separate; border-spacing: 0px;" border="0px">
 <tr>
 <td height="30" class="res" align="center"><a href="http://bit.ly/XSyPG5" title="B2B Online Booking"><span>www.b2b.onlyonetour.com</span></a></td>
 </tr>
 <tr>
 <td class="res" height="30" align="center"><span>Tel : (66) 02 - 688 - 8883 </span>      </td>
</tr>
<tr>
<td class="res" height="30" align="center"><a href="mailto:rsvn@onlyonetour.com" title="E-mail Reservation"><span>rsvn@onlyonetour.com</span></a></td>
</tr></table>
</td>
</tr>
</table>

<div align="center" id="Right"><a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour &amp; Travel Group Co., Ltd." target="_blank"><img width="149px" height="90px" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/logoOOT_zps24c21653.png" border="0px" alt="Logo" /></a>
<a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour &amp; Travel Group Co., Ltd." target="_blank"><span class="OOT">Only One Tour &amp; Travel<br />Group Co., Ltd.</span></a><br /><br />
<a style="text-decoration: none;" href="http://on.fb.me/XXqq56" title="Only One Tour Facebook Page" target="_blank"> <img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/facebook-logo-png-format-i18_zps83b6a9aa.png" width="145px" height="50px" border="0px" alt="FB"/></a><br /><br />
 <span class="adress">2128/9-11 Charoenkung Rd.,</span><br />
 <span class="adress">Watprayakrai, Bangkorleam,</span><br />
 <span class="adress">10120 Bangkok, Thailand.</span><br />
<a class="adress"  href="http://bit.ly/XSyPG5" target="_blank">www.b2b.onlyonetour.com</a><br />
<a class="adress" href="http://on.fb.me/XXqq56" target="_blank">www.onlyonetour.com (offline)</a>
 </div>

</div>

</body> 

</html>

what exactly is your issue? "It's still not correct" doesn't really help. — Liam, Mar 22 '13 at 11:10
I'd stick to tables when doing html emails, particularly if you end up sending them to multiple clients. — gaynorvader, Mar 22 '13 at 11:35
sorry i was hurry and didn't check what i wrote. Now I hope you understand my problem and somebody will be able to give me solution. — Dobriyan Petkov, Mar 22 '13 at 11:42
http://stackoverflow.com/a/14628167/637889 might help with a few links on what does and does not work in the various clients for HTML e-mail — andyb, Mar 22 '13 at 11:47

score 0 · Accepted Answer · answered Mar 22 '13 at 11:54

HTML emails are still having to be built primarily using tables due to the numerous email clients and their varying issues with other HTML elements like div tags. So if you're looking for this to be well received by a number of people (and therefore clients) it would be worth, as you suggest, doing it using tables.

See this for more detailed info on email clients and the support they offer: http://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/

I hope that gives you a little more info on the subject.

Need help correcting code for HTML newsletter which will be used in Gmail

1 Answers1