Issues With Outlook Adding Padding To Email Signature Images - html

I'm trying to create an email signature and it looks fine in my web browser.
(https://i.postimg.cc/Pq2v5msd/Email-Right.png)
However, when I add it to Outlook, it creates weird padding around my image cells.
(https://i.postimg.cc/d0qTF5fW/Email-Wrong.png)
I'm not sure what step I'm missing in my code. Can I get some help please?
<html>
<head>
<title>Test Email</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Test Email.psd) -->
<table id="Table_01" width="510" height="170" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="7">
<a href=https://www.website.com><img src="https://i.postimg.cc/HnQHs6wP/Email-Test-01.jpg" width="159" height="170" alt=""></td>
<td colspan="2" rowspan="2">
<img src="https://i.postimg.cc/BZDJgnrc/Email-Test-02.jpg" width="313" height="79" alt=""></td>
<td>
<a href=https://www.linkedin.com><img src="https://i.postimg.cc/9FYV6NFD/Email-Test-03.jpg" width="38" height="43" alt=""></td>
<td height="43" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.facebook.com><img src="https://i.postimg.cc/VL8mHc1y/Email-Test-04.jpg" width="38" height="43" alt=""></td>
<td height="36" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href="tel:7777777777"><img src="https://i.postimg.cc/rwycMCKQ/Email-Test-05.jpg" width="110" height="29" alt=""></td>
<td rowspan="2">
<a href="mailto:email#email.com"><img src="https://i.postimg.cc/RZPmF6t9/Email-Test-06.jpg" width="203" height="29" alt=""></td>
<td height="7" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.youtube.com><img src="https://i.postimg.cc/QMH3W8g7/Email-Test-07.jpg" width="38" height="42" alt=""></td>
<td height="22" nowrap></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<a href=https://goo.gl/maps><img src="https://i.postimg.cc/Pq9kWgKR/Email-Test-08.jpg" width="313" height="39" alt=""></td>
<td height="20" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.website.com><img src="https://i.postimg.cc/B6FfMmVQ/Email-Test-09.jpg" width="38" height="42" alt=""></td>
<td height="19" nowrap></td>
</tr>
<tr>
<td colspan="2">
<img src="https://i.postimg.cc/D0KkD19Q/Email-Test-10.jpg" width="313" height="23" alt=""></td>
<td height="23" nowrap></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<div style="background-color:#FFFFFF">
<style>
hr {
height: 1px;
background-color: #9d9d9d;
border: none;
}
div {
padding-top: 5px;
padding-right: 8px;
padding-bottom: 1px;
padding-left: 8px;
}
</style>
<body>
<hr>
<span style="font-size:9pt; font-family: 'Cambria','times new roman','garamond',serif; color:#223488;">This email may contain confidential and/or proprietary information. If you are not the intended addressee or have received this email in error, please inform the sender immediately and destroy this email. Unauthorized copying and/or forwarding of this email is strictly prohibited.
</p>
</div>
</body>
</html>

Related

Email Footer - creating HTML footer but when added to outlook white space appears between the slices

I've created an email footer by creating an image in photoshop and then slicing the image, which generates a base code. However, when it is added to Outlook, white space appears in the table and can't remove. I've tried various styles but it still has space.
Please see image where the 2 gaps are, there would be more gaps but because of the white background they don't show
The code is below, any advice would be much appreciated!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style meadia="screen" type="text/css">
td {line-height:0; font-size: 0.0cm; }
img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
<html>
<head>
<title>Website Style</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Website Style.pdf) -->
<table id="Table_01" width="601" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="6">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_01.png" width="600" height="47" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="47" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="3">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_02.png" width="292" height="118" alt=""></td>
<td>
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_03.png" width="308" height="82" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="82" alt=""></td>
</tr>
<tr>
<td>
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_04.png" width="308" height="27" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_05.png" width="308" height="24" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_06.png" width="292" height="15" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_07.png" width="22" height="120" alt=""></td>
<td rowspan="3">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_08.png" width="80" height="87" alt=""></td>
<td rowspan="3">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_09.png" width="78" height="87" alt=""></td>
<td rowspan="3">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_10.png" width="81" height="87" alt=""></td>
<td rowspan="3">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_11.png" width="31" height="87" alt=""></td>
<td>
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_12.png" width="308" height="31" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td>
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_13.png" width="308" height="35" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="35" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_14.png" width="308" height="54" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="https://www.WEBSITE.co.uk//uploads/Website-Style_15.png" width="270" height="33" alt=""></td>
<td>
<img src="spacer.gif" width="1" height="33" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

