0

I have created a HTML Page
With Three images
Follwing is my code

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
<!--
.style9 {
	font-family: Arial;
	font-size: 12px;
}
.style10 {
	font-size: 11px;
	color: #FFFFFF;
}
.style12 {
	font-family: Arial;
	font-size: 11px;
	color: #FFFFFF;
}
.style13 {color: #FFFFFF}
-->
</style>
</head>
 
<body>
 
<table width="500" align="center" cellpadding="0" cellspacing="1" bgcolor="#BA131A">	<!-- Table tag open 1-->
  <tr> 
    <th height="313" valign="top" scope="col">
	<table width="500" align="center" cellpadding="0" cellspacing="0">  <!-- Table tag open 1.1--> 
 
        <tr> 
          <th valign="top" scope="col"><img src="http://www.xxx.com/BirthdayGreetings.jpg" width="500" height="58" longdesc="Imags/Birthday greeting emailer Finel 11.jpg" /></th>
        </tr>
        <tr> 
          <td><img src="http://www.xxx.com/Birthday.jpg" width="500" height="258" longdesc="Imags/Birthday .jpg" /></td>
        </tr>
      </table></th>  <!-- Table tag closed 1.1-->
  </tr>
  <tr> 
    <td height="39" align="left" valign="top">
<table width="384" align="center" cellspacing="0" cellpadding="0"><!-- Table tag open 1.2-->
        <tr> 
          <th width="380" align="left" valign="bottom"" class="style12" style="font-family:Arial; font-size:11px; color:#FFFFFF><p align="left"left"><div align="left">Dear 
              Client,<br />
              <br />
              XYZ wishes you a very Happy Birthday. We hope 
              you have a wonderful and prosperous year ahead. </div>
            <p align="left"></p>
            <p align="left" class="style13">&nbsp;</p>
            <p align="left">Regards</p></th>
        </tr>
      </table></td><!-- Table tag closed 1.2 -->
  </tr>
  <tr>
    <td height="40"><table width="500" cellspacing="0" cellpadding="0" ><!-- Table tag open 1.3-->
        <tr> 
          <th scope="col"><img src="http://www.xxx.com/BirthdayEE.jpg" width="501" height="35" longdesc="Imags/Birthday EE.jpg" /></th>
        </tr>
      </table></td><!-- Table tag closed 1.3 -->
  </tr>
  <tr> 
    <td height="90" cellspacing="0" cellpadding="0">
	<table width="390" cellspacing="0" cellpadding="0" align="center" ><!-- Table tag open 1.4-->
        <tr> 
          <th width="386" height="80" align="left" valign="top" style="font-family:Arial; font-size:11px; color:#FFFFFF><div align="left"><div align="left"><span class="style12"><strong>ABC 
              ABC</strong><br />
              ABC<br />
              XYZ and <br />
              PQR Ltd.</span><br /></div>
              </div></th>
        </tr>
      </table></td><!-- Table tag closed 1.4 -->
  </tr>
</table>	<!-- Table tag closed 1 -->
</body>
</html>

When i am sending this html page on rediff, gmail and Yahoo
On yahoo its opening with proper alignment
But not on rediff and gmail
I am not getting what is wrong
4
Contributors
3
Replies
4
Views
6 Years
Discussion Span
Last Post by RoyalElite96
0

To center an email in email clients
Create a 100% table, 1 row, 3 colums. In the center column of the first table, create another table with 1 column and 1 row and set the width to the physical width of the mailer. Set the width of the center <td> of the first table to the same width as the second table

Remember to add "style="display:block" to all images and add inline styling to each specific element

Edited by macneato: n/a

0

Don't use tables for layout. They are outdated. You could try something like this:

<div style="display: table-cell; width: 250px;">
<img src="your-image-1.png" />
</div>
<div style="display: table-cell; width: 250px;">
<img src="your-image-2.png" />
</div>
<div style="display: table-cell; width: 250px;">
<img src="your-image-3.png" />
</div>

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.