flynny
asked on
html emails in visual studio
Hi all,
We have designed a html email to mail out to our clients.
When the page is viewed in ie or ff it appears s it should. However if i page -> send page as email, (using outlook 2010 and i have also tsted with gmail), the page is losing some of the css elements.
1. first of all we want to centre the email page.
2. secnd we want to use some images with position:absolute. Is this possible?
3. From googling around i see that background images are not possible, does this mean I would have to create an image for each title or is there a way around this?
hope you can help.
Matt.
We have designed a html email to mail out to our clients.
When the page is viewed in ie or ff it appears s it should. However if i page -> send page as email, (using outlook 2010 and i have also tsted with gmail), the page is losing some of the css elements.
1. first of all we want to centre the email page.
2. secnd we want to use some images with position:absolute. Is this possible?
3. From googling around i see that background images are not possible, does this mean I would have to create an image for each title or is there a way around this?
hope you can help.
Matt.
<!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" style="background-color:Gray;">
<head runat="server">
</head>
<body style="font: 14px/150% Arial, Helvetica, sans-serif;">
<div id="container" style="display:block;height:auto;margin:0 auto;width:580px;">
<div id="main" style="display:block;height:auto;margin:5px auto;width:580px;background-color:#FFFFFF;border:solid 1px #000000;">
<div id="header">
<img src="<hardcoded source>" alt="Company Name" />
</div>
<div id="banner">
<img src="<hardcoded source>" alt="Christmas Offers!" />
</div>
<div style="padding:0 15px 0 15px;position:relative;top: -3px;left: 0px;">
<h1 style="font-size:28px;">A MERRY CHRISTMAS FROM US!</h1>
<h2 style="font-size:20px;">PROFESSIONAL PACKAGES AT AFFORDABLE PRICES</h2>
<p>
Dear Sir/Madam,</p>
<p>
<p>
etc......
</p>
</div>
<div style="padding:0 15px 0 15px;position:relative;height:40px;background-image: url('hardcoded background');">
<h2 style="padding:10px 15px;color:#FFFFFF;font-size:20px;">
Premium Package was £<del>629.00</del> Now £499.00
</h2>
<img src="hardcoded"
alt="Daily Experts"
style="position:absolute; right:13px; top:-23px; height: 110px; width: 110px" />
</div>
ASKER
I thought this may be the case.
so is it possible to resize images? i.e if theimage is orignally 300px by 300px to reduce to 100 x 100? or am I going to have o recreated the image as well?
Matt.
so is it possible to resize images? i.e if theimage is orignally 300px by 300px to reduce to 100 x 100? or am I going to have o recreated the image as well?
Matt.
You can scale the image within the img tag as usual, but you would probably be better off resizing the image.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You're going to hate this, but when it comes to email client rendering of css, there is a lot to be desired. It is best to stick to a table layout with everything defined inline. (As much as it pains me to say that.) Absolute positioning probably isn't going to work out very well for you.