Email signiture help

Hello everyone a friend of mine has asked me to make him a email signature he wants a border ive quickly organised code in Dreamweaver because i have been having difficulty doing it by hand what i want to do is have a border around it but somthing seems to be in the way making it go full page width.

I appreciate any help with this thank you.

<!doctype html>
<!--Quite a few clients strip your Doctype out, and some even apply their own. Many clients do honor your doctype and it can make things much easier if you can validate constantly against a Doctype.-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email template By Adobe Dreamweaver CC</title>

<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
<!-- When use in Email please remove all comments as it is removed by Email clients-->
<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->

<style type="text/css">
body {
	margin: 0;
	border-radius: 4px;
	border: medium solid #070707;
}
body, table, td, p, a, li, blockquote {
	-webkit-text-size-adjust: none!important;
	font-family: Merienda, 'Times New Roman', serif;
	font-style: normal;
	font-weight: 400;
}
button{
	width:90%;
}
@media screen and (max-width:600px) {
/*styling for objects with screen size less than 600px; */
body, table, td, p, a, li, blockquote {
	-webkit-text-size-adjust: none!important;
	font-family: Merienda, 'Times New Roman', serif;
}
table {
	/* All tables are 100% width */
	width: auto;
}
.footer {
	/* Footer has 2 columns each of 48% width */
	height: auto !important;
	max-width: 48% !important;
	width: 48% !important;
}
table.responsiveImage {
	/* Container for images in catalog */
	height: auto !important;
	max-width: 30% !important;
	width: 30% !important;
}
table.responsiveContent {
	/* Content that accompanies the content in the catalog */
	height: auto !important;
	max-width: 66% !important;
	width: 66% !important;
}
.top {
	/* Each Columnar table in the header */
	height: auto !important;
	max-width: 48% !important;
	width: 48% !important;
}
.catalog {
	margin-left: 0%!important;
}

}
@media screen and (max-width:480px) {
/*styling for objects with screen size less than 480px; */
body, table, td, p, a, li, blockquote {
	-webkit-text-size-adjust: none!important;
	font-family: Merienda, 'Times New Roman', serif;
}
table {
	/* All tables are 100% width */
	width: 100% !important;
	border-style: none !important;
}
.footer {
	/* Each footer column in this case should occupy 96% width  and 4% is allowed for email client padding*/
	height: auto !important;
	max-width: 96% !important;
	width: 96% !important;
}
.table.responsiveImage {
	/* Container for each image now specifying full width */
	height: auto !important;
	max-width: 96% !important;
	width: 96% !important;
}
.table.responsiveContent {
	/* Content in catalog  occupying full width of cell */
	height: auto !important;
	max-width: 96% !important;
	width: 96% !important;
}
.top {
	/* Header columns occupying full width */
	height: auto !important;
	max-width: 100% !important;
	width: 100% !important;
}
.catalog {
	margin-left: 0%!important;
}
button{
	width:90%!important;
}
}
</style>
</head>
<body yahoo="yahoo">
<table width="100%"  cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td><table width="600"  align="center" cellpadding="0" cellspacing="0">
          <!-- Main Wrapper Table with initial width set to 60opx -->
          <tbody>
            <tr> </tr>
            <tr> 
              <!-- HTML Spacer row -->
              <td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left"  cellpadding="0" cellspacing="0">
                  <tr> </tr>
                </table></td>
            </tr>
            <tr> 
              <!-- HTML IMAGE SPACER -->
              <td style="font-size: 0; line-height: 0;" height="20"><table align="left"  cellpadding="0" cellspacing="0" >
                  <tr>
                    <td ><img src="file:///C|/Users/Trytel Pty Ltd/Desktop/trytel-cropped-image---Copy.jpg"  alt="" height="" width="204" class=""></td>
                  </tr>
                </table></td>
            </tr>
            <tr> 
              <!-- HTML Spacer row -->
              <td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left"  cellpadding="0" cellspacing="0">
                  <tr>
                    <td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td>
                  </tr>
                </table></td>
            </tr>
            <tr> 
              <!-- Introduction area -->
              <td align="left" style="font-size: 14px; font-style: normal; font-weight: 100; color: #929292; line-height: 1.8; text-align:justify; padding:10px 20px 0px 20px; font-family:Merienda, 'Times New Roman', serif, sans-serif;">"vodafone business"<br>
                Jason Arthur <br>
                525 <br>
                Collins Street Melbourne Victoria 3000 <br>
                Ph: 1300 879 835 <br>
              Email: Jason@vodafonebusiness.com.au <br></td>
              <td><table width="96%"  align="left" cellpadding="0" cellspacing="0">
                  <tr> 
                    <!-- row container for TITLE/EMAIL THEME -->                  </tr>
                  <tr> 
                    <!-- row container for Tagline -->                  </tr>
                  <tr>
                    <td style="font-size: 0; line-height: 0;" height="20"><table width="96%" align="left"  cellpadding="0" cellspacing="0">
                        <tr> 
                          <!-- HTML Spacer row -->
                          <td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td>
                        </tr>
                      </table></td>
                  </tr>
                  <tr> 
                    <!-- Row container for Intro/ Description -->                  </tr>
                </table></td>
            </tr>
            <tr> 
              <!-- HTML Spacer row -->
              <td style="font-size: 0; line-height: 0;" height="10"><table width="96%" align="left"  cellpadding="0" cellspacing="0">
                  <tr>
                    <td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td>
                  </tr>
                </table></td>
            </tr>
            <tr> </tr>
            <tr> 
              <!-- HTML spacer row -->            </tr>
            <tr bgcolor="#d0cfcf"> </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Hi,

