I am trying to send an email using Django. The email template was made by someone else with a ton of CSS and it will take a lot of hours just to "inline" it. So I used premailer to inline the CSS automatically. It worked pretty well till I saw that it also inlined the media queries that were responsible for the responsiveness of the templates.
One solution I saw was to put media queries in a separate style tag and put
data-premailer="ignore"
but unfortunately, I think this solution does not work anymore.
I also tried using django_inlinecss, but that didn't work for me also.
Please let me know how to fix premailer or if there any other package available that can inline CSS.
Hello #ahsan mukhtar you don't have to use any external library use django EmailMessage
from django.core.mail import EmailMessage
from domain_project import settings
from django.template.loader import get_template
from django.shortcuts import render,redirect
from django.http import JsonResponse
from contact.models import Contact
def contact(request):
if request.is_ajax():
contact = Contact()
contact.name = request.GET.get('name')
contact.email = request.GET.get('email')
contact.phone = request.GET.get('phone')
contact.subject = request.GET.get('subject')
contact.message = request.GET.get('message')
contact.save()
ctx = {
'name': request.GET['name'],
'email': request.GET['email'],
'phone': request.GET['phone'],
'message':request.GET['message']
}
email_temp = get_template('email_template/contact_email.html').render(ctx)
msg = EmailMessage(
'Hello'+' '+str(request.GET['name']),
email_temp,
settings.DEFAULT_FROM_EMAIL,
[request.GET.get('email'),],
)
msg.content_subtype = "html"
msg.send()
return JsonResponse({'massage':"massage"},safe=True)
<!DOCTYPE html>
<html>
<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" />
<style type="text/css">
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px) {
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
<!-- HIDDEN PREHEADER TEXT -->
<div
style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- LOGO -->
<tr>
<td bgcolor="#ed3936" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ed3936" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<!-- name,email,phone,looking_for,message -->
<td bgcolor="#ffffff" align="center" valign="top"
style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
<h1 style="font-size: 30px; font-weight: 400; margin: 1;">Welcome! <br>
<span style="font-size: 20px; font-weight: 500;">{{ name }}</span></h1>
<img src="https://media.itdude.in/media/email_template.png" width="125" height="120"
style="display: block; border: 0px;" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="left"
style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<h4 style="margin-bottom: 0;">Your Requrement :</h4>
<p style="margin: 0;">{{ message }}<br></p>
<p style="color:black;">You will receive a call frome us within 2 working days.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left"
style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin-bottom: -50px; color:black; text-align:center;">We're excited to have you
get started. Explore our Website. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="border-radius: 3px;" bgcolor="#ed3936"><a
href="https://domain.in/" target="_blank"
style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #ed3936; display: inline-block; ">Explore
Our Website</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr> <!-- COPY -->
<tr>
<td bgcolor="#ffffff" align="left"
style="padding: 0px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">If you have any questions, just reply to this email—we're always happy
to help out.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left"
style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0; color:red;">Domain</p>
<small style="color:black;">TECH SOLUTIONS PVT. LTD.</small><br>
<small>
<b>Phone:</b>
<a href="tel:+91 9999999999" target="_blank" style="text-decoration:none;">
+91 9999999999
</a><br>
<b>Email:</b>
<a href="mailto:contact#domain.in" target="_blank" style="text-decoration:none;">
contact#domain.in
</a></small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 30px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#FFECD1" align="center"
style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<h2 style="font-size: 20px; font-weight: 400; color: #111111; margin: 0;">Need more help?
</h2>
<p style="margin: 0;"><a href="https://domain.in/contact/" target="_blank"
style="color: #5762cc;">We’re here to help you out</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Related
I have the following code.
<tr>
<td align="left" style="padding-top: 10px;" bgcolor="#fffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Attraction Name:
</td>
<td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Arlington Hotel Celtic Night
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Email:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
info#celticnights.com
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Website:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
http://celticnights.com
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Reservation:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Required
</td>
</tr>
</table>
</td>
</tr><tr>
<td align="left" style="padding-top: 10px;" bgcolor="#fffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Attraction Name:
</td>
<td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Ashtown Castle
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Email:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
phoenixparkvisitorcentre#opw.ie
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Website:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px; word-wrap: break-word;">
http://www.heritageireland.ie/en/dublin/phoenixparkvisitorcentre-ashtowncastle/
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Reservation:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Not Required
</td>
</tr>
</table>
</td>
</tr>
The problem is that the second attraction details does not seem to follow the maximum width. I know that this is occurring because of the long website url.
I have a couple of questions relating to this:
Why is the url not breaking onto multiple lines?
Is there a way I can force it into multiple lines without modifying the URL?
Use css rule word-break: break-all;
table tr td:nth-child(2) {
word-break: break-all;
}
<table>
<tr>
<td align="left" style="padding-top: 10px;" bgcolor="#fffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Attraction Name:
</td>
<td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Arlington Hotel Celtic Night
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Email:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
info#celticnights.com
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Website:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
http://celticnights.com
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Reservation:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Required
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" style="padding-top: 10px;" bgcolor="#fffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="40%" align="left" bgcolor="#c8f4ca" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Attraction Name:
</td>
<td width="60%" align="right" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 800; line-height: 24px; padding: 10px;">
Ashtown Castle
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="25%" align="right" style="max-width: 25%;">
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Email:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
phoenixparkvisitorcentre#opw.ie
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px;">
Website:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 5px 10px; word-wrap: break-word;">
http://www.heritageireland.ie/en/dublin/phoenixparkvisitorcentre-ashtowncastle/
</td>
</tr>
<tr>
<td width="25%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Reservation:
</td>
<td width="75%" align="left" bgcolor="#eeeeee" style="font-family: Open Sans, Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding: 15px 10px 20px 10px;">
Not Required
</td>
</tr>
</table>
I am trying to make an html signature using a table, however I can't seem to get it to look clean on mobile. I have tried the "Sky's the limit" height at "190px" keeping it from expanding over the entire page in outlook (everyone at this office uses outlook, my code works in most emails but not in outlook for some reason), but it looks funny after opened in mobile. To keep this weird table adjustment from happening, putting the image at 100% width has helped but it expands over the entire page on a normal email and still doesn't look great on mobile. Is there any way I can get my code to look the way I want it to on both mobile and desktop?
At 190px on mobile:
At 100% on mobile:
How I want it to look:
My Code:
<div style="height: 190px; width: 500px; max-height: 190px; max-width: 500px; min-width: 500px;">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr><td valign="center" style="padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0px; border-top: 0; border-bottom: 0: border-left: 0; border-right: solid #2b2b2b"><img id="preview-image-url" src="https://i.imgur.com/JeK1isp.png" nosend="1" border="0" height="100%" alt="SkyBound USA"></td>
<td style= "padding-top:0; padding-bottom:0; padding-left: 5px; padding-right: 5px; background: #2b2b2b" >
<td valign="bottom" style="padding-left: 0px; padding-right: 0px; background: #2b2b2b;" >
<a href="https://www.instagram.com/skybound.trampolines/">
<img src="https://i.imgur.com/h7f7fjo.png" nosend="1" border="0" height="30" alt="Instagram">
</a><br>
<a href="https://www.facebook.com/SkyBoundUSA/">
<img src="https://i.imgur.com/MJ35g0C.png" nosend="1" border="0" width="30" alt="Facebook">
</a><br>
<a href="https://www.youtube.com/channel/UCH0821QeTOByekqpvrAE6pQ">
<img src="https://i.imgur.com/NuZrjP6.png" nosend="1" border="0" width="30" alt="YouTube">
</a><br>
</td>
<td style= "padding-top:0; padding-bottom:0; padding-left: 5px; padding-right: 5px; background: #2b2b2b;" >
<td style="padding-top: 0; padding-bottom: 0; padding-left: 12px; padding-right: 15px; background: #ebebeb">
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0; background: #ebebeb;">
<tr>
<td colspan="2">
<a href= "https://www.skyboundusa.com/"><img src= "https://i.imgur.com/Ml3FJ3X.png" nosend="1" border="0" width="90" padding-bottom="5" alt="Facebook"></td></tr>
<tr>
<!-- name goes here -->
<td colspan="2" style="padding-bottom: 3px; color: orange; font-size: 18px; font-family: Arial, Helvetica, sans-serif; padding-top: 5px; ">CORINNE NICEWICK</td></tr>
<tr><td colspan="2" style="color: #2b2b2b; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
<!-- title goes here -->
<i>Design and Marketing Consultant</i></td></tr>
<tr>
<td colspan="2" style="color: #2b2b2b; font-size: 14px; font-family: Arial, Helvetica, sans-serif;">
<strong>SkyBound USA</strong></td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">p:</td>
<!-- phone numbers go here primary first, then mobile-->
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"> 888.891.4689
<span style="color: orange;">m: </span>703.795.7373</td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">a:</td>
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">3140 Warner Ave., Santa Ana, CA 92704</td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">w:</td>
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
www.SkyBoundUSA.com</td></tr>
<tr><td width="5" valign="top" style="vertical-align: top; width: 20px; color: orange; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">e:</td>
<td valign="top" style="vertical-align: top; color: #2b2b2b; font-size: 12px; font-family: Arial, Helvetica, sans-serif;">
cnicewick#skyboundusa.com</td></tr>
<!-- email goes here - replace mailto and name -->
<tr>
</td>
</tr>
</table>
</td></tr></table>
</div>
I'm trying to create responsive emailer which is not working in Outlook. Can you please help me out? I also tried to inset div align center but still not working.
Right now its center align but when I view it on mobile its left align.
<center>
<!--[if mso]>
<table style="width: 300px;">
<tr>
<td>
<![endif]-->
<!--one-->
<table border="0" cellpadding="0" cellspacing="0" align="left" width="225" height="158" bgcolor="#006699">
<tr>
<td style="padding: 0;" align="left" class="responsive-image middle">
<img src="http://www.eruditus.com/emailer/0418_responsive_columbia/bg.jpg" style="display: block; margin: 0; padding: 0;">
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="left" width="225" bgcolor="#0093d4" height="158px">
<tr>
<td width="" style="padding: 0 0 0 0; background-color: #0093d4; vertical-align: top;" bgcolor="#0093d4" valign="top">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#0093d4">
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
<tr>
<td width="56" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 5px 0 0 10px;" bgcolor="#0093d4" valign="top">Email:</td>
<td width="273" style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0;" bgcolor="#0093d4" valign="top">EPM_columbia#eruditus.com
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 20px; padding: 0 0 0 10px;" bgcolor="#0093d4" valign="top">Phone:</td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0px; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+91 22 6162 3112(India)</span>
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+971 044302011(Dubai)</span>
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"><span style="font-size: 12px; line-height: 20px;">+1 862 252 5823(USA)</span>
</td>
</tr>
<tr>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
<td style="color: #fff; background-color: #0093d4; vertical-align: top; font-size: 12px; line-height: 0; padding: 0;" bgcolor="#0093d4" valign="top"> </td>
</tr>
</table>
</td>
</tr>
</table>
</center>
Place the table inside a div and in the div tag give align="centre".
This may solve the issue.
Visual Studio 2008 - ASP Membership Login control
I'm trying to style the ASP:Login control. I've converted it to a Template - here's the markup:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="My.Login" %>
<!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 runat="server">
<title>My Login</title>
<link href="Style.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Login ID="Login1" runat="server">
<LayoutTemplate>
<table border="0" cellpadding="1" cellspacing="0"
style="border-collapse:collapse;">
<tr>
<td>
<table border="0" cellpadding="0">
<tr>
<td class="normalAAText" align="center" colspan="2">
Log In</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" CssClass="normalAAText" >User Name:</asp:Label>
</td>
<td>
<asp:TextBox ID="UserName" CssClass="normalAAText" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server"
ControlToValidate="UserName" ErrorMessage="User Name is required."
ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right" class="normalAAText">
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" CssClass="normalAAText">Password:</asp:Label>
</td>
<td>
<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server"
ControlToValidate="Password" ErrorMessage="Password is required."
ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td colspan="2">
<asp:CheckBox ID="RememberMe" CssClass="normalAAText" runat="server" Text="Remember me next time." />
</td>
</tr>
<tr>
<td align="center" colspan="2" style="color:Red;">
<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In"
ValidationGroup="Login1" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:Login>
</div>
</form>
</body>
</html>
In the IDE the page looks like this:
However, when it's rendered it looks like this (i.e. no styling)
I can apply stying in-line for each control, but that rather defeats the object of a style sheet. It's clear that the CSS file is correctly linked otherwise the IDE wouldn't display my nice purple lettering!
Any thoughts?
The CSS file is below. Thanks
Edward
body
{
}
.grid-view
{
padding: 0;
border: 1px solid #333;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
font-size: 0.9em;
margin-left: 0;
margin-right: 0;
margin-top: 0;
}
.grid-view tr.header
{
background-color: #ADB0FF;
border-bottom: "1px solid #000";
color: #000000;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
height: 20px;
text-transform: uppercase;
}
.normalAAText
{
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
color: #6666cc;
font-weight: 700;
}
.header
{
background-color :#ADB0FF
}
.linkButton
{
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
color: Red;
font-weight: bold;
}
.grid-view tr.normal
{
background-color :#CECCFF;
border-bottom:"0px solid #000"; COLOR: #000000;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
FONT-SIZE:12px; TEXT-DECORATION: none; height:17px;
}
.grid-view tr.alternate
{
background-color:#A0A0FF; border-bottom:"1px solid #000"; COLOR: #000000;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
FONT-SIZE: 12px; height:17px; TEXT-DECORATION: none ;
}
.grid-view tr.normal:hover, .grid-view tr.alternate:hover
{
background-color :#BDDFF8; border-bottom:"0px solid #000"; COLOR: #000000;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif; FONT-SIZE:12px; TEXT-DECORATION: none; height:17px;
}
.btnSaveCancel
{
border-color: #B3CCE6;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
font-weight:bold;
border-bottom-style: double;
border-left-style: double;
border-right-style: groove;
border-top-style: groove;
border-bottom-width: 1;
border-left-width: 1;
border-right-width: 1;
border-top-width: 1;
text-align: center;
cursor: hand;
color: #000000;
}
a.logout
{
padding: 2px 5px;
color: #ffffff;FONT-SIZE: 12px;
text-decoration: none;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
}
a.logout:visited
{
padding: 2px 5px;
color: #ffffff;FONT-SIZE: 12px;
text-decoration: none;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
}
a.logout:hover
{
padding: 2px 5px;
color: #ffffff;FONT-SIZE: 12px;
text-decoration:underline;
font-family: "Trebuchet MS","lucida grande","Segoe UI",arial,verdana,"lucida sans unicode",tahoma,sans-serif;
}
A colleague has explained to me that the style sheet is a protected asset, which cannot be loaded until authentication. I've moved it into a folder for which anonymous access is permitted, and all works well.
Looks like you guys were right. Changing the order has fixed the problem. Seems like such an easy fix. Thanks for all the comments/help.
I am having some issues with my links and css. Below is my code for the site. My problem is I have 5 links all using the same class. They all display correctly and the links work fine but the hover and active do not change on the first. The last three work just how they should. Why is this? What is going on? I have deleted it all and re-typed it. I have tried different browsers. Deleted the cache. Nothing.
HTML Code:
<tr bgcolor="#FFFFFF">
<td rowspan="2">
<img src="images/layout/header-menu/menu_02.gif" width="57" height="51" alt=""></td>
<td align="center" height="29">Home</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_04.gif" width="41" height="51" alt=""></td>
<td align="center" height="29">About</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_06.gif" width="36" height="51" alt=""></td>
<td align="center" height="29">Products</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_08.gif" width="36" height="51" alt=""></td>
<td align="center" height="29">Recipes</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_10.gif" width="36" height="51" alt=""></td>
<td align="center" height="29">Contact</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_12.gif" width="58" height="51" alt=""></td>
CSS Code:
a.menu:link {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:hover {
color: #713010;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:active {
color: #F9A22E;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:visited {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
Put your link css in this order:
a
a:visited
a:hover
a:active
For your example, this css should work as expected:
a.menu:link {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:visited {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:hover {
color: #713010;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
a.menu:active {
color: #F9A22E;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}
Set the visited to appear after link in your CSS.
Way I remember is: *L*o*V*e *HA*te
Tested in my browsers and works when re-arranged. Problem is your visited style is the same as your link style, and overrides the hover (when you are on index.php)
#Artur is right and so is #Guido.
You definitely don't want to use tables for navigation elements.
Here's what I did with your code:
HTML:
<div class="menu">
<td rowspan="2">
<img src="images/layout/header-menu/menu_02.gif" width="57" height="51"
alt="">
</td>
<td align="center" height="29">Home
</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_04.gif" width="41" height="51"
alt="">
</td>
<td align="center" height="29">About
</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_06.gif" width="36" height="51"
alt="">
</td>
<td align="center" height="29">Products
</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_08.gif" width="36" height="51"
alt="">
</td>
<td align="center" height="29">Recipes
</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_10.gif" width="36" height="51"
alt="">
</td>
<td align="center" height="29">Contact
</td>
<td rowspan="2">
<img src="images/layout/header-menu/menu_12.gif" width="58" height="51"
alt="">
</td>
</div>
CSS:
.menu a {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;
}
.menu a:visited {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;
}
.menu a:hover {
color: #713010;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;
}
.menu a:active {
color: #F9A22E;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;
}
I also made a fiddle for this as well:
http://jsfiddle.net/ultraloveninja/D5rUR/