This question was migrated from Super User because it can be answered on Stack Overflow.
Migrated 28 days ago.
I'm currently developing an app in .NET c# for my own company and I'm facing some trouble when trying to use a HTML template to send a automated e-mail to my users with my app in c#.
C# Code to send e-mail using Gmail API
public bool sendEmail(SendEmailModel email)
{
try
{
UserCredential credential = loadCredentials();
string message = $"To: {email.receiver}\r\nSubject: {email.subject}\r\nContent-Type: text/html;charset=utf-8\r\n\r\n<h1>{email.content}</h1>";
var service = new GmailService(new BaseClientService.Initializer() { HttpClientInitializer = credential, ApplicationName = ApplicationName });
var msg = new Google.Apis.Gmail.v1.Data.Message();
msg.Raw = Base64UrlEncode(message.ToString());
service.Users.Messages.Send(msg, "me").Execute();
return true;
}
catch(Exception ex)
{
return false;
}
}
string Base64UrlEncode(string input)
{
var data = Encoding.UTF8.GetBytes(input);
return Convert.ToBase64String(data).Replace("+", "-").Replace("/", "_").Replace("=", "");
}
HTML Template
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<style>
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #f1f1f1;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
div[style*="margin: 16px 0"] {
margin: 0 !important;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
img {
-ms-interpolation-mode:bicubic;
}
a {
text-decoration: none;
}
*[x-apple-data-detectors], /* iOS */
.unstyle-auto-detected-links *,
.aBn {
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;
}
.a6S {
display: none !important;
opacity: 0.01 !important;
}
.im {
color: inherit !important;
}
img.g-img + div {
display: none !important;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
#media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<style>
.primary{
background: #17bebb;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #f7fafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
.btn{
padding: 10px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 25px;
background: #e77d1a;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 25px;
background: transparent;
border: 1px solid #e77d1a;
color: #e77d1a;
}
.btn.btn-black-outline{
border-radius: 0px;
background: transparent;
border: 2px solid #000;
color: #000;
font-weight: 700;
}
.btn-custom{
color: rgba(0,0,0,.3);
text-decoration: underline;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Poppins', sans-serif;
color: #000000;
margin-top: 0;
font-weight: 400;
}
body{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #17bebb;
}
table{
}
.logo h1{
margin: 0;
}
.logo h1 a{
color: #17bebb;
font-size: 24px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
}
.hero{
position: relative;
z-index: 0;
}
.hero .text{
color: rgba(0,0,0,.3);
}
.hero .text h2{
color: #000;
font-size: 34px;
margin-bottom: 0;
font-weight: 200;
line-height: 1.4;
}
.hero .text h3{
font-size: 24px;
font-weight: 300;
}
.hero .text h2 span{
font-weight: 600;
color: #000;
}
.text-author{
bordeR: 1px solid rgba(0,0,0,.05);
max-width: 50%;
margin: 0 auto;
padding: 2em;
}
.text-author img{
border-radius: 50%;
padding-bottom: 20px;
}
.text-author h3{
margin-bottom: 0;
}
ul.social{
padding: 0;
}
ul.social li{
display: inline-block;
margin-right: 10px;
}
.footer{
border-top: 1px solid rgba(0,0,0,.05);
color: rgba(0,0,0,.5);
}
.footer .heading{
color: #000;
font-size: 20px;
}
.footer ul{
margin: 0;
padding: 0;
}
.footer ul li{
list-style: none;
margin-bottom: 10px;
}
.footer ul li a{
color: rgba(0,0,0,1);
}
#media screen and (max-width: 500px) {
}
</style>
</head>
<center style="width: 100%; background-color: #f1f1f1;">
<div style=" display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;"></div>
<div style=" max-width: 900px; margin: 0 auto;" class="email-container">
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #dedede; margin: auto;">
<tr>
<td valign="middle" class="hero bg_white" style="background-color: #dedede; padding: 2em 0 2em 0;">
<div class="text-author" style="border-radius: 20px;background-color: #ffffff;border-color: #ffffff; ">
<table table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="{LOGO_1}" style="height: 100px; width: auto;">
</td>
</tr>
<tr>
<td style="text-align: left;">
<h3 class="name" style="font-weight: 600; font-size: 25px; color: #171717;">Olá,</h3>
<span class="position">{content}</span>
</td>
</tr>
<tr >
<td style="text-align: center;">
<p><a class="btn btn-white-outline" style="width: 94%;">{btn_1_content}</a></p>
<p>{btn_2_content}</p>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div style="height: 10px;"></div>
<span class="position" style="color: #dbdbdb;">Este é um e-mail enviado automaticamente.</span>
<div style="height: 10px;"></div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="separator" style="background-color: #d7d7d7; height: 1px;"></div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div style="height: 20px;"></div>
<span class="position" style="color: #dbdbdb;">Se você já realizou o pagamento desse boleto desconsidere esse e-mail.</span>
</td>
</tr>
<tr>
<td style="text-align: left;">
<h3 class="name" style="font-weight: 250; font-size: 16px; color: #171717;">Abraços,</h3>
<h3 class="name" style="font-weight: 600; font-size: 16px; color: #171717;">Equipe Acalanto.</h3>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style="text-align: center;">
<div>
<img src="{LOGO_2}" height="60px">
<h3 style="color: #898989; font-size: 14px;">© Organização Diamante LTDA</h3>
</div>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
I have no idea on how to use any kind of template with Gmail API. If Gmail API isn't the "go" for this case please let me know, I don't mind to use othe types of e-mail services but I really like Google stuff, but, in this case they don't have any info on .NET c# or even on how to use templates.
SOLUTION
After some thought I found the solution.
In the line of code:
tring message = $"To: {email.receiver}\r\nSubject: {email.subject}\r\nContent-Type: text/html;charset=utf-8\r\n\r\n<h1>{email.content}</h1>";
I just replaced <h1>{email.content}</h1> with File.ReadAllText("PATH_TO_HTML_FILE") and that was it. Sorry for the dumb question. In my opinion, Google should update their Gmail API documentation and examples, because I don't think anyone will go to the trouble of implementing a e-mail api and e-mail system to send simple e-mails with plain text and images.
Related
I am working with a .NET Core 6 Web API and I am using Rotativa to generate reports. I am currently renouncing the creation of a dynamic grid with the data that comes from a stored procedure which is called in the controller and then I pass its result to said method that passes and then iterates and builds the html.
I'm building everything on the API side in C#.
I attach the code where I put together the HTML
public string GetHtml(List<ListaMovimientosArea> movimientosArea)
{
string tablaHtml = "";
foreach (var movArea in movimientosArea)
{
tablaHtml += String.Format
("<tr>" +
"<td colspan=\"1\">{0}<td>" +
"<td colspan=\"2\">{1}<td>" +
"<td colspan=\"2\">{2}<td>" +
"<td colspan=\"3\">{3}<td>" +
"<td colspan=\"3\">{4}<td>" +
"<td colspan=\"1\">{5}<td>"+
"</tr>",
movArea.MovimientoId,
movArea.NombreArea,
movArea.FechaMovimiento,
movArea.TipoMovimientoNombre,
movArea.NombrePersona,
movArea.MontoTotal
);
}
string html = #"<!DOCTYPE html>
<html>
<head>
<meta charset=""utf-8"" />
<title>A simple, clean, and responsive HTML invoice template</title>
<style>
.invoice-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #eee;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.invoice-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.invoice-box table td {
padding: 5px;
vertical-align: top;
}
.invoice-box table tr td:nth-child(2) {
text-align: right;
}
.invoice-box table tr.top table td {
padding-bottom: 20px;
}
.invoice-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.invoice-box table tr.information table td {
padding-bottom: 40px;
}
.invoice-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.invoice-box table tr.details td {
padding-bottom: 20px;
}
.invoice-box table tr.item td {
border-bottom: 1px solid #eee;
}
.invoice-box table tr.item.last td {
border-bottom: none;
}
.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td {
width: 100%;
display: block;
text-align: center;
}
.invoice-box table tr.information table td {
width: 100%;
display: block;
text-align: center;
}
}
/** RTL **/
.invoice-box.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.invoice-box.rtl table {
text-align: right;
}
.invoice-box.rtl table tr td:nth-child(2) {
text-align: left;
}
tr.spaceUnder > td {
padding-top: 10em;
}
tr.border > td {
border: solid;
border-width: 1px 0;
}
</style>
</head>
<body>
<div class=""invoice-box"">
<table border=""1"" cellpadding=""0"" cellspacing=""0"">
<tr class=""top"">
<td>
<table border=""1"">
<tr>
<td class=""title"">
<img THERE IS A IMAGE>
</td>
</tr>
</table>
</td>
</tr>
<tr class=""information"">
<td>
<table>
<tr>
<td>
Caritas Argentina<br />
Diocesana Villa Maria<br />
Tel/Fax (0353) 4530388/4528919 <br />
Mexico 60 - 5900 Villa Maria (Cba.) <br />
e-mail: caritasvillamaria#hotmail.com
</td>
</tr>
</table>
</td>
</tr>
<table border=""1"">
<tr class=""heading"">
<td colspan = ""1"">Codigo</td>
<td colspan = ""2"">Area</td>
<td colspan = ""2"">Fecha Mov.</td>
<td colspan = ""3"">Tipo Mov.</td>
<td colspan = ""3"">Persona</td>
<td colspan = ""1"">Monto</td>
</tr>" +
tablaHtml
+
"</table>" +
"<tr class=\"total\"\">\r\n " +
"<td></td>\r\n\r\n" +
" <td>Total: $385.00</td>\r\n" +
"</tr>\r\n" +
"</table>\r\n" +
" </div>\r\n" +
"</body>\r\n" +
"</html>";
return html;
}
}
I attach the image of how it looks, I put the border in 1 to see why the problem but I couldn't solve it.
I attach the image of what the pdf looks like
The tests I did was to modify the style but I did not get a result.
This question already has answers here:
regular expression for finding 'href' value of a <a> link
(9 answers)
Closed 4 years ago.
I have a HTML string-variable which is:
<html>
<body style="margin: 0; background: #e0e0e0; text-align:center;">
<div style="padding: 0; text-align: left; width: 800px; margin: 0 auto; background: #e0e0e0; ">
<div style="text-align: center; border-bottom: 10px solid #000; background: #FEDC00; ">
</div>
<div style="border: 0; padding: 20px; width: 760px; background: #fff; font-family: Helvetica, Arial; font-size: 12px;">
</tr></table><hr /><div style="font-weight: bold; width: 45%; text-align: center; float: left; "> <a style="font-size: 17px;display: block; color: #fff; background: #009900; text-decoration: none; padding: 10px 20px;" href="dabb68d353e3a82315ec6419e4aaa854&url=booking|358137|b4e3bea97e18db09d7878a6010b5b57b">ACCEPT</a></div>
</div></div>
</body>
</html>
How can I get href content?
You can use HTMLAgilityPack
var docs = new HtmlAgilityPack.HtmlDocument();
docs.LoadHtml("YourHTML");
string HrefValue= docs.DocumentNode.SelectSingleNode("//a").Attributes["href"].Value;
I have a asp:Button, I used css styles with cssClass property in asp:Button, but those styles are not working.
This is my asp button:
<tr>
<td>
<div class="form_row">
<asp:Button ID="ButtonSend" CssClass="BtnSend" runat="server" Text="Send" OnClick="ButtonSend_Click" />
</div>
</td>
</tr>
This is my CSS:
.BtnSend {
width: 53px;
height: 24px;
display: block;
float: right;
margin: 0 0 0 10px;
background: url(../../Images/contact_bt.gif) no-repeat center;
text-decoration: none;
text-align: center;
line-height: 24px;
color: #fff;
}
If I'm not wrong, I should use something like this:
input[type="submit"]
{
//css coding
}
but I don't know where to put it and how to affect only this button.
Based on your comment, add/change this in your css:
.BtnSend {
border: none;
background: transparent url(../../Images/contact_bt.gif) no-repeat center;
}
All of the objects on the screen are centered with the exception of the CrystalReportViewer.
Does the CrystalReportViewer not work with CSS?
Here's my CSS class that I'm using for this part of the page:
.reportForm {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 70%;
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
The report is all the way to the left of the screen, I just want to center it.
Again, all other controls are centered on the screen.
The report is also embedded on a paragraph tag.
Here's the actual control:
<form runat="server" class="reportForm">
<p>
<CR:CrystalReportViewer ID="crvSchedules" runat="server" AutoDataBind="True" DisplayStatusbar="False" EnableDatabaseLogonPrompt="False" EnableDrillDown="False" EnableParameterPrompt="False" EnableTheming="False" EnableToolTips="False" HasCrystalLogo="False" HasDrilldownTabs="False" HasDrillUpButton="False" HasGotoPageButton="False" HasPageNavigationButtons="False" HasSearchButton="False" HasToggleGroupTreeButton="False" HasToggleParameterPanelButton="False" HasZoomFactorList="False" Height="1153px" ToolPanelView="None" Width="868px" GroupTreeImagesFolderUrl="" ToolbarImagesFolderUrl="" ToolPanelWidth="200px" HasExportButton="False" HasPrintButton="False" />
</p>
</form>
This is the ENTIRE CSS file:
.reportForm {
margin-left: auto;
margin-right: auto;
text-align: center;
width: 70%;
background-color: #efeeef;
clear: both;
padding-bottom: 35px;
}
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
}
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 0.8em;
font-weight: 600;
padding: 6px;
margin-right: 8px;
width: auto;
}
I couldn't figure out what the issue was with this so I just put the report in a table and centered it.
I have an asp.net c# web page. On the page I have a image box which will randomly display an image every 5 secs or so. The problem is, some of the pictures appear squashed. All of the pictures have been cropped in photoshop to 350x350 pixels and the size of the image box is 350x350 pixles. If you look at the pictures using another program they look fine, but on the asp.net page they look funny. Can someone show me where I'm going wrong?
Thanks,
Craig
here's the source code rendered in IE, but it looks nothing like what I have in my asp.net default page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form method="post" action="Default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE5NTc5Mjg4MDYPZBYCZg9kFgICAw9kFgICAw9kFgICAw8WAh4HRW5hYmxlZGdkZESHdPrJrv0fd90yot44IdP2LuG176cv2XyHWiPVlPSh" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/WebResource.axd?d=DogTP9ciF8js-919lyE5BNUR3gLIy6vQ94IA8ujQqufPbSjgjYs-MB8TFhgGkZbCezg2T7MihOn_QzXNJh8bUbKXvUZPuDq-Zo79nPbUosQ1&t=634856347325009875" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=4jTc4W6vHbFONhMZfZEniQ0ll2ox3vAxSkMzYB-7HtakDqsmhXCZFBXSRwOb1nRWK6CMzP0qyRYdnYMNnTFXhx2r0J9E2ik7kM8XVmq_UBEPDXqK-kLCJqvRQAvq0wv0ZlWQS1gCjlQxcxLhV1XrJQ2&t=150492e7" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=GHu6blHeASt9skHbsJx4uFWYiLKvlA8B1V1ZT8jJM7xJFl3ycZATlv3IHRrGJMm_fpPlBSBh8s1B1E7r9viSf2_vG2Xab8vHZGZqr8izsLUD5pjhbTenZ9dImmZEGONdwrT5ungX3KYzAap2ByhMGQe1RCN4HIeWzLfx9QPaNIL_dFC2Su5ez5Ui0Ux0TCBs0&t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=k0ZMcbO229cP7tJHdqfAeLLkubS_PB3nLJRGVfbZzo992j-U0QXogHZ9AeLO7yXzYa70OSzRIw-wnFwxHbCbmy30q_MrEaY-iqOTNAQzXLCt0hz--HUsMHJsrrht6bk34EjhwJc7bL5h2KjWTMIm5sDlaERrkzNMJ2CYN7WaxPRUTRyOkbTPleHmC1PMtedi0&t=ffffffff940d030f" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=7Pyyv_WcNl6DPXEjw9wnwQXSTOHSqlXve9fO2VxG4I-t0REk8QlK5V7QxKS7jkGO1CGno7PDXkPN1ApWod5KVH--pObLgj1ukjWVTcpKZZNJKm_Fz0qDQd_RVd2qBcBGOEo0qqVjh1A8QaUZNRMFCx12FzcYFbkEV_4FAwoZHekJoj0b0U3QdytSO2iP-U-F0&t=ffffffff940d030f" type="text/javascript"></script>
<div class="page">
<div class="header">
<div class="title">
<h1>
My Family Web Site
</h1>
</div>
<div class="clear hideSkiplink">
<img alt="Skip Navigation Links" src="/WebResource.axd?d=CEw_ah6x15SB8gE6w0h-5pVp-C_glYrwEoXIAM74CoVRv4LUELJEQWVkcLYtMPI0-_6jQVupgDDSAEIK43VxSf5HH-tcHYeqNWJ2d0U1yuU1&t=634856347325009875" width="0" height="0" style="border-width:0px;" /><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li><li><a class="level1" href="Daniel.aspx">Daniel</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$MainContent$ScriptManager1', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$Timer1','MainContent_Timer1'], [], 90, 'ctl00');
//]]>
</script>
<div class="picture">
<span id="MainContent_Timer1" style="visibility:hidden;display:none;"></span>
<div id="MainContent_UpdatePanel1">
<img id="MainContent_Image1" src="Pictures/25.JPG" align="middle" style="height:350px;width:350px;" />
</div>
</div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
$create(Sys.UI._Timer, {"enabled":true,"interval":1500,"uniqueID":"ctl00$MainContent$Timer1"}, null, null, $get("MainContent_Timer1"));
});
//]]>
</script>
</form>
</body>
</html>
Here's the code in my asp.net page:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="FamilyWebSite._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome To The Smith Family Web Site</h2>
<p>
Here you can find out all of the great things going on at the homestead.
</p>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="picture">
<asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="1500">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Pictures/25.JPG"
Width="350px" Height="350px" ImageAlign="Middle" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
here's the Site.css as well
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #fff;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
text-align: center;
}
h1
{
font-size: 3em;
padding-bottom: 0px;
margin-bottom: 0px;
text-align: center;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
p
{
color: #fff;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
min-height: 800px;
background-color: #778899;
margin: 20px auto 0px auto;
border: 2px solid #787878;
}
.header
{
position: relative;
margin: 2px;
padding: 0px;
background: #ccc;
width: auto;
text-align: center;
border: 2px ridge #787878;
}
.header h1
{
width: auto;
font-weight: 700;
margin: auto;
padding: 4px 4px 4px 4px;
color: Olive;
border: none;
line-height: 2em;
font-size: 2em;
text-align: center;
background: #000;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:Olive;
width:100%;
}
div.menu
{
padding: 4px 2px 2px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: inline-block;
/*float: left;*/
text-align: center;
width: auto;
border: 2px groove #fff;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.picture
{
padding: 2px;
margin: 5px;
border: 3px ridge #fff;
height: auto;
width: inherit;
float: left;
}
Don't set the height and width to asp image tag. As the pictures are already cropped in photoshop to 350x350. asp image tag will render the image with original height and width.
Compiler wasn't seeing the edited picture files. A clean rebuild refreshed the resources.