I have a table
<tr>Page header goes here</>
<tr valign="top">
<td align="center" height="100%" valign="top">
<center>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1">
<tbody>
<tr height="29%">
<td height="29%">
// to display the below tr in center of page
</td>
</tr>
<tr height="31%">
<td bgcolor="FFFFFF" height="31%" align="center" valign="top">
<table width="40%" height="31%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="16">
<img src="#Href("~/Content/themes/base/images/top_lef.gif")" width="16" height="100%" />
</td>
<td height="16" style="background-image: url('#Url.Content("~/Content/themes/base/images/top_mid.gif")')">
<img src="#Href("~/Content/themes/base/images/top_mid.gif")" width="16" height="100%" />
</td>
<td width="24">
<img src="#Href("~/Content/themes/base/images/top_rig.gif")" width="24" height="100%" />
</td>
</tr>
<tr>
<td width="16" style="background-image: url('#Url.Content("~/Content/themes/base/images/cen_lef.gif")')">
<img src="#Href("~/Content/themes/base/images/cen_lef.gif")" width="16" height="100%" />
</td>
<td bgcolor="#F7F8FB" valign="top">
<div style="height: 30px;">
</div>
#using (Html.BeginForm())
{
//login details username and password
}
</td>
<td width="24" style="background-image:url('#Url.Content("~/Content/themes/base/images/cen_rig.gif")')">
<img src="#Href("~/Content/themes/base/images/cen_rig.gif")" width="24" height="100%" />
</td>
</tr>
<tr>
<td width="16" height="16">
<img src="#Href("~/Content/themes/base/images/bot_lef.gif")" width="16" height="16" />
</td>
<td height="16" style="background-image: url('#Url.Content("~/Content/themes/base/images/bot_mid.gif")')">
<img src="#Href("~/Content/themes/base/images/bot_mid.gif")" width="16" height="16" />
</td>
<td width="24" height="16">
<img src="#Href("~/Content/themes/base/images/bot_rig.gif")" width="24" height="16" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr height="39%">
<td height="39%">
// to display the above tr in center of page
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
<tr>Page footer goes here</>
I have added a tr and td with with 20 and 31% above and below the main body where my login controls go
#using (Html.BeginForm())
{
}
but in IE the login control is displayed in center but in chrome the login is displayed right after page header. Its seems as if the height of 29% is not considered. I tried adding but the result is not the same in both browsers.
I was looking for a neater way to solve this. If any one can help me figure this out.
Please don't use tables for a new site layout. There are a lot better methodes out there. Take a look at div's, please.
Related
Hi I'm working with a Mail template. Facing some issues with alignment in some versions of Outlook in the icons sections, maybe because of it's Word rendering engine. What alternative solution do we have to make the image align with text in Outlook ?
Icons not aligning with text.
<td style="background:#fff;">
<h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">TU PEDIDO</h2>
<h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">PEDIDO #{{orderNumber}}</h3>
<p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{orderDate}}
</p>
<p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/NffxJGH7/ico-shop2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{storeName}}
</p>
<p style="font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/sf58d2xk/ico-phone2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{storePhone}}
</p>
<p style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0 0 10px;">
<img src="https://i.postimg.cc/4xyBd44N/ico-pin2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" /> {{deliveryAddress}}
</p>
<p style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:20px 0 10px;letter-spacing: 1.6px;text-align: center;">
<img src="https://i.postimg.cc/8cv1dgm2/asterisco.png" width="395" height="5" alt="" border="0" style="vertical-align: middle;" />
</p>
<table align="center" border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;width:100%;">
{{#each items}}
<tr>
<td width="45%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;">
x{{quantity}} {{name}}
</td>
<td width="35%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;text-align:right;">
+{{price}} €
</td>
</tr>
{{#each modifiers}}
<tr>
<td style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px 14px;">
- {{quantity}} {{name}}
</td>
<td style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px;text-align:right;">
{{price}}
</td>
</tr>
{{/each}} {{/each}}
<tr>
<td colspan="3" style="border-bottom: 1px solid #000000;"> </td>
</tr>
<tr>
<td width="45%" style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 4px;">
</td>
<td width="35%" style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:10px 0 4px;text-align:right;">
<strong>{{subTotal}} €</strong>
</td>
</tr>
<tr>
<td style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:2px 0 10px">
Envío
</td>
<td style="color:#000000;font-size:16px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:2px 0 10px;text-align:right;">
+{{deliveryCharge}} €
</td>
</tr>
<tr>
<td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px">
<strong>TOTAL</strong>
</td>
<td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 16px;text-align:right;">
<strong>{{total}} €</strong>
</td>
</tr>
<tr>
<td style="color:#000000;font-size:12px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 24px">
<img src="https://i.postimg.cc/sDq36XNt/ico-card2x.png" width="22" height="17" alt="" border="0" style="vertical-align: middle;" /> {{tender}}
</td>
<td style="color:#000000;font-size:20px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;padding:0 0 24px;text-align:right;">
</td>
</tr>
</table>
</td>
I've seen some sites with SOF. find some solutions. none of them seems working. Let me know If I'm missing any additional CSS property for Outlook ?
For this it appears the only way to get it working for Outlook is to wrap it in a table.
<tr>
<td style="background:#fff;">
<h2 style="color:#000000;font-size:30px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:30px 0 10px;font-weight: 400;">TU PEDIDO</h2>
<h3 style="color:#000000;font-size:20px;line-height:22px;font-family:'Francois One',Arial,Sans-Serif;margin:0 0 12px;font-weight: 400;">PEDIDO #{{orderNumber}}</h3>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="22">
<!--Use this to control space between icon and text-->
<p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
<img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" />
</p>
</td>
<td>
<!--No need to put width here. It will automatically size (and is responsive without a width) -->
<p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{orderDate}}
</p>
</td>
</tr>
<tr>
<td width="22">
<p style="color:#000000;font-size:14px;line-height:21px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">
<img src="https://i.postimg.cc/nzZ5SbZ8/ico-calendar2x.png" width="20" height="21" alt="" border="0" style="vertical-align: middle;" />
</p>
</td>
<td>
<p style="color:#000000;font-size:14px;line-height:14px;font-family:Helvetica,Arial,Sans-Serif;margin:0;"><span style="color:#000000;font-size:14px;line-height:22px;font-family:Helvetica,Arial,Sans-Serif;margin:0;">{{storeName}}</span></p>
</td>
</tr>
</table>
</td>
</tr>
I've put in an extra <tr><td><table> so that when you use two columns, you don't have to use colspan, which can cause issues.
You can now also fine-tune spacing with padding on the <td> elements.
I just created a newsletter template in magento for one of my customer.
but the issue is it isn't showing the background header image in Hotmail Gmail Yahoo etc.
It is showing perfectly fine in test environment and in webmail but not in any Outlook etc.
Here is the code for you all.
Can you please tell me what I am doing wrong?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Newsletter</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="90" align="center" valign="top" style="background-image:url(http:placehold.it/350x150.jpg); background-repeat:no-repeat; background-position:center top;"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="300" height="90" align="left" valign="middle"><img src="http://www.mysite.co.uknewsletter/logo.png" width="177" height="48" alt=""/></td>
<td width="300" height="90" align="right" valign="middle"><img src="http://www.mysite.co.uknewsletter/contact-us.png" width="146" height="47" alt=""/></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="35" align="left" valign="top" style="background-image:url(http://www.mysite.co.uknewsletter/menu_bg.jpg); background-repeat:repeat-x; background-position:center top;">
Home
PC COMPONENTS
DESKTOP PC’S
LAPTOPS
MONITOR & TV’S
STORAGE
SALE
</td>
</tr>
<tr>
{{inlinecss file="email-inline.css"}}
<td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0">
<table cellpadding="0" cellspacing="0" border="0">
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="email-heading">
<h1>Thank you for your order from {{var store.getFrontendName()}}.</h1>
<p>Once your package ships we will send an email with a link to track your order. Your order summary is below. Thank you again for your business.</p>
</td>
<td class="store-info">
<h4>Order Questions?</h4>
<p>
{{depend store_phone}}
<b>Call Us:</b>
{{var store_phone}}<br>
{{/depend}}
{{depend store_hours}}
<span class="no-link">{{var store_hours}}</span><br>
{{/depend}}
{{depend store_email}}
<b>Email:</b> {{var store_email}}
{{/depend}}
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="order-details">
<h3>Your order <span class="no-link">#{{var order.increment_id}}</span></h3>
<p>Placed on {{var order.getCreatedAtFormated('long')}}</p>
</td>
</tr>
<tr class="order-information">
<td>
{{if order.getEmailCustomerNote()}}
<table cellspacing="0" cellpadding="0" class="message-container">
<tr>
<td>{{var order.getEmailCustomerNote()}}</td>
</tr>
</table>
{{/if}}
{{layout handle="sales_email_order_items" order=$order}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="address-details">
<h6>Bill to:</h6>
<p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
</td>
{{depend order.getIsNotVirtual()}}
<td class="address-details">
<h6>Ship to:</h6>
<p><span class="no-link">{{var order.getShippingAddress().format('html')}}</span></p>
</td>
{{/depend}}
</tr>
<tr>
{{depend order.getIsNotVirtual()}}
<td class="method-info">
<h6>Shipping method:</h6>
<p>{{var order.shipping_description}}</p>
</td>
{{/depend}}
<td class="method-info">
<h6>Payment method:</h6>
{{var payment_html}}
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td height="20" align="center" valign="top"> </td>
</tr>
<tr>
<td height="56" align="center" valign="middle" bgcolor="#dcdcdc">
<img src="http://www.mysite.co.uknewsletter/brand-1.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-2.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-3.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-4.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-5.jpg" width="110" height="35" alt=""/></td>
</tr>
<tr>
<td height="75" align="center" valign="middle">
<img src="http://www.mysite.co.uknewsletter/facebook.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/twitter.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/gplus.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/pinterest.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/youtube.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/instagram.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/linkedin.jpg" width="31" height="31" alt=""/></td>
</tr>
<tr>
<td height="33" align="center" valign="middle" bgcolor="#1696da" style="color:#FFFFFF; font-family:arial; font-size:12px;">© Copyrights 2016 Smart Tech 786 Ltd, Registered Number 09713584.</td>
</tr>
<tr>
<td height="20" align="center" valign="top" style="line-height:40px; font-size:11px; font-family:arial;">
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>
Email with html can be ... difficult, so use the old markup way
<td height="90" align="center" background="myback.gif">...</td>
Side note
You have a typo as well, which will fix the issue for email clients supporting newer css styles, where you forgot the 2 forward slashed in your url, so change http:placehold... to http://placehold...
style="background-image:url(http://placehold.it/350x150); ..."
If you still have issues with inline style, you might want to change the header background, where you remove it from the td and add it to the table, like this
<td height="90" align="center" valign="top">
<table width="600" border="0" cellspacing="0" cellpadding="0" background="http://placehold.it/350x150">
Try including a full url in the css
like this for example:
https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150&fm=jpg
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Newsletter</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="90" align="center" valign="top" style="background-image:url(https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150&fm=jpg); background-repeat:no-repeat; background-position:center top;"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="300" height="90" align="left" valign="middle"><img src="http://www.mysite.co.uknewsletter/logo.png" width="177" height="48" alt=""/></td>
<td width="300" height="90" align="right" valign="middle"><img src="http://www.mysite.co.uknewsletter/contact-us.png" width="146" height="47" alt=""/></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td height="35" align="left" valign="top" style="background-image:url(http://www.mysite.co.uknewsletter/menu_bg.jpg); background-repeat:repeat-x; background-position:center top;">
Home
PC COMPONENTS
DESKTOP PC’S
LAPTOPS
MONITOR & TV’S
STORAGE
SALE
</td>
</tr>
<tr>
{{inlinecss file="email-inline.css"}}
<td align="center" valign="top"><table width="650" border="0" cellspacing="0" cellpadding="0">
<table cellpadding="0" cellspacing="0" border="0">
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="email-heading">
<h1>Thank you for your order from {{var store.getFrontendName()}}.</h1>
<p>Once your package ships we will send an email with a link to track your order. Your order summary is below. Thank you again for your business.</p>
</td>
<td class="store-info">
<h4>Order Questions?</h4>
<p>
{{depend store_phone}}
<b>Call Us:</b>
{{var store_phone}}<br>
{{/depend}}
{{depend store_hours}}
<span class="no-link">{{var store_hours}}</span><br>
{{/depend}}
{{depend store_email}}
<b>Email:</b> {{var store_email}}
{{/depend}}
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="order-details">
<h3>Your order <span class="no-link">#{{var order.increment_id}}</span></h3>
<p>Placed on {{var order.getCreatedAtFormated('long')}}</p>
</td>
</tr>
<tr class="order-information">
<td>
{{if order.getEmailCustomerNote()}}
<table cellspacing="0" cellpadding="0" class="message-container">
<tr>
<td>{{var order.getEmailCustomerNote()}}</td>
</tr>
</table>
{{/if}}
{{layout handle="sales_email_order_items" order=$order}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="address-details">
<h6>Bill to:</h6>
<p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
</td>
{{depend order.getIsNotVirtual()}}
<td class="address-details">
<h6>Ship to:</h6>
<p><span class="no-link">{{var order.getShippingAddress().format('html')}}</span></p>
</td>
{{/depend}}
</tr>
<tr>
{{depend order.getIsNotVirtual()}}
<td class="method-info">
<h6>Shipping method:</h6>
<p>{{var order.shipping_description}}</p>
</td>
{{/depend}}
<td class="method-info">
<h6>Payment method:</h6>
{{var payment_html}}
</td>
</tr>
</table>
</td>
</tr>
</table>
<tr>
<td height="20" align="center" valign="top"> </td>
</tr>
<tr>
<td height="56" align="center" valign="middle" bgcolor="#dcdcdc">
<img src="http://www.mysite.co.uknewsletter/brand-1.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-2.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-3.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-4.jpg" width="110" height="35" alt=""/>
<img src="http://www.mysite.co.uknewsletter/brand-5.jpg" width="110" height="35" alt=""/></td>
</tr>
<tr>
<td height="75" align="center" valign="middle">
<img src="http://www.mysite.co.uknewsletter/facebook.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/twitter.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/gplus.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/pinterest.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/youtube.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/instagram.jpg" width="31" height="31" alt=""/>
<img src="http://www.mysite.co.uknewsletter/linkedin.jpg" width="31" height="31" alt=""/></td>
</tr>
<tr>
<td height="33" align="center" valign="middle" bgcolor="#1696da" style="color:#FFFFFF; font-family:arial; font-size:12px;">© Copyrights 2016 Smart Tech 786 Ltd, Registered Number 09713584.</td>
</tr>
<tr>
<td height="20" align="center" valign="top" style="line-height:40px; font-size:11px; font-family:arial;">
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>
I am putting together a html based e-mail for distribution to our subscribers. However, when I render it in various clients, it is coming out slightly differently. The major difference that I see is that in some clients the main picture is offset to the left, and the grid boxes may have a different height depending on the number of lines contained. My aim was to reserve enough space for multiple lines so that all boxes would be the same height. Can anyone help me to locate the problem areas? The client in the picture with the problems is Outlook 2003, and the correct one is gmail in Chrome.
Because the html is too long to fit in stackoverflow, I'm including extracts that produce the main item with the offset picture, and the various sized grid box.
Strange offset:
<tr>
<td height="15" style="text-align:center" width="100%"></td></tr><tr>
<td border="0" width="600" style="text-align:center" align="center">
<img alt="" border="0" width="600" height="400" align="top" src="https://ci5.googleusercontent.com/proxy/vTfZfEiq_KN8RAd8D80hICfjyqCddT8oyJJNwnuvZ8D7jg4mbFEbJab51vi_ZiMrHNRitMhAtMu_hSU9Eiy1iNjIEz8YmmlkCx6M6C1lQmBkC6jm7ye1uSoKDMmq8XVo-qD0ZXA=s0-d-e1-ft#https://img.grouponcdn.com/deal/3YewhZBYt2iywAzJsuHy/ZP-960x582/v1/t440x300.jpg" style="width:600px;min-height:400px">
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr><td>
<table width="100%" border="0" cellpadding="10" cellspacing="0">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="23" style="min-height:23px" src="https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png" alt="Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort">
</td>
<td border="0" bgcolor="#403e3e" style="background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:right">
<span>$1179</span>
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Gourmet All-Inclusive 4.5-Star Playa del Carmen Resort
</td>
</tr>
<tr>
<td border="0" height="30" colspan="2" valign="top" bgcolor="#403e3e" style="vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:16px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
Branchville, NJ, USA
</td>
</tr>
</tbody>
</table>
</td>
</tr></tbody>
</table>
</td>
</tr>
Various sized boxes:
<tr>
<td align="center" valign="top">
<table align="center" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci4.googleusercontent.com/proxy/2iCMcbaq9UymG0sHx0JXF9wuBHu-8ibBC66U7s1q7i7Lo5zNS83olrIm7NNBuhybni869s64dxK1_5u13bYUudnGh3fh680G2yLGIc9rQ_YFWe2YLdExA4UUO5A2j_7rJlhLmXQ=s0-d-e1-ft#https://img.grouponcdn.com/deal/rHsqnohK7vGd79o7hGUq/VQ-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$285</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Luxury Villas & Gourmet Meals in Puerto
Vallarta</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Puerto Vallarta, Mexico</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" style=
"background-color:#403e3e" width="290">
<tbody>
<tr>
<td border="0" width="290"><a href=
"#147d3134c7aae5a7_147d3131083faac4_" style="border:none"><img alt=
"" border="0" height="180" src=
"https://ci6.googleusercontent.com/proxy/rhQa6yfks-smgpfVft9mFyFjy-buDbxqyC7skH8tBNv-KfX5FspdLl6GpcdipcquRGoQreMi29C5cmhGaXFp8c6kF4P84Duam0ZfHGGqQZUudPbo5dXvcAOmj2qFfCfTB3KnZEg=s0-d-e1-ft#https://img.grouponcdn.com/deal/deYNpeAfGJxahmvmev46/SV-960x582/v1/t440x300.jpg"
style="width:290px;min-height:180px;display:block" width=
"290" /></a></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:18px;text-align:left">
<img height="15" src=
"https://ci3.googleusercontent.com/proxy/FYU-iKV58t7t1Y09W8HkB8ZvJUWC53Zs279rZhUHmFlI6GwdK9THzm1007Ty7LgiJAlwsOhpGzsZL7-IU-1WHk5fdBo80RCk0b8_Xc_LfDNnqw=s0-d-e1-ft#http://www.example.com/images/logos/partners/small/groupon.png"
style="min-height:15px" alt="Groupon" /></td>
<td border="0" bgcolor="#403E3E" style=
"background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:right">
<span>$99</span></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"overflow:hidden;vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
<a href="http://-featured_url-" style=
"text-decoration:none;color:#ffffff;font-size:13px" target=
"_blank">Charming Northern Michigan Inn near Lakes</a></td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403E3E"
colspan="2" style=
"vertical-align:top;height:30px;background-color:#403e3e;font-family:Myriad Pro,Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;color:#ffffff;line-height:15px;text-align:left">
Denton Township, MI, USA</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" height="15" width="100%">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
This is a picture of how it should look (gmail):
This is a picture of how it looks in outlook 2003:
Your question is a neverending story.... few suggestions.
reset as much default value, as possible
use tables, but reset cellpadding cellspacing and border values to 0
do not use colspan, rowspan, because a few clients do not support it, and rest of the clients may handle it differently
you need to double/triple declare the css values (always write css inline, and in head style)
no margins, only padding values, and only on TD elements
always give exact width and height for images, (and apply display:block to remove unwanted spaces below)
set font-size 0 on body, and after set font-size on every element where you need, to avoid invisible characters on inline elements.
Height values on TD sometimes works, sometimes not, thats why a lot of ppl use spacer images. I recommend an empty TD with padding-top:30px is much stable....
I'm a frontend developer #EDMdesigner.com
I have a designed landing page in asp.net 4.0 i am using repeater control to generate Boxes.
Issue is that it looks good in FF and Crome but design move up adds space under image and look smessy. it is pretty clear from the screen shot also
<div id="bodyContainer" class="bodyContainer">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td width="32px" ></td>
<td width="836px" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td height="32px" width="836px" >
</td>
</tr>
<tr>
<td height="400px" width="836px" valign="top">
<!--Table Frame for 4 Article & Top 10 -->
<table border="0" cellpadding="0" cellspacing="0" width="836">
<tr>
<td height="330" valign="top" style="width: 616px;">
<!--Table Frame for 4 Article -->
<a id="MainContent_rpt4x4_hylTopFour_0" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=4" style="display:inline-block;border-width:0px;">
<div id="articleContainer" class="articleContainer" >
<table border="0" cellpadding="0" cellspacing="0" width="281">
<tr>
<td colspan="3" width="280" height="252">
<img id="MainContent_rpt4x4_imgTopFourImg_0" border="0" src="ImagesArticles/f615fc99-e844-4872-86a8-bfbf5eea7d09.jpg" style="height:252px;width:281px;" />
</td>
</tr>
<tr>
<td colspan="3" width="280" height="28" bgcolor="#B49850" >
<div class="Title4x4" >
<span id="MainContent_rpt4x4_lblTopFourTitle_0">This is the first article used fo...</span>
</div>
</td>
</tr>
<tr>
<td rowspan="2" width="80" height="47" bgcolor="#B49850" valign="middle">
<div class="Date4x4">
<span id="MainContent_rpt4x4_lblTopFourDate_0">30/01/12</span>
</div>
</td>
<td rowspan="2" width="5" height="47" bgcolor="#B49850" valign="top">
<div style="background-color:White; height:35px; width:1px;"></div>
</td>
<td bgcolor="#B49850" class="Desc4x4" >
<div style="margin-left:10px; margin-right:10px;" >
<span id="MainContent_rpt4x4_lblTopFourDesc_0">Brief description of the article will go here and so on. Brief description of the article will go he...</span>
</div>
</td>
</tr>
<tr>
<td bgcolor="#B49850" align="right" class="more4x4">
<div style="margin-left:10px; margin-right:10px;">
<a id="MainContent_rpt4x4_hylTopFourLink_0">read more...</a>
</div>
</td>
</tr>
</table>
</div>
</a>
<a id="MainContent_rpt4x4_hylTopFour_1" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=40" style="display:inline-block;border-width:0px;">
<div id="articleContainer" class="articleContainer" >
<table border="0" cellpadding="0" cellspacing="0" width="281">
<tr>
<td colspan="3" width="280" height="252">
<img id="MainContent_rpt4x4_imgTopFourImg_1" border="0" src="ImagesArticles/68244457-bd36-4560-b9b4-88cefb810501.jpg" style="height:252px;width:281px;" />
</td>
</tr>
<tr>
<td colspan="3" width="280" height="28" bgcolor="#B49850" >
<div class="Title4x4" >
<span id="MainContent_rpt4x4_lblTopFourTitle_1">Al Habtoor Group unveils its late...</span>
</div>
</td>
</tr>
<tr>
<td rowspan="2" width="80" height="47" bgcolor="#B49850" valign="middle">
<div class="Date4x4">
<span id="MainContent_rpt4x4_lblTopFourDate_1">19/01/12</span>
</div>
</td>
<td rowspan="2" width="5" height="47" bgcolor="#B49850" valign="top">
<div style="background-color:White; height:35px; width:1px;"></div>
</td>
<td bgcolor="#B49850" class="Desc4x4" >
<div style="margin-left:10px; margin-right:10px;" >
<span id="MainContent_rpt4x4_lblTopFourDesc_1">The Al Habtoor Group revealed today, in a press conference held at the Metropolitan Hotel, the launc...</span>
</div>
</td>
</tr>
<tr>
<td bgcolor="#B49850" align="right" class="more4x4">
<div style="margin-left:10px; margin-right:10px;">
<a id="MainContent_rpt4x4_hylTopFourLink_1">read more...</a>
</div>
</td>
</tr>
</table>
</div>
</a>
<a id="MainContent_rpt4x4_hylTopFour_2" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=36" style="display:inline-block;border-width:0px;">
<div id="articleContainer" class="articleContainer" >
<table border="0" cellpadding="0" cellspacing="0" width="281">
<tr>
<td colspan="3" width="280" height="252">
<img id="MainContent_rpt4x4_imgTopFourImg_2" border="0" src="ImagesArticles/272216fd-d6e4-43e1-8a91-8fd3fa539dd5.jpg" style="height:252px;width:281px;" />
</td>
</tr>
<tr>
<td colspan="3" width="280" height="28" bgcolor="#B49850" >
<div class="Title4x4" >
<span id="MainContent_rpt4x4_lblTopFourTitle_2">The largest mosque in Dubai opens...</span>
</div>
</td>
</tr>
<tr>
<td rowspan="2" width="80" height="47" bgcolor="#B49850" valign="middle">
<div class="Date4x4">
<span id="MainContent_rpt4x4_lblTopFourDate_2">29/07/11</span>
</div>
</td>
<td rowspan="2" width="5" height="47" bgcolor="#B49850" valign="top">
<div style="background-color:White; height:35px; width:1px;"></div>
</td>
<td bgcolor="#B49850" class="Desc4x4" >
<div style="margin-left:10px; margin-right:10px;" >
<span id="MainContent_rpt4x4_lblTopFourDesc_2">Come the last Friday before holy month Ramadan, another landmark would be added to Dubai’s celebrate...</span>
</div>
</td>
</tr>
<tr>
<td bgcolor="#B49850" align="right" class="more4x4">
<div style="margin-left:10px; margin-right:10px;">
<a id="MainContent_rpt4x4_hylTopFourLink_2">read more...</a>
</div>
</td>
</tr>
</table>
</div>
</a>
<a id="MainContent_rpt4x4_hylTopFour_3" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=38" style="display:inline-block;border-width:0px;">
<div id="articleContainer" class="articleContainer" >
<table border="0" cellpadding="0" cellspacing="0" width="281">
<tr>
<td colspan="3" width="280" height="252">
<img id="MainContent_rpt4x4_imgTopFourImg_3" border="0" src="ImagesArticles/d138d1f9-4712-40c5-9559-81cc9c4fa474.jpg" style="height:252px;width:281px;" />
</td>
</tr>
<tr>
<td colspan="3" width="280" height="28" bgcolor="#B49850" >
<div class="Title4x4" >
<span id="MainContent_rpt4x4_lblTopFourTitle_3">Al Farooq Omar Mosque in Jumeirah...</span>
</div>
</td>
</tr>
<tr>
<td rowspan="2" width="80" height="47" bgcolor="#B49850" valign="middle">
<div class="Date4x4">
<span id="MainContent_rpt4x4_lblTopFourDate_3">29/07/11</span>
</div>
</td>
<td rowspan="2" width="5" height="47" bgcolor="#B49850" valign="top">
<div style="background-color:White; height:35px; width:1px;"></div>
</td>
<td bgcolor="#B49850" class="Desc4x4" >
<div style="margin-left:10px; margin-right:10px;" >
<span id="MainContent_rpt4x4_lblTopFourDesc_3">Al Farooq Omar Mosque in Jumeirah: The Most Modern Mosque in the Region</span>
</div>
</td>
</tr>
<tr>
<td bgcolor="#B49850" align="right" class="more4x4">
<div style="margin-left:10px; margin-right:10px;">
<a id="MainContent_rpt4x4_hylTopFourLink_3">read more...</a>
</div>
</td>
</tr>
</table>
</div>
</a>
<!--Table Frame for 4 Article -->
</td>
<td width="220" height="330" valign="top">
<!--Table Frame for Top 10 Article -->
<div id="Top10container" class="Top10Container">
<div id="Top10NesCon" class="Top10NesCon" >
<table cellpadding="0" cellspacing="0" width="206px" align="left" border="0">
<tr>
<td height="30px" >
<a id="MainContent_hylTop10Viewed" class="Top10Heading" href="Archive-Most-Viewed.aspx?Language=en-US&PageID=21">TOP 10 VIEWED ARTICLES</a>
</td>
</tr>
<tr>
<td class="Top10Divider"></td>
</tr>
<tr>
<td class="Top10DividerSpace"></td>
</tr>
<tr>
<td class="Top10links">
<table id="MainContent_dlTop10" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="206px" >
<tr>
<td width="23px" valign="top" align="centre">
<div id="Top10Bullet" class="Top10Bullet">
<span id="MainContent_dlTop10_lblSnNo_0">1</span>
</div>
</td>
<td width="184px" valign="top" align="left" >
<a id="MainContent_dlTop10_hylTopTen_0" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=4" style="display:inline-block;border-width:0px;text-decoration:none;">
<div id="Top10ArticleHeading" class="Top10ArticleHeading">
<span id="MainContent_dlTop10_lblTopFourTitle_0">This is the first art...</span>
</div>
<div id="Top10ArticleDesc" class="Top10ArticleDesc">
<span id="MainContent_dlTop10_lblTopFourDesc_0">Brief description of the article will go here and so on. Brief description of the article...</span>
</div>
</a>
</td>
</tr>
<tr>
<td class="Top10Space"></td>
</tr>
</table>
</td>
</tr><tr>
<td>
<table cellpadding="0" cellspacing="0" width="206px" >
<tr>
<td width="23px" valign="top" align="centre">
<div id="Top10Bullet" class="Top10Bullet">
<span id="MainContent_dlTop10_lblSnNo_1">2</span>
</div>
</td>
<td width="184px" valign="top" align="left" >
<a id="MainContent_dlTop10_hylTopTen_1" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=40" style="display:inline-block;border-width:0px;text-decoration:none;">
<div id="Top10ArticleHeading" class="Top10ArticleHeading">
<span id="MainContent_dlTop10_lblTopFourTitle_1">Al Habtoor Group unve...</span>
</div>
<div id="Top10ArticleDesc" class="Top10ArticleDesc">
<span id="MainContent_dlTop10_lblTopFourDesc_1">The Al Habtoor Group revealed today, in a press conference held at the Metropolitan Hotel,...</span>
</div>
</a>
</td>
</tr>
<tr>
<td class="Top10Space"></td>
</tr>
</table>
</td>
</tr><tr>
<td>
<table cellpadding="0" cellspacing="0" width="206px" >
<tr>
<td width="23px" valign="top" align="centre">
<div id="Top10Bullet" class="Top10Bullet">
<span id="MainContent_dlTop10_lblSnNo_2">3</span>
</div>
</td>
<td width="184px" valign="top" align="left" >
<a id="MainContent_dlTop10_hylTopTen_2" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=38" style="display:inline-block;border-width:0px;text-decoration:none;">
<div id="Top10ArticleHeading" class="Top10ArticleHeading">
<span id="MainContent_dlTop10_lblTopFourTitle_2">Al Farooq Omar Mosque...</span>
</div>
<div id="Top10ArticleDesc" class="Top10ArticleDesc">
<span id="MainContent_dlTop10_lblTopFourDesc_2">Al Farooq Omar Mosque in Jumeirah: The Most Modern Mosque in the Region</span>
</div>
</a>
</td>
</tr>
<tr>
<td class="Top10Space"></td>
</tr>
</table>
</td>
</tr><tr>
<td>
<table cellpadding="0" cellspacing="0" width="206px" >
<tr>
<td width="23px" valign="top" align="centre">
<div id="Top10Bullet" class="Top10Bullet">
<span id="MainContent_dlTop10_lblSnNo_3">4</span>
</div>
</td>
<td width="184px" valign="top" align="left" >
<a id="MainContent_dlTop10_hylTopTen_3" href="ArticleDetails.aspx?Language=en-US&PageID=19&ArticleID=11" style="display:inline-block;border-width:0px;text-decoration:none;">
<div id="Top10ArticleHeading" class="Top10ArticleHeading">
<span id="MainContent_dlTop10_lblTopFourTitle_3">How can we over come...</span>
</div>
<div id="Top10ArticleDesc" class="Top10ArticleDesc">
<span id="MainContent_dlTop10_lblTopFourDesc_3">How can we over come recession How can we over come recession How can we over come recessi...</span>
</div>
</a>
</td>
</tr>
<tr>
<td class="Top10Space"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr class="Top10Footer" >
<td ><a id="MainContent_hylReadMoreTop10" class="Top10Footer" href="Archive-Most-Viewed.aspx?Language=en-US&PageID=21">read more...</a></td>
</tr>
</table>
</div>
</div>
<!--Table Frame for Top 10 Article -->
<!-- Banner -->
<div id="divBannerWrapper" class="BannerWrapper">
<img id="MainContent_imgBanner1" class="BannerRightImg" src="images/up1.jpg" />
<img id="MainContent_imgBanner2" class="BannerRightImg" src="images/up2.jpg" />
</div>
<!-- Banner -->
</td>
</tr>
</table>
<!--Table Frame for 4 Article & Top 10 -->
</td>
</tr>
</table>!
</td>
<td width="32px" valign="top" >
</td>
</tr>
</table>
<div style="height:15px";></div>
</div>
</div>
I am also adding CSS which i use for these elements
.articleContainer
{
cursor:pointer;
width:281px;
height:328px;
position:relative;
float:left;
margin-right:22px;
margin-bottom:21px;
display: block;
}
In Firefox and Crome looks good
![In Firefox and Crome looks good ][1]
IE 9 Screen Shot Look bad underline links removes padding on right and bottom and adds space below the image. which give it really bad look. When i view same in IE 9 Standard mode it come up fine. So i am not sure why it is happening as i am not a CSS design pro.
![IE 9 Screen Shot Look bad][2]
I tried to fix it for quite some time but cant find the source of problem so that i can work on.
Issue was resolved by fixing the CSS
I got the problem while uploading the pages of html & asp.
Actually i have one html page name as index.html & other one is asp page name as ContactUsNew.aspx. There is a link in html page for a "contact Us" page. & for this link i use the code.
<td style="height: 42px">
<p class="menu01">CONTACT US</p>
</td>
When I run this application in localhost it run successfully, but when I upload these pages on ftp that time the path specified for contact us link on index.html page not switches to contactusnew.aspx page. there is path error occurred
I created the below page:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="ContactUsNew.aspx.vb" Inherits="clients_excel_ContactUsNew" %>
<!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>
<title>Excel Informatics Pvt. Ltd. :: Careers</title>
<link rel="stylesheet" type="text/css" href="images/style.css" />
</head>
<body >
<form id="form1" runat="server">
<table width="759" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="256">
<img src="images/main01.jpg" width="256" height="41"></td>
<td background="images/fon01.gif">
<table width="503" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="270">
<a href="index.html">
<img src="images/but_home.gif" width="74" height="41" border="0"></a><img src="images/separator.gif"
width="2" height="41"><a href="ContactUs.aspx"><img src="images/but_contacts.gif"
width="96" height="41" border="0"></a><img src="images/separator.gif" width="2" height="41"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="157">
<img src="images/main_logo.gif" width="256" height="157"></td>
<td width="503">
<img src="images/main03.gif" width="503" height="157"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="759" align="center" background="images/fon_menu.gif">
<tr>
<td>
<img src="images/menu01.gif" width="3" height="42" alt="" border="0"></td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p class="menu01">
HOME</p>
</td>
<td>
<img src="images/e_menu.gif" alt="" width="24" height="42" border="0" /></td>
<td>
<p class="menu01">
COMPANY</p>
</td>
<td>
<img src="images/e_menu.gif" alt="" width="24" height="42" border="0" /></td>
<td>
<p class="menu01">
SERVICES</p>
</td>
<td>
<img src="images/e_menu.gif" alt="" width="24" height="42" border="0" /></td>
<td>
<p class="menu01">
CUSTOMERS</p>
</td>
<td>
<img src="images/e_menu.gif" alt="" width="24" height="42" border="0" /></td>
<td>
<p class="menu01">
CAREERS</p>
</td>
<td>
<img src="images/e_menu.gif" alt="" width="24" height="42" border="0" /></td>
<td>
<p class="menu01">
CONTACT US</p>
</td>
</tr>
</table>
</td>
<td align="right">
<img src="images/menu02.gif" width="3" height="42" alt="" border="0"></td>
</tr>
</table>
<div align="center">
<img src="images/main01.gif" width="759" height="5" alt="" border="0"></div>
<table border="0" cellpadding="0" cellspacing="0" width="759" align="center">
<tr valign="top">
<td background="images/fon_left.gif">
<img src="images/fon_left.gif" width="3" height="13" alt="" border="0"></td>
<td width="753" bgcolor="#FFFFFF">
<p class="px5">
<table border="0" cellpadding="12" cellspacing="0" width="100%">
<tr valign="top">
<td>
<!-- right -->
<table border="0" cellpadding="0" cellspacing="0" style="height: 375px">
<tr>
<td colspan="3" height="25" bgcolor="#777777">
<p class="title">
<img src="images/e01.gif" width="8" height="8" alt="" border="0"> Contact
Us</p>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#CCCCCC">
<img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
<td rowspan="3" bgcolor="#CCCCCC">
<img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
<td bgcolor="#EF9400" height="3">
<img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
<td rowspan="3" bgcolor="#CCCCCC">
<img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
<td width="725">
<table width="100%">
<tr>
<td>
<p>
Let us show you how we can help you with your IT requirements.</p>
<p>
<b>Excel Informatics Pvt. Ltd.</b><br />
C-2, Suryodaya Complex, Bldg. F.,<br />
Survey No. 154/4, Kalbhor Nagar,<br />
Chinchwad, Pune - 411019<br />
Maharashtra, INDIA<br />
Phone: 91+20+27476633, 27454132
</p>
<p>
<b>E-mail:</b> info#eiplonline.com<br />
or <a href="mailto:excelcom#vsnl.com"
style="color: Blue">excelcom#vsnl.com</a></p>
<div style="height: 120px;">
</div>
</td>
<td>
<table class="txt" cellpadding="2" width="350" cellspacing="0">
<% If CType(Context.Items("success"), Boolean) = True Then%>
<tr>
<td height="30" colspan="3">
<b>
<asp:label id="LblSq" runat="server" text="Thank you for taking the time to give us your enquiry."
cssclass="txtgrn" font-size="9pt"></asp:label>
</b>
</td>
</tr>
<tr>
<td height="10" style="width: 348px">
</td>
</tr>
<% Else%>
<tr>
<td colspan="2" class="help">
All fields marked with * are mandatory.</td>
</tr>
<tr>
<td align="center" style="width: 348px">
<table cellpadding="4" cellspacing="0">
<tr>
<td align="left" width="120">
<span class="txterr">*</span> Your Name</td>
<td width="230" align="left">
<asp:textbox id="TxtName" runat="server" cssclass="txtbox" maxlength="100"></asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" controltovalidate="TxtName"
display="Dynamic" errormessage="Name is Required."></asp:requiredfieldvalidator>
</td>
</tr>
<tr>
<td align="left">
Address</td>
<td align="left">
<asp:textbox id="TxtAddress" runat="server" cssclass="txtbox" columns="25" maxlength="150"
rows="3" textmode="MultiLine"></asp:textbox>
</td>
</tr>
<tr>
<td align="left">
City</td>
<td align="left">
<asp:textbox id="TxtCity" runat="server" cssclass="txtbox" maxlength="25"></asp:textbox>
</td>
</tr>
<tr>
<td align="left">
State</td>
<td align="left">
<asp:textbox id="TxtState" runat="server" cssclass="txtbox" maxlength="25"></asp:textbox>
</td>
</tr>
<tr>
<td align="left">
Phone No.</td>
<td align="left">
<asp:textbox id="TxtPhno" runat="server" cssclass="txtbox" maxlength="15"></asp:textbox>
</td>
</tr>
<tr>
<td align="left">
<span class="txterr">*</span> Email ID</td>
<td align="left">
<asp:textbox id="TxtEmail" runat="server" cssclass="txtbox" maxlength="100"></asp:textbox>
<asp:label id="LblEmail" runat="server" cssclass="txterr"></asp:label>
<asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" controltovalidate="TxtEmail"
display="Dynamic" errormessage="Email is Required."></asp:requiredfieldvalidator>
<asp:regularexpressionvalidator id="RegularExpressionValidator1" runat="server" controltovalidate="TxtEmail"
display="Dynamic" errormessage="Enter valid email address." validationexpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:regularexpressionvalidator>
</td>
</tr>
<tr>
<td align="left">
Subject</td>
<td align="left">
<asp:textbox id="TxtSubject" runat="server" cssclass="txtbox" maxlength="100"></asp:textbox>
</td>
</tr>
<tr>
<td align="left">
<span class="txterr">*</span> Your Message</td>
<td align="left">
<asp:textbox id="TxtMsg" runat="server" columns="25" rows="3" textmode="MultiLine"
cssclass="txtbox" maxlength="200"></asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator3" runat="server" controltovalidate="TxtMsg"
display="Dynamic" errormessage="Message is Required."></asp:requiredfieldvalidator>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
<asp:button id="BtnSubmit" runat="server" cssclass="txtbox" text="Submit" height="22px"
width="60px" />
<asp:button id="BtnReset" runat="server" cssclass="txtbox" text="Reset" causesvalidation="False"
height="22px" width="60px" />
</td>
</tr>
</table>
</td>
</tr>
<% End If%>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td background="images/t_fon.gif" height="28">
<img src="images/px1.gif" width="1" height="1" alt="" border="0"></td>
</tr>
<tr>
<td colspan="3" align="right">
<img src="images/t_bot.gif" width="229" height="9" alt="" border="0"></td>
</tr>
</table>
<!-- /right -->
</td>
</tr>
</table>
<br>
</td>
<td background="images/fon_right.gif">
<img src="images/fon_right.gif" width="3" height="10" alt="" border="0"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="759" align="center">
<tr>
<td colspan="2" background="images/fon_bot.gif" height="42" align="right">
<table border="0" cellpadding="0" cellspacing="0" width="510" background="">
<tr>
<td>
<p class="menu02">
Home</p>
</td>
<td>
<p class="menu02">
Company</p>
</td>
<td>
<p class="menu02">
Services</p>
</td>
<td>
<p class="menu02">
Customers</p>
</td>
<td>
<p class="menu02">
Careers</p>
</td>
<td>
<p class="menu02">
Contact Us</p>
</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td width="270" height="65">
<img src="images/logo_bot.gif" alt="" border="0"></td>
<td width="490">
<p align="center" style="color: #FFFFFF;">
Copyright © 2009 Excel Informatics Pvt. Ltd.
Designed & developed by <a style="color: #FFFFFF;" href="http://www.itiersolutions.com"
target="iTier">iTier solutions</a></p>
</td>
</tr>
</table>
</form>
</body>
</html>
Please check if the contactusnew.aspx file is also uploaded and that your webserver supports ASP.NET.
#Amol: this is an answer that perhaps matches with your problem.
This is from http://forums.asp.net/t/1148374.aspx
instructions:
During development on my computer my project worked fine. When I copied it to the web server it failed with and error "Context is not a member of." I could not find the solution to the problem anywhere. By trial and error I found a solution that worked. I did the following for mypage.aspx with code behind mypage.aspx.vb.
◦I backed up the project.
◦The solution explorer contained a file mypage.aspx.designer.vb. I deleted it. Why? I noticed that when I created a new web form on the web server the designer.vb file was not included.
◦I changed the page directive so that it read CodeFile = "~/MyFolder/MyPage.aspx.vb". The full path within the root directory needs to be in the quotes.
◦I made sure the directive Inherits ="MyPage". This should be exactly the same name as the partial class in MyPage.aspx.vb.
◦I built the page.
◦After I corrected a few pages and ensured that they worked I used "Edit - Replace in files" menu command to change my code and I deleted all the .aspx.designer.vb files.