You seem to have applied the border to the body element which will mean that it will be 100% width. You could set the body to max-width:600px and margin:auto but as this is email we are talking about you are better applying it to the table in question.

Add a class to the nested table that is 600px wide and use this code instead of the body code.

.centred-table {
	margin: 0 auto;
	border-radius: 4px;
	border: 2px solid #070707;
}


<table width="100%"  cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td><table class="centred-table" width="600"  align="center" cellpadding="0" cellspacing="0">

im trying to make the border go over the whole thing.
also thank you paul , i really appreciate the help

The whole thing is the centred table:)

Either you want the border on the 600px content or you want it on the 100% width (which you had originally). There seems to be no other choice to me.

However, we may be talking at cross purposes so you may need to clarify the problem.

ohhhh sorry i mis understood.

Thank you Paul got that sorted

im having a slight problem with putting in the facebook icons on the right pretty much level to the trytel logo

<!doctype html>
<!--Quite a few clients strip your Doctype out, and some even apply their own. Many clients do honor your doctype and it can make things much easier if you can validate constantly against a Doctype.-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email template By Adobe Dreamweaver CC</title>

<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
<!-- When use in Email please remove all comments as it is removed by Email clients-->
<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->

<style type="text/css">
body {
	margin: 0;
	max-width: auto;
	min-height: auto;
	min-width: auto;
}
body, table, td, p, a, li, blockquote {
	-webkit-text-size-adjust: none!important;
	font-family: Merienda, 'Times New Roman', serif;
	font-style: normal;
	font-weight: normal;
	max-width: auto;
	max-height: auto;
	width: 650px;
}
button{
	width:90%;
}
@media screen and (max-width:600px) {
/*styling for objects with screen size less than 600px; */
body, table, td, p, a, li, blockquote {
	-webkit-text-size-adjust: none!important;
	font-family: Merienda, 'Times New Roman', serif;
}
table {
	/* All tables are 100% width */
	width: auto;
}
.footer {
	/* Footer has 2 columns each of 48% width */
	height: auto !important;
	max-width: 48% !important;
	width: 48% !important;
}
table.responsiveImage {
	/* Container for images in catalog */
	height: auto !important;
	max-width: 30% !important;
	width: 30% !important;
}
table.responsiveContent {
	/* Content that accompanies the content in the catalog */
	height: auto !important;
	max-width: 66% !important;
	width: 66% !important;
}
.top {
	/* Each Columnar table in the header */
	height: auto !important;
	max-width: 48% !important;
	width: 48% !important;
}
.catalog {
	margin-left: 0%!important;
}

}
@media screen and (max-width:480px) {
/*styling for objects with screen size less than 480px; */
body, table, td, p, a, li, blockquote {
	-webkit-text-size-adjust: none!important;
	font-family: Merienda, 'Times New Roman', serif;
}
table {
	/* All tables are 100% width */
	width: 100% !important;
	border-style: none !important;
}
.footer {
	/* Each footer column in this case should occupy 96% width  and 4% is allowed for email client padding*/
	height: auto !important;
	max-width: 96% !important;
	width: 96% !important;
}
.table.responsiveImage {
	/* Container for each image now specifying full width */
	height: auto !important;
	max-width: 96% !important;
	width: 96% !important;
}
.table.responsiveContent {
	/* Content in catalog  occupying full width of cell */
	height: auto !important;
	max-width: 96% !important;
	width: 96% !important;
}
.top {
	/* Header columns occupying full width */
	height: auto !important;
	max-width: 100% !important;
	width: 100% !important;
}
.catalog {
	margin-left: 0%!important;
}
button{
	width:90%!important;
}
}
</style>
</head>
<body yahoo="yahoo">
<table width="100" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
<td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<table width="50%"  cellspacing="0" cellpadding="0">


