Sendgrid template CSS is ignored - css

I have used Sendgrid to make the following template:
To send this using my Node server I have created the following module:
/**
* Created by root on 6/6/16.
*/
var path = require('path'),
emailTemplates = require('email-templates'),
async = require("async"),
mailConfig = require('../config/email.json'),
templates = require('../config/emailTemplates.json'),
_ = require('lodash'),
sendgrid = require('sendgrid')(mailConfig.sendGridApiKey);
var mymailer = {};
/**
* Sends an email to either one or multiple users
* #param template_id (The id key of the template. Can be found in emailTemplates.json
* #param to String or Array
* #param from String
* #param subject String
* #param keyReplacer Array of objects for keys to replace in the template
*/
mymailer.sendTemplate = function (template_id, to, from, subject, keyReplacer, text) {
var email = new sendgrid.Email();
var templateKey = templates[template_id];
if (templateKey) {
email.setSmtpapiTos(to);
email.subject = subject;
email.from = from;
email.text = text;
email.html = '';
email.setFilters({
'templates': {
'settings': {
'enable': 1,
'template_id': templateKey
}
}
});
email.smtpapi.header.sub = createSub(keyReplacer);
sendgrid.send(email);
}
else {
console.log('incorrect key');
}
};
function createSub(keyReplacer) {
var finalObject = {};
if (keyReplacer) {
_.forEach(keyReplacer, function (value, key) {
var k = ':' + key;
finalObject[k] = [value];
})
}
return finalObject;
}
module.exports = mymailer;
However when I receive my email it is stripped from both CSS and images.
It looks like this:
I guess it's some settings I'm missing but I don't know which. Which ones can I try?
Template 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" data-dnd="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]><style type="text/css">
table {border-collapse: collapse;}
table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
img {-ms-interpolation-mode: bicubic;}
</style>
<![endif]-->
<style type="text/css">
body {
color: #000000;
}
body a {
color: #0071cb;
text-decoration: none;
}
p { margin: 0; padding: 0; }
table[class="wrapper"] {
width:100% !important;
table-layout: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img[class="max-width"] {
max-width: 100% !important;
}
#media screen and (max-width:480px) {
.preheader .rightColumnContent,
.footer .rightColumnContent {
text-align: left !important;
}
.preheader .rightColumnContent div,
.preheader .rightColumnContent span,
.footer .rightColumnContent div,
.footer .rightColumnContent span {
text-align: left !important;
}
.preheader .rightColumnContent,
.preheader .leftColumnContent {
font-size: 80% !important;
padding: 5px 0;
}
table[class="wrapper-mobile"] {
width: 100% !important;
table-layout: fixed;
}
img[class="max-width"] {
height: auto !important;
}
a[class="bulletproof-button"] {
display: block !important;
width: auto !important;
font-size: 80%;
padding-left: 0 !important;
padding-right: 0 !important;
}
// 2 columns
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
</style>
<style>
body, p, div { font-family: arial,sans-serif; }
</style>
<style>
body, p, div { font-size: 14px; }
</style>
</head>
<body yahoofix="true" style="min-width: 100%; margin: 0; padding: 0; font-size: 14px; font-family: arial,sans-serif; color: #000000; background-color: #0071CB; color: #000000;" data-attributes='%7B%22dropped%22%3Atrue%2C%22bodybackground%22%3A%22%230071CB%22%2C%22bodyfontname%22%3A%22arial%2Csans-serif%22%2C%22bodytextcolor%22%3A%22%23000000%22%2C%22bodylinkcolor%22%3A%22%230071cb%22%2C%22bodyfontsize%22%3A14%7D'>
<center class="wrapper">
<div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#0071CB">
<tr><td valign="top" bgcolor="#0071CB" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" role="content-container" class="outer" data-attributes='%7B%22dropped%22%3Atrue%2C%22containerpadding%22%3A%220%2C0%2C0%2C0%22%2C%22containerwidth%22%3A600%2C%22containerbackground%22%3A%22%23FFFFFF%22%7D' align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center">
<tr><td role="modules-container" style="padding: 0px 0px 0px 0px; color: #000000; text-align: left;" bgcolor="#FFFFFF" width="100%" align="left">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0;" class="module preheader preheader-hide" role="module" data-type="preheader">
<tr><td role="module-content"><p></p></td></tr>
</table>
<table class="module" role="module" data-type="wysiwyg" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td role="module-content" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div><%body%></div></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module wrapper" role="module" data-type="imagetext" data-attributes='%7B%22dropped%22%3Atrue%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22textbackground%22%3A%22%23ffffff%22%2C%22textmargin%22%3A%220%2C0%2C0%2C0%22%2C%22imagealignment%22%3A%22left%22%7D'>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr role="module-content">
<td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="leftColumnContent" role="column-one" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table role="module" data-type="image" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" class="wrapper" data-attributes='%7B%22child%22%3Atrue%2C%22link%22%3A%22%22%2C%22width%22%3A%22250%22%2C%22height%22%3A%22333%22%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22url%22%3A%22https%3A//marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg%22%2C%22alt_text%22%3A%22%22%2C%22dropped%22%3Atrue%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22alignment%22%3A%22%22%2C%22responsive%22%3Afalse%7D'>
<tr>
<td style="font-size:6px;line-height:10px;background-color:#ffffff;padding: 0px 0px 0px 0px;" valign="top" align="" role="module-content">
<img class="max-width" width="250" height="333" src="https://marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg" alt="" border="0" style="display: block; color: #000; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; " />
</td>
</tr>
</table></td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="rightColumnContent" role="column-two" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
<td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div>Hello world</div> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A2%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22cellpadding%22%3A0%2C%22containerbackground%22%3A%22%22%7D'>
<tr><td style="padding: 0px 0px 0px 0px;" bgcolor="">
<table class="columns--container-table" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr role="module-content">
<td style="padding: 0px 0px 0px 0px" role="column-0" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area empty">
</td><td style="padding: 0px 0px 0px 0px" role="column-1" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area ">
<table class="module" role="module" data-type="button" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22borderradius%22%3A6%2C%22buttonpadding%22%3A%2212%2C18%2C12%2C18%22%2C%22text%22%3A%22Your%20Bulletproof%20Button%22%2C%22alignment%22%3A%22center%22%2C%22fontsize%22%3A16%2C%22url%22%3A%22%22%2C%22height%22%3A%22%22%2C%22width%22%3A%22%22%2C%22containerbackground%22%3A%22%23ffffff%22%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22buttoncolor%22%3A%22%231188e6%22%2C%22textcolor%22%3A%22%23ffffff%22%2C%22bordercolor%22%3A%22%231288e5%22%7D'>
<tr>
<td style="padding: 0px 0px 0px 0px;" align="center" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile">
<tr>
<td align="center" style="-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size: 16px;" bgcolor="#1188e6">
Your Bulletproof Button
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module footer" role="module" data-type="footer" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A1%2C%22padding%22%3A%2210%2C5%2C10%2C5%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td style="padding: 10px 5px 10px 5px;" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr role="module-content">
<td align="center" valign="top" width="100%" height="100%" class="templateColumnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="leftColumnContent" role="column-one" height="100%" style="height:100%;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Afalse%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
<td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
This email was sent by: [Sender_Name] [Sender_Address], [Sender_City] [Sender_State] [Sender_Zip]
</div>
<div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
To unsubscribe click: here
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
</tr></td>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</td>
</table>
<![endif]-->
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</tr></td>
</table>
</div>
</center>
</body>
</html>

The problem with your code is, email clients does not support embedded css. Therefore all styles that you need must be inline with the tag. Also ugly as it might be, but the best way to layout an email template is by using tables.
However, here are some things that might help you with this problem.
TIPS
This will not work:
<style media="screen">
h1{
color: red;
}
</style>
<h1>I like turtles</h1>
This will work:
<h1 style="color:red;">I like turtles</h1>
HELPFUL SOURCES
You can read this to know more about creating email templates.
Source 1
Source 2
Also, there are some inliner out there that will convert your embedded css to inline css. Personally I am using Zurb's email inliner to solve this problem.
That's all I can say, I hope this will get you somewhere. Good luck :)

I had this problem, I fixed it by changing
Content content = new Content("text/plain", notification.getContent());
To
Content content = new Content("text/html", notification.getContent());

Related

Is there a consistent fix for when Outlook adds a vertical white line to an img in a table cell?

I keep trying all the fixes I could find either on here or Litmus, but none work. I have tried adding the border-collapse: collapse; attribute to no avail. I also tried setting the line-height the same as the img height but got the same result. All the images in email don't have that problem, only the row where I have two GIFS side by side is where the problem arise. The issue happens only on Outlook. When viewed on a browser the email renders fine.
Here is a snipbit from the HTML code:
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="row ee_columns two-cols ee_nostack ee_element" ee-type="container" data-title="Columns" style="max-width: 660px; position: relative; background-color: rgb(255, 255, 255); --darkreader-inline-bgcolor:#181a1b; table-layout: auto;" role="presentation" data-darkreader-inline-bgcolor="">
<tbody>
<tr>
<td align="center" valign="top" class="row-inner f-size-0 element-pad" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;">
<!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:660px;" width="660"><tr><td><![endif]--><div class="no-stack-column no-stack-column-width" ee-percent-width="50" style="max-width: 50%; min-width: 50%; width: 50%;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="table-layout: auto;" role="presentation">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="col-font-reset ee_element ee_imageelement" ee-type="element" data-title="Image" role="presentation" style="table-layout: auto;"><tbody><tr><td align="left" class="element-pad element-bord" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; font-size: 1px; line-height: 305px;"><img src="https://i.emlfiles.com/cmpimg/7/2/7/8/0/2/files/1239793_gif1.gif" width="330" alt="" style="width: 100%; display: block; max-width: 100%; min-height: auto; height: auto;" class="ee_editable" border="0"> </td></tr></tbody></table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]></td><td align="left" valign="top" style="width:330px;" width="330"><![endif]--><div class="no-stack-column no-stack-column-width" style="max-width: 50%; min-width: 50%; width: 50%;" ee-percent-width="50">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="table-layout: auto;" role="presentation"><tbody><tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="col-font-reset ee_element ee_imageelement" ee-type="element" data-title="Image" role="presentation" style="table-layout: auto;"><tbody><tr><td align="left" class="element-pad element-bord" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; font-size: 1px; line-height: 305px;"><img src="https://i.emlfiles.com/cmpimg/7/2/7/8/0/2/files/1239794_gif2.gif" width="330" alt="" style="width: 100%; display: block; max-width: 100%; min-height: auto; height: auto;" class="ee_editable" border="0"> </td></tr></tbody></table>
</td>
</tr></tbody></table>
</div><!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>

Trying to use table to achieve CSS responsiveness but not working

I am trying to make the following page responsive. But when I hit 550px width I got the following result. If I go further down the resolution all my stuff will be slanted to the left except for the footer. I am a beginner trying to learn responsive design. I really appreciate all the help I can get. If you can provide a bit of explanation it will be great. All help is deeply appreciated. Thank you in advance.
https://jsfiddle.net/hansheung/Lhyk3s86/1/
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<title>Benefits</title>
<style type="text/css">
body {
width: 100%;
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: 'Open Sans'
}
p,
h1,
h2,
h3,
h4 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
html {
width: 100%;
}
table {
font-size: 14px;
border: 0;
}
/* ----------- responsivity ----------- */
#media only screen and (max-width: 640px) {
/*------ top header ------ */
.main-header {
font-size: 20px !important;
}
.main-section-header {
font-size: 28px !important;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.align-center {
text-align: center !important;
padding-top: 20px;
}
.align-left {
text-align: left !important;
padding-bottom: 20px;
}
.no-bg {
background: none !important;
}
/*----- main image -------*/
.main-image img {
width: 640px !important;
height: auto !important;
}
/*-------- container --------*/
.container600 {
width: 460px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 640px !important;
height: auto !important;
} */
}
#media only screen and (max-width: 600px) {
/*------ top header ------ */
.main-header {
font-size: 18px !important;
}
.main-section-header {
font-size: 26px !important;
}
/*-------- container --------*/
.container600 {
width: 400px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 600px !important;
height: auto !important;
} */
}
.responsive{
width: 100%;
height: auto;
}
#font-face {
font-family: Kollektif Regular;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif.woff);
}
#font-face {
font-family: Kollektif Bold;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Bold.woff);
}
#font-face {
font-family: Kollektif Italic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Italic.woff);
}
#font-face {
font-family: Kollektik BoldItalic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-BoldItalic.woff);
}
.text{
color: #2d2a26;
font-size: 16px;
line-height: 28px;
text-align: justify;
}
.singleLine{
line-height:16px;
}
.doubleLine{
line-height:40px;
}
.subtitle{
font-size: 20px;
color:#FF7F30;
}
.text-color{
color: #ffffff;
font-size: 14px;
line-height: 23px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- header -->
<table width="100%" bgcolor="ffffff">
<tr>
<td >
<table align="center" width="600" class="container600">
<tr>
<td height="10" > </td>
</tr>
<tr>
<td>
<table border="0" align="center" width="600" class="container600">
<tr>
<td class="section-img">
<a href="http://www.talent-trust.com" ><img src="http://www.talent-trust.com/documents/img/j19-ttc_header.png" width="640"/></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end header -->
<!-- big banner section -->
<table width="100%" >
<tr>
<td align="center" valign="top" style="background:#ffffff url(http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:150px;padding-bottom:150px">
<table align="center">
<tr>
<td valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--end banner-->
<table border="0" align="center" width="70%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td style="line-height: 50px;"> </td>
</tr>
<tr>
<td align="justified" style="color: #053D56; font-size: 40px; font-family: Kollektif; line-height: 28px;">
<p>Member Benefits</p>
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td class="text">
At TTc, we aim to give missionaries the security, physical health, mental health, and wellness support and resources that they need to excel in their calling and stay in the field longer.
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td align="center">
<table border="0" width="70%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<td height="2" style="font-size: 2px; line-height: 2px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 Column Blog Layout-->
<table width="100%">
<tr>
<td align="center">
<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td>
<table width="50%" align="left" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div>
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Keeping your costs down</p>
<br>
<p class="text">We know cost is a big deal, so we provide multiple ways to keep costs down:</p>
<br>
<p class="text">
No Claims Bonus – We reward our members for staying healthy, which helps us to keep our premiums down. See how you can save up to 50% of your premium. <a href="http://www.talent-trust.com/benefits/ncb.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
<table width="50%" align="right" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div >
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Tailored Services help you THRIVE Long-Term</p>
<br>
<p class="text">We look at what services and technology we can offer that will help our members to stay in the field longer.</p>
<br>
<p class="text">
vHealth – a 24/7 service that connects you to a European based family doctor from anywhere in the world for free. Using an app on your phone, you can video call or have a vHealth doctor visit whenever and wherever you need it. <a href="http://www.talent-trust.com/benefits/vhealth.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end section -->
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td height="50" style="font-size: 30px; line-height: 30px;"> </td>
</tr>
</table>
<!-- end section -->
<!-- contact section -->
<table width="100%" bgcolor="#053D66">
<tr>
<td height="40" style="font-size: 40px; line-height: 40px;"> </td>
</tr>
<tr>
<td >
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<!-- <td height="2" style="font-size: 2px; line-height: 2px;"> </td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td >
<table align="center" width="700" class="container600">
<tr>
<td>
<table width="300" align="left" cellpadding="0" cellspacing="0" class="container600">
<tr>
<!-- logo -->
<td align="right" class="align-center">
<a href="http://www.talent-trust.com" ><img width="200" border="0" style="display: block; width: 200px;" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="" /></a>
</td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td style="text-align:right;" class="align-left"><img width="24" height="24" src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" ></td>
</tr>
</table>
<table width="2" align="left" cellpadding="20" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td class="hide" width="2" height="25"></td>
</tr>
</table>
<table width="250" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td align="left">
<div class="text-color">
Email us: abc#hotmail.com
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px; color: #ffffff;">Tel: +604-899-8945</td>
</tr>
<tr>
<td height="33" style="font-size: 33px; line-height: 33px;"></td>
</tr>
<tr>
<td>
<table align="left" cellpadding="0" cellspacing="0">
<tr>
<td class="text-left p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" ></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="60"> </td>
</tr>
</table>
<!-- end section -->

Buttons text shift to left in Outlook when using VML

Im using VML in order to have background imgs in Outlook windows but when I use this code it causes my buttons to shift like 20px to the left in Outlook Windows.
Ive tried text-align and align centering everywhere with not much luck.
Removing the VML fixes issue but then removed bg img on Outlook.
Screenshot of issue:
Any input is appreciated.
Screencast of compared issue: https://screencast.com/t/7vAj6509FyH
<!DOCTYPE HTML>
<html lang="en">
<!-- Javelin v1.01 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>EVERY SEASON STARTS HERE</title>
<style type="text/css">
/* inject:css/mail.min.css */
a,body,span,table,td{-ms-text-size-adjust:100%}body,div[style*="margin: 16px 0;"]{margin:0!important}a,body,span,table,td{-webkit-text-size-adjust:100%}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic;border:0;display:block;outline:0;text-decoration:none}.a6S,.mobileOnly,img.g-img+div{display:none!important}a:link,span.MsoHyperlink{mso-style-priority:100!important;color:inherit!important;color:inherit}a:visited{color:inherit!important;color:inherit}table{border:0;border-collapse:collapse!important;border-color:inherit}body{font-size:16px;padding:0!important;width:100%!important}.aBn,.unstyle-auto-detected-links *,[x-apple-data-detectors]{border-bottom:0!important;cursor:default!important;color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important}a:link,span.MsoHyperlink{color:inherit;text-decoration:none}a span,span.yshortcuts{color:#FFF}span.yshortcuts:active,span.yshortcuts:focus,span.yshortcuts:hover{text-decoration:none;color:#FFF;background-color:none;border:none}#MessageViewBody a{color:inherit;text-decoration:none;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit}.a6S{opacity:.01!important}.h1,.h2,.h3,h1,h2,h3{font-family:DINPro-Medium,Arial,sans-serif!important;font-weight:700}.img,.img-headline{color:#FFF;font-family:sans-serif!important;text-align:center}.h1,h1{font-size:40px;line-height:44px}.h2,h2{font-size:30px;line-height:34px}h3{font-size:24px;line-height:28px}.h3,.img{font-size:18px}.h3{margin:0 0 8px}.img{background-color:#006554;line-height:22px}.img-headline{font-size:36px;font-weight:900;line-height:42px}p{/*!important;*/margin-bottom:1em}.contact{color:#FFF!important;text-decoration:none!important}.webkit{max-width:640px;margin:0 auto}#media all and (min-width:640px){.left{text-align:left;text-align:left!important}.right{text-align:right;text-align:right!important}}#media all and (max-width:639px){.mobile,.mobile_triggerproduct{display:inline-block!important}.border-container,.container,.mobile,.mobile_triggerproduct,.wrapper{padding:0!important;width:100%!important}.border-container,.container,.img,.img-headline,.mobile,.wrapper,table[class=button]{width:100%!important}.wrapper{margin:0!important}.border-container{max-width:95%}.mobile_triggerproduct{max-width:639px!important}.img,.img-headline{height:auto!important}[class=mobileOff]{width:0!important;display:none!important}[class*=mobileOn]{display:block!important;max-height:none!important}.center{text-align:center!important}.mobileOnly{display:block!important}.hideOnMobile{display:none!important}.left,.right{text-align:center;text-align:center!important}}#media all and (max-width:480px){.h1,h1{font-size:28px!important;line-height:32px!important}.h2,h2{font-size:24px!important;line-height:28px!important}.h3,h3{font-size:18px!important;line-height:22px!important}}
/* endinject */
/* inject:css/fonts.min.css */
#media screen{#font-face{font-family:DINPro-Light;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.svg#DINPro-Light) format('svg');font-weight:400;font-style:normal}#font-face{font-family:DINPro-Medium;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.svg#DINPro-Medium) format('svg');font-weight:400;font-style:normal}#font-face{font-family:DINPro-Black;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.svg#DINPro-Black) format('svg');font-weight:400;font-style:normal}}
/* endinject */
/* inject:css/brand.min.css */
.freeShip,body{font-weight:400}.flashPromo,.flashPromoSmall{mso-line-height-rule:exactly}.navbar a,a{text-decoration:none}a{color:inherit;display:block;max-width:100%;text-decoration:none text-align: center}body{font-family:Arial,sans-serif;margin:0!important;padding:0;background-color:#FFF;-ms-text-size-adjust:100%}.bonus-product-details{color:#F5F5F5;font-size:12px;line-height:18px;margin:0 10px}.disclaimerDark,.disclaimerLight{font-family:Arial,sans-serif;font-size:10px;font-size:10px!important;letter-spacing:.05rem;line-height:14px;mso-line-height-rule:exactly}.disclaimerDark{color:#FFF!important}.disclaimerLight{color:#212121!important}.freeShip{font-family:DINPro-Medium,Arial,sans-serif!important;font-size:14px}.headline,.logo{font-weight:900}.headline{font-family:DINPro-Black,Arial,sans-serif!important;font-size:36px;line-height:40px;margin:20px 0 0;padding:0 20px}.logo{background-color:#006554;color:#FAFAFA;font-family:sans-serif;font-size:24px;line-height:36px;text-align:center;max-width:175px;width:117px;height:auto}.navbar,.navbar .column-nav,.navbar a{text-align:center!important}.navbar{font-size:0}.navbar .column-nav{display:inline-block;max-width:320px;vertical-align:top;width:auto}.navbar a{display:inline-block;font-family:DINPro-Medium,Arial,sans-serif!important;font-size:14px;padding:16px 0;text-transform:uppercase}.footer,.preheader{font-family:Arial,sans-serif}.preheader{color:#707070;Margin-top:4px;Margin-bottom:0;Margin-left:10px;Margin-right:10px;font-size:11px}.one-column p{margin-bottom:14px!important;margin-top:14px!important}.flashPromoSmall{font-family:DINPro-Light,Arial,sans-serif!important;font-size:32px;font-weight:300;line-height:32px}.flashPromo{font-family:DINPro-Black,Arial,sans-serif!important;font-weight:900;line-height:40px}.pricing,.productInfo{font-family:Arial,sans-serif!important;margin:0}.pricing{font-weight:700;line-height:24px;font-size:14px}.productInfo{font-size:16px;font-weight:500}.productNameTab{font-size:18px;line-height:20px;margin:4px 20px;padding:0}.productPriceTab{font-size:16px;line-height:18px margin: 4px 0;padding:0}.productPromo{font-family:DINPro-Black,Arial,sans-serif;font-size:28px;font-weight:700;line-height:34px;margin:0 20px;padding:0}.subheadline{font-family:DINPro-Medium,Arial,sans-serif!important;font-size:30px;line-height:34px;font-weight:500;margin:0;padding:0 20px}.text{padding-top:16px}.valueCopy{font-family:DINPro-Medium,Arial,sans-serif!important;font-weight:400!important;margin:0}.welcome{color:#F6992F;font-family:DINPro-Medium,Arial,sans-serif;font-size:26px;margin:0;padding:0}.text{padding:16px 16px 0}.deviceWidth{width:33%;max-width:211px!important}.deviceWidth200{width:100%!important;max-width:180px}#media only screen and (max-width:480px){.bonus-product-details{font-size:12px!important;line-height:18px!important}.headline{font-size:40px!important;line-height:44px!important}.subheadline{font-size:24px!important;line-height:28px!important}.productNameTab,.productPriceTab{font-size:90%!important;line-height:95%!important;margin:8px 10px!important}.productPromo{font-size:24px!important;line-height:28px!important}.welcome{font-size:20px!important;line-height:21px!important}}#media only screen and (max-width:639px){.deviceWidth,.deviceWidth200{display:inline-block!important}table[class=button]{width:100%!important}.deviceWidth{width:49%!important;max-width:211px}.deviceWidth200{width:32%!important}}
/* endinject */
</style>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]-->
<!--[if (gte mso 9)|(IE)]><style type="text/css"> table {border-collapse: collapse;} </style> <![endif]-->
</head>
<body style="margin:0; padding:0; background-color:#FFFFFF;">
<!--[if gte mso 10]><style> /* Style Definitions for MSO 2010 */ table.MsoNormalTable, p, span, div, table, tr, td, th, a, h1, h2, h3 { mso-style-priority:99; font-family:"Arial","sans-serif"; } </style><![endif]-->
<center>
<div class="webkit"><!--[if (gte mso 9)|(IE)]><table width="640" align="center"><tr><td><![endif]-->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top" style="margin:0; padding:0;">
<!--# EMAIL BODY CREATIVE #############-->
<!--# Hero w/ Coupon (embedded background – image headline - left-aligned)-->
<table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%; background-position:right top !important; background-size:cover !important;" bgcolor="#006554">
<tr>
<td background="http://dsg.images.harmony.epsilon.com/_phoenix/_dev/codex/img/hero_baseball_bg.jpg" bgcolor="#006554" width="640" align="center" valign="top" style="background-position:right top !important; background-size:cover !important;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; width:640px; height:790px;" src="http://dsg.images.harmony.epsilon.com/_phoenix/_dev/codex/img/hero_baseball_bg.jpg"/>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; position: absolute; width:640px; height:790px;">
<v:fill opacity="0%" color="#F8F8F8"/>
<v:textbox inset="20px,0,0,0">
<![endif]-->
<div>
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" >
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 0 16px;">
<table width="600px" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="50%" class="mobile" align="center" valign="top" style="width:50%; padding-right:4px; padding-bottom: 16px !important;">
<!-- button-basic -->
<table class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#F5F5F5; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<tr>
<td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#212121;">
<a href="http://heroLink.com" target="_blank" style="color:#212121; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; color:#212121;">
SHOP NOW
</span></a>
</td>
</tr>
</table>
<!-- /button-basic -->
</td>
<td width="50%" class="mobile" align="center" valign="top" style="width:50%; padding-left:4px; padding-bottom: 16px !important;">
<!-- button-border -->
<table class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:inherit; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<tr>
<td width="100%" height="52" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#F5F5F5; border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; mso-padding-alt:0px 18px 0px 18px;">
<a href="http://heroLink.com" target="_blank" style="color:#F5F5F5; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; color:#F5F5F5;">
VIEW IN-STORE COUPON
</span></a>
</td>
</tr>
</table>
<!-- /button-border -->
</td>
</tr>
</table>
</td>
</tr>
<!--[if (gte mso 9)|(IE)]><tr><td height="15" style="font-size:15px; line-height:15px;"> </td></tr><![endif]-->
</table>
<!--spacer--><table><tr><td height="40" style="font-size:40px; line-height:40px;"> </td></tr></table><!--/spacer-->
<p class="disclaimerDark" style="font-family:Arial, sans-serif; Font-size:12px; font-size:12px !important; letter-spacing:normal; line-height:11px; text-align:center; margin:10px 0; padding:0 20px; color:#F5F5F5;">
<!--disclaimer copy-->
Replace this line of text with your disclaimer copy.
</p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--/END Hero w/ Coupon (embedded background - image headline – left-aligned)-->
<!--/ EMAIL BODY CREATIVE /////////////-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></div>
</center>
</body>
</html>
This is one of my favourite email bugs/issues/caveats.
padding-left does not work in Outlook when inside a VML shape.
A lot of the styles could be removed from your button code. I'd also try adding a fixed width to the .button table. This combined with text-align center on the a parent td should keep the copy centered.
<table align="center" class="button" border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#ffffff; padding-top:16px; padding-bottom:16px;">
<a href="http://TabHeroLink.com" target="_blank" style="color:#ffffff; text-decoration:none;">
SHOP THIS DEAL
</a>
</td>
</tr>
</table>
One small thing to note too is your white button is using align="left", pulling it further over. Change that to center
<table align="center" class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#015F81; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; mso-padding-alt:0px 18px 0px 18px;">
You could change the above code to the below code:
<table align="center" class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#015F81; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden;margin:0 20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; margin:0 18px">
I was able to fix this myself by implementing an outlook ghost table with the table at 640, the td at 600 and both having align="center"

Yahoo table centering alignment

<body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;">
<tr>
<td width="100%" valign="top">
<table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth">
<tr>
<td><img src="spacer.gif" width="100%" height="30" alt="" /></td>
</tr>
</table>
<!-- More tables with content -->
</td>
</tr>
</table>
</body>
I've done a lot of testing on this and research. I believe that I am doing this correctly however when I go to test it expecting the table to be centered in yahoo it isn't!
The fix is supposed to be putting table-layout: fixed; on the outer table with 100% width on.
which I've done.
So can anyone spot what I've done wrong here to not make this work?
Cheers
The code below should fix it. Your email code just needs a few more CSS resets.
<html>
<head>
<style>
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
</style>
</head>
<body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;">
<center style="width: 100%; background: #f6f6f6;">
<!-- Your Email Code Begins Here -->
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;">
<tr>
<td width="100%" valign="top">
<table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth">
<tr>
<td><img src="spacer.gif" width="100%" height="30" alt="" /></td>
</tr>
</table>
<!-- More tables with content -->
</td>
</tr>
</table>
<!-- Your Email Code Ends Here -->
</center>
</body>
</html>

Selected item in asp menu control to look like a button with rounded corners using CSS2.1?

I am trying to make my selected menu item look like a rounded corner button using images and CSS2.1.
.StaticSelectedStyle a
{
display: block;
padding-left:5px;
height:35px;
width: 100%;
background: transparent url('../images/button_right.png') no-repeat scroll right top;
float:left;
/*FONT*/
color: White;
text-align:center;
vertical-align:middle;
line-height: 32px;
}
.StaticSelectedStyle
{
display: block;
height:35px;
background: transparent url('../images/button_left.png') no-repeat;
text-align:center;
vertical-align:middle;
}
The image (button_right.png) is not displayed, and at the same time ,the text color is displayed as white as indicated in the same CSS class. Any ideas why this might be happening?
Here is the HTML. My menu has 6 items: Reem, Omneya Ismail Siam, Michel, Nevine, Karim and Engy. The selected item is Nevine:
<!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>Untitled Page</title>
<link href="CSS/menu_style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.Menu1_0 { background-color:white;visibility: hidden; display: none; position: absolute; left: 0px; top: 0px; }
.Menu1_1 { text-decoration: none; }
.Menu1_2 { }
.Menu1_3 { border-style: none; }
.Menu1_4 { }
.Menu1_5 { }
.Menu1_6 { border-style: none; }
.Menu1_7 { }
.Menu1_8 { border-style: none; }
.Menu1_9 { }
</style>
</head>
<body bgcolor="black">
<form name="form1" method="post" action="default.aspx" id="form1">
<table id="Menu1" class="menunav StaticMenuStyle Menu1_5 Menu1_2" cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" >
<table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Reem</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
<td style="width: 10px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1">
<table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Omneya Ismail Siam</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
<td style="width: 10px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2">
<table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="javascript:__doPostBack('Menu1','Michel')" style="border-style: none; font-size: 1em;">Michel</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
<td style="width: 10px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n3">
<table class="StaticMenuItemStyle Menu1_4 StaticSelectedStyle Menu1_7" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3 StaticSelectedStyle Menu1_6" href="#" style="border-style: none; font-size: 1em;">Nevine</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
<td style="width: 10px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n4">
<table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Karim</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
<td style="width: 10px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n5">
<table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Engy</a></td>
</tr>
</table>
</td>
<td style="width: 10px;"></td>
</tr>
</table>
<a id="Menu1_SkipLink"></a></div>
<script type="text/javascript">
//<![CDATA[
var Menu1_Data = new Object();
Menu1_Data.disappearAfter = 500;
Menu1_Data.horizontalOffset = 0;
Menu1_Data.verticalOffset = 0;
Menu1_Data.staticHoverClass = 'Menu1_9 StaticHoverStyle';
Menu1_Data.staticHoverHyperLinkClass = 'Menu1_8 StaticHoverStyle';
//]]>
</script>
</form>
</body>
</html>

Resources