This is likely because of the way Outlook renders HTML using Microsoft Word, automatically adding whitespace around certain elements.
I always include these lines of CSS to prevent the styling that is applied automatically by email clients.
table {
border-collapse: collapse;
}
img, a img {
border: 0;
outline: none;
text-decoration: none;
}
/* Force Hotmail/Outlook.com to display line heights normally. */
table, td {
mso-table-lspace: 0;
mso-table-rspace: 0;
}
/* Remove spacing between tables in Outlook 2007 and up. */
#outlook a {
padding: 0;
}
Maybe try adding these and see if it helps?

Force Gmail for iPhone to render table cells at their designated widths?

Table cell widths are staggered in iPhone Gmail.
Is there a way to force Gmail for iPhone to render table cells at their designated widths? Oddly, the multi-slice rows expand to the set 'width:650'. The single slice rows are narrower although they are also set to 'width:650'.
As far as I can tell, my emails look perfect in all desktop email clients - even Outlook! It also looks fine in Mail for iPhone.
I've tried using 'border-collapse:collapse', 'width:100%' on the tables and td's, and finally 'table-layout:fixed'.
This is the HTML:
`
<!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>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</title>
</head>
<body>
<img border="0" style="display:block;" src="spacer.gif" width="1" height="1" />
<table bgcolor="#fff" border="0" align="center" cellpadding="0" cellspacing="0" style="table-layout:fixed;width:650px;">
<tbody>
<tr>
<!--/*************** BEGIN LEAD ***************/ -->
<td align="left" valign="top" bgcolor="#fff" width="650"><span id="part1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
<!-- /*************** END LEAD ***************/ -->
</tr>
<!-- /*************** BEGIN HEADER INC ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="650"><span style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#666; line-height:13px;margin-top:2px;"><a style="color:#666; text-decoration:underline;line-height:13px;" href="">XXXXXXXXXXXXXX</a> iXXXXXXXXXXXXXXXXXXX<a style="color:#666; text-decoration:underline;font-size:10px;line-height:13px;" href=""> XXXXXXXXXXXX</a>XXXXXXXXXXXXXXXXX<br />
<span style="font-weight:bold;">XXXXXXXXXXXXXXXXX</span> XXXXXXXXXXXXXXXX</span></td>
</tr>
<tr>
<td width="650"><img src="spacer.gif" width="650" height="46" border="0" style="display: block;" /></td>
</tr>
<tr>
<td><table id="Table_01" width="650" height="47" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="280"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_01.gif" width="280" height="47" alt="Territory Ahead"> </td>
<td width="370"><img border="0" style="display:block;margin:0;padding:0;" src="spacer3_02.gif" width="370" height="47" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td><table id="Table_01" width="650" height="31" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="97"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_03.gif" width="97" height="31" alt="Men's"> </td>
<td width="90"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_04.gif" width="90" height="31" alt="Women's"> </td>
<td width="93"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_05.gif" width="93" height="31" alt="Isabella Bird"> </td>
<td width="132"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_06.gif" width="132" height="31" alt="Men's Clearance"> </td>
<td width="83"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_07.gif" width="83" height="31" alt="Women's Clearance"> </td>
<td width="155"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_08.gif" width="155" height="31" alt="eGift Cards"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-top: solid 1px #b69358;" width="650">
<tr>
<td width="650" style="height:8px;" ></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- /*************** END HEADER INC ***************/ -->
<!-- /*************** BEGIN PROMO ***************/ -->
<!-- /*************** END PROMO ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><!-- /*************** BEGIN MAIN ***************/ -->
<table id="Table_01" width="650" height="1595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="650" height="352" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.jpg" width="650" height="405" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.jpg" width="650" height="408" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_04.jpg" width="650" height="430" alt=""></td>
</tr>
</table>
<!-- /*************** END MAIN ***************/ --></td>
</tr>
<!-- /*************** BEGIN FOOTER INC ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><table width="650" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="650"><table id="Table_01" width="650" height="32" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="125"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="125" height="32" alt=""></td>
<td width="88"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.gif" width="88" height="32" alt=""></td>
<td width="158"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.gif" width="158" height="32" alt=""></td>
<td width="105"><img border="0" style="display:block;" src="spacer_04.gif" width="105" height="32" alt=""></td>
<td width="31"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_05.gif" width="31" height="32" alt=""></td>
<td width="31"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_06.gif" width="31" height="32" alt=""></td>
<td width="112"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_07.gif" width="112" height="32" alt=""></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td align="center" style="padding-top:20px;" width="650"><span style="font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#666; line-height:13px;"><a style="font-size:10px;color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXXX</a> | <a style="font-size:10px; color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXX</a><br />
<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
<tr>
<td width="650"><span style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000;"><img src="spacer.gif" width="650" height="49" border="0" style="display: block;margin:0;padding:0;"></span></td>
</tr>
</tbody>
</table></td>
</tr>
<!-- /*************** END FOOTER INC ***************/ -->
<!-- /*************** BEGIN DISC ***************/ -->
<tr>
<td align="left" valign="top" bgcolor="#fff" width="650"><span style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
<!-- /*************** END DISC ***************/ -->
</tbody>
</table>
</body>
</html>
`