<table width="200px"  cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td><table class="centred-table" width="600"  align="center" cellpadding="0" cellspacing="0">
          <!-- HTML Spacer row -->            </tr>
            <tr> 
              <!-- HTML IMAGE SPACER -->
              <td style="font-size: 0; line-height: 0; border-left-color: #F47D07; border-right-color: #F47D07; border-top-color: #F47D07; border-left-style: solid; border-right-style: solid; border-top-style: solid; border-left-width: 22px; border-right-width: 22px; border-top-width: 22px;" height="20"><img src="file:///C|/Users/Trytel Pty Ltd/Desktop/trytel-cropped-image---Copy.jpg"  alt="" height="" width="204" class=""><img src="../Desktop/1271084_10152203108461729_809245696_o.png" width="50" height="50" alt=""/>
                <table align="left"  cellpadding="0" cellspacing="0" >
                <tr>
                    <td>&nbsp;</td>
                  </tr>
                </table></td>
              <td>&nbsp;</td>
            </tr>
            <tr> 
              <!-- HTML Spacer row -->
            </tr>
            <tr> 
              <!-- Introduction area -->
              <td align="left" style="font-size: 14px; font-style: normal; font-weight: 100; color: #929292; line-height: 1.8; text-align: justify; padding: 10px 20px 0px 20px; font-family: Merienda, 'Times New Roman', serif, sans-serif; border-left: 22px solid #F47D07; border-right: 22px solid #F47D07; border-bottom-color: #F47D07; border-bottom-style: solid; border-bottom-width: 23px;"><strong>"Telecommunication Solutions"<br>
Jason Arthur <br>
525 Collins Street Melbourne Victoria 3000 <br>
Ph: 1300 879 835 <br>
Mobile: 0481 563 384 <br>
Email: Trytel.com.au &nbsp; &nbsp; </strong><strong>&nbsp;</strong><br></td>
              <td><table width="auto"  align="left" cellpadding="0" cellspacing="0">
                  <tr> 
                    <!-- row container for TITLE/EMAIL THEME -->                  </tr>
                  <tr> 
                    <!-- row container for Tagline -->                  </tr>
                  <tr>
                    <td style="font-size: 0; line-height: 0;" height="20"><table width="auto" align="left"  cellpadding="0" cellspacing="0">
                        <tr> 
                          <!-- HTML Spacer row -->
                          <td style="font-size: 0; line-height: 0;" height="20">&nbsp;</td>
                        </tr>
                      </table></td>
                  </tr>
                  <tr> 
                    <!-- Row container for Intro/ Description -->                  </tr>
                </table></td>
            </tr>
            <tr> 
              <!-- HTML Spacer row -->            </tr>
            <tr> </tr>
            <tr> 
              <!-- HTML spacer row -->            </tr>
            <tr bgcolor="#d0cfcf"> </tr>
          </tbody>
        </table></td>
    </tr>
  <td height="384"></tbody>
</table>
</body>
</html>

Hi,

It’s a little awkward as I can’t see the images for testing and I’m not sure what you mean about “on the right”?

The images seemed to be next to each other but if you want one image at the far right (as if it were floated right) then for html email you would create a two celled table for the images and align one cell left and the other right (text-align:left and text-align:right ensuring that the image is display:inline).

Remember that in html email you can’t do positioning or floating so you have to create the positioning with table cells.

Okay thank you Paul

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.