Solved

html emails in visual studio

Posted on 2010-11-30
4
254 Views
Last Modified: 2012-05-10
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.


<!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>

Open in new window

0
Comment
Question by:flynny
  • 3
4 Comments
 
LVL 16

Expert Comment

by:s8web
ID: 34239818
Hi Matt,

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.
0
 

Author Comment

by:flynny
ID: 34239977
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.
0
 
LVL 16

Expert Comment

by:s8web
ID: 34240043
You can scale the image within the img tag as usual, but you would probably be better off resizing the image.
0
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 34240068
Also,

The address to the image will have to be fully qualified or it will not work, as the recipients will not be on your network.

So with scaling  -

<img src="http://www.yoursite.com/img/pathtoimg.jpg" width="100" height="100" alt="Company Name" />
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Kill default webkit margin!  Please! 6 22
Basic JavaScript Question 3 37
.php tree directory? 5 54
Split in Javascript 5 30
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

943 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now