Finally found the solution! For an image to render at full width in the Gmail mobile app, the img tag must contain the style property set to style="display:block;min-width:650px;. This forces the content to full width as the Gmail mobile app is programmed to 'auto-adjust' the size of elements within the email. Thanks for your help on this Jon!

In the sliced rows, you don't have width="" set in your <td> tags. I know it is in the image tags, but it might make a difference.
Also try using style="margin: 0; border: 0; padding: 0; display: block;" on your images, it may help.
Try those 2 things - if they don't help, update and re-post the code so we can eliminate those potential issues. A screenshot/image of the error might also help.

Avoid using rowspan for email comms

I've always used rowspan for web site development but now designing and developing email comms rowspan, it appears constantly breaks. In multiple clients it displays with a 10/20px gap. How can I avoid using row span even if I need to have two images side by side in an email (such as a header)?
<html>
<head>
<title>StPatricksDAy-PostCard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (StPatricksDAy-PostCard.psd) -->
<table id="Table_01" width="657" height="684" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="6">
<img src="images/StPatricksDAy-PostCard_01.gif" width="19" height="643" alt=""></td>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_02.gif" width="636" height="14" alt=""></td>
<td rowspan="6">
<img src="images/StPatricksDAy-PostCard_03.gif" width="2" height="643" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_04.gif" width="636" height="96" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_05.gif" width="636" height="9" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/StPatricksDAy-PostCard_06.jpg" width="257" height="523" alt=""></td>
<td>
<img src="images/StPatricksDAy-PostCard_07.gif" width="368" height="449" alt=""></td>
<td rowspan="3">
<img src="images/StPatricksDAy-PostCard_08.gif" width="11" height="524" alt=""></td>
</tr>
<tr>
<td>
<img src="images/StPatricksDAy-PostCard_09.gif" width="368" height="74" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/StPatricksDAy-PostCard_10.gif" width="625" height="1" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/StPatricksDAy-PostCard_11.gif" width="657" height="28" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/StPatricksDAy-PostCard_12.gif" width="657"
height="13" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Saved for web in Photoshop sliced page looks bad in IE

I made web page via Photoshop, sliced it and saved for web and uploaded the html file. It looks just fine in Firefox and Chrome, but IE it is whole different story. Any one know how to fix it and why I`m getting this black padding?
IE:
Firefox, Chrome & Safari:
Code:
<html>
<head>
<title>Shamir Applications</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Webpage08.psd) -->
<table id="Table_01" width="960" height="720" border="0" cellpadding="0" cellspacing="0" style="margin-right: auto; margin-left: auto;">
<tr>
<td colspan="11">
<img src="images/Webpage08_01.png" width="960" height="237" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/Webpage08_02.png" width="130" height="483" alt=""></td>
<td>
<img src="images/Webpage08_03.png" width="138" height="36" alt=""></td>
<td rowspan="6">
<img src="images/Webpage08_04.png" width="142" height="483" alt=""></td>
<td colspan="3">
<img src="images/Webpage08_05.png" width="138" height="36" alt=""></td>
<td rowspan="6">
<img src="images/Webpage08_06.png" width="140" height="483" alt=""></td>
<td colspan="3">
<img src="images/Webpage08_07.png" width="138" height="36" alt=""></td>
<td rowspan="6">
<img src="images/Webpage08_08.png" width="134" height="483" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/Webpage08_09.png" width="138" height="447" alt=""></td>
<td colspan="3">
<img src="images/Webpage08_10.png" width="138" height="13" alt=""></td>
<td colspan="3">
<img src="images/Webpage08_11.png" width="138" height="13" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Webpage08_12.png" width="14" height="146" alt=""></td>
<td>
<img src="images/Webpage08_13.png" width="110" height="110" alt=""></td>
<td rowspan="2">
<img src="images/Webpage08_14.png" width="14" height="146" alt=""></td>
<td rowspan="4">
<img src="images/Webpage08_15.png" width="16" height="434" alt=""></td>
<td>
<img src="images/Webpage08_16.png" width="110" height="110" alt=""></td>
<td rowspan="4">
<img src="images/Webpage08_17.png" width="12" height="434" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Webpage08_18.png" width="110" height="36" alt=""></td>
<td rowspan="3">
<img src="images/Webpage08_19.png" width="110" height="324" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Webpage08_20.png" width="138" height="17" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Webpage08_21.png" width="138" height="271" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Try to put this in your css file
img {
border:0;
padding:0;
margin:0;
}
or in the head tag write
<style type="text/css">
img {
border:0;
padding:0;
margin:0;
}
</style>

You could try switching from using the tables mode to using the css export instead?
With regard to Matei Mihai's answer you should probably add this as well:
img {
border:0;
padding:0;
margin:0;
display:block; /* This often removes extra spacing around images in IE */
}

Not able to determine Font and style in a page

I have a page but I am not able to determine it''s font style. I checked the view source but nothing is visible. Some lines are commented. Please let me know how to determine the font name:
<html>
<!-- InstanceBegin template="/Templates/inner.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title></title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #ECECEC;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style3 {
font-family: "Arial Unicode MS";
font-size: 16px;
line-height: 30px;
color: #333333;
}
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- InstanceBeginRepeat name="RepeatRegion1" -->
<!-- InstanceBeginRepeatEntry -->
<div align="center">
<!-- ImageReady Slices (Untitled-1) -->
<table id="Table_01" width="950" height="824" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="233" colspan="9"><img src="images/index_01.gif" width="950" height="233" alt=""></td>
</tr>
<tr>
<td height="57"><img src="images/index_02.gif" alt="" width="112" height="57" border="0"></td>
<td><img src="images/index_03.gif" alt="" width="87" height="57" border="0"></td>
<td colspan="2"><img src="images/index_04.gif" alt="" width="137" height="57" border="0"></td>
<td><img src="images/index_05.gif" alt="" width="161" height="57" border="0"></td>
<td><img src="images/index_06.gif" alt="" width="146" height="57" border="0"></td>
<td><img src="images/index_07.gif" alt="" width="130" height="57" border="0"></td>
<td><img src="images/index_08.gif" alt="" width="104" height="57" border="0"></td>
<td><img src="images/index_09.gif" alt="" width="73" height="57" border="0"></td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#FFFFFF"><img src="images/index_10.gif" width="232" height="507"></td>
<td height="307" colspan="6" valign="top" bgcolor="#FFFFFF">
<!-- InstanceBeginEditable name="EditRegion3" -->
<table width="716" height="493" border="0" cellpadding="0" cellspacing="0"><tr>
<td height="493" colspan="2" valign="top"><table width="719" height="529" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="74"><img src="images/parichaya.gif" width="600" height="93"></td>
</tr>
<tr>
<td valign="top"><table width="489" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td valign="top" class="style3">नाव</td>
<td valign="top" class="style3">श्री.शशिकांत जयवंतराव शिंदे</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">वडिलांचे नाव</td>
<td valign="top" class="style3">कै.जयवंतराव भाऊसाहेब शिंदे</td>
</tr>
<tr>
<td height="55"> </td>
<td valign="top" class="style3">आईचे नाव</td>
<td valign="top" class="style3">श्रीमती. कौशल्या भाऊसाहेब शिंदे</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">गाव</td>
<td valign="top" class="style3">हुमगाव, ता.जावली,जि.सातारा. <br>
बॉम्बे लिंक को-ऑप.हौसिंग सोसायटी,<br>
४ था मजला, सेक्टर नं.१७,<br>
वाशी, नवी.मुबंई ४००७०५</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">जन्म </td>
<td valign="top" class="style3">१९ ऑक्टोबर १९६३</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">जन्म ठिकाण</td>
<td valign="top" class="style3">हुमगाव, ता.जावली, जि.सातारा.</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">शिक्षण </td>
<td valign="top" class="style3">बी.कॉम.</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">न्यात भाषा </td>
<td valign="top" class="style3">मराठी, हिंदी व इंग्रजी.</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">पत्नीचे नाव </td>
<td valign="top" class="style3">सौ.तेजल शशिकांत शिंदे</td>
</tr>
<tr>
<td> </td>
<td valign="top" class="style3">अपत्ये </td>
<td valign="top" class="style3">तेजस, साहिल.</td>
</tr>
<tr>
<td width="24"> </td>
<td width="173" valign="top" class="style3">छंद</td>
<td width="270" valign="top" class="style3">शेती,दुग्धप्रक्रिया.<br><br>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr></table>
<!-- InstanceEndEditable -->
</td>
</tr>
<tr>
<td colspan="9" background="images/index_13.gif" height="103"> </td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="112" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="87" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="161" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="146" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="130" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="104" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="73" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
<!-- InstanceEndRepeatEntry -->
<!-- InstanceEndRepeat -->
</body>
<!-- InstanceEnd -->
</html>

the only text i see has style3
firebug will show it too you
it is 'Arial Unicode MS'
but why use .style3 in the css as selector when you can use:
table td{
font-family: "Arial Unicode MS";
font-size: 16px;
line-height: 30px;
color: #333333;
}

there is a style specified
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
So i think it may be verdana.
But style2 is not specified anywhere style3 is defined for the td class so it might be Arial.
Use Firefox Addon - Firebug it will shows style sheets, js and also html

The styles being applied are these two ..
body {
background-color: #ECECEC;
}
.style3 {
font-family: "Arial Unicode MS";
font-size: 16px;
line-height: 30px;
color: #333333;
}
so the font-family is over-written by "Arial Unicode MS" ..
Observe everywhere style3 is being assigned as class to all the <td> tags and style2 is not being used anywhere ..
One thing you can do to get confirmed about my words .. Just delete .style2 .style3 and body styles in your code one by one and observe the changes in Browser ..
There are no lines commented .. To comment in CSS we use /* Comment line here*/ (for a quick reference) Here is a link for reference on comments

You should definitely use the Firebug plugin for Firefox.
Among other things it adds pect element" option to the contextmenu, so you can access all information by right-clicking an element.
If there is no font given via HTML and CSS, the displayed font will probably be your default browser/system font.

Do you mean programmatically via JavaScript, or using a browser tool?
Using a browser tool, the "computed styles" function in "inspect elements" in Firebug is a good bet, as the other answerers point out as well. It will give you something even if there was no font specified at all (in my case, "serif").
However, even the computed style gives you only the specified font-family and not the font actually used. As far as I know from my JavaScript attempts in that area, only IE returns those.
But I'm waiting for your reaction first before delving deeper into this - maybe the Firebug hint is already all you need.