I have an email that I'm working on that included a light-colored background image with black text and a button over it. On MS-Outlook Dark Mode (macOS 10.15) and Outlook.com Dark (Chrome), the text and button are white. Here's my code.
I followed advice from this article: and have added the fixes recommended in the section How to Keep Text Black Inside VML in Dark Mode, but the text is still white. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>NielsenIQ Consumer 360</title>
<meta charset="utf-8">
<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" >
<meta name="color-scheme" content="light dark">
<meta name="supported-color-scheme" content="light dark">
<!--[if mso]><xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if mso]>
<style type="text/css">
body, table, td, h1, h2, h3, p, li, a {font-family: Helvetica, Arial, sans-serif !important;}
</style>
<![endif]-->
<style>
/* 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; font-size:0; line-height: 0; }
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; font-size: 0; line-height: 0; }
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;
}
/* GMAIL BLUE LINKS */
u ~ div #body-table a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* SAMSUNG MAIL BLUE LINKS */
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a {text-decoration: none;} /* for Windows 10 underlining */
body[yahoo]{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
table { border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;empty-cells:show; }
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
/* Make sure the links are Black in Gmail */
.link { text-decoration: underline; color: #000000 !important; }
.link:hover { text-decoration: none; }
/* Target Outlook App for Dark Mode */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display:none; display:none !important; }
/* Styles for Dark Mode */
#media (prefers-color-scheme: dark ) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
h1.black-header1, p.black-para, .inner a { color: #000000 !important; }
.keep-black { color: #000000 !important; }
/* .two-column__white-bg-left-img .two-column,
.two-column__black-bg-right-img .two-column,
.wrapper { background-image: none !important; } */
/* Hides Light Mode-Only Content, Like Images */
.light-img { display:none; display:none !important; }
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;700&display=swap');
.wrapper { width: 640px; background-color: #fefefe; }
div.left-column td.inner,
div.right-column td.inner { padding-top: 20px; }
.niq-top { width: 100%; }
.niq-angle { width: 100%; }
.top-story { padding-left: 60px; padding-top: 20px; padding-right: 60px; padding-bottom: 60px; }
.hero-image { width: 100%; max-width: 100%; }
.dark-gray-cat-left { font-family:'Montserrat', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 14px; color: #666666; font-weight: 700; }
.divider { width: 640px; height: 12px; }
.social-section, .copyright-section { padding-left: 60px; padding-top: 60px; padding-bottom: 60px; padding-right: 60px; }
.branding-section { padding-left: 60px; padding-top: 20px; padding-bottom: 20px; padding-right: 60px; width: 640px; }
.footer-section { padding-left: 60px; padding-top: 60px; padding-right: 60px; padding-bottom: 80px; }
img.bottom-logo { width: 196px; height: auto; }
a.black-link { color:#000000; }
a.white-link { color:#ffffff; }
/*C360 Styles */
.inner { padding-left: 60px; padding-top: 20px; padding-right: 60px; padding-bottom: 30px; }
/*Media Queries*/
#media screen and (max-width: 480px) {
.wrapper { width: 480px; }
.niq-top { width: 100%; }
.niq-top img { width: 480px; height: auto; }
.niq-angle img { width: 480px; height: auto; }
.top-story { padding-left: 40px; padding-top: 20px; padding-right: 40px; padding-bottom: 40px; }
.branding-section { width: 480px; }
.divider { width: 480px; height: 6px; }
.social-section, .copyright-section { padding-left: 40px; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; }
.footer-section { padding-left: 40px; padding-top: 40px; padding-right: 40px; padding-bottom: 60px; }
}
</style>
<!--[if gte mso 16]>
<style>
body {
background-color:#353535 !important;
}
.keep-black {
mso-style-textfill-type:gradient;
mso-style-textfill-fill-gradientfill-stoplist:"0 \#000000 1 100000\,99000 \#000000 1 100000";
color: #ffffff !important;
mso-color-alt: auto;
}
</style>
<![endif]-->
</head>
<body style="background-color: #b3b3b3;">
<!-- Top Section Header / 0- ===== Only this top portion expands 100% width across the top ===== -->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #010101;" width="100%">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="niq-top" style="background-color: #010101;font-size:0;line-height:0;"><img alt="NielsenIQ" src="https://microsites.nielsen.com/web-assets/wp-content/uploads/sites/10/2021/01/the-iq-brief-top-bar-no-N.png"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Top Section -->
<!-- Main Content Area -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" role="presenation" style="background-color: #fefefe;">
<tr>
<td><!-- Top Story Block -->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center"><!-- Top Story -->
<table border="0" cellpadding="0" cellspacing="0" class="wrapper" role="presentation" style="width: 640px;">
<tr>
<td class="lead-in" style="background-image: url('https://microsites.nielseniq.com/web-assets/wp-content/uploads/sites/7/2022/03/white-background-1.png'); background-color: #ffffff; background-position:top left; background-repeat: no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" fillcolor="#fefefe" style="width: 640px; height: 317px;">
<v:fill type="tile" type="frame" src="https://microsites.nielseniq.com/web-assets/wp-content/uploads/sites/7/2022/03/white-background-1.png" color="#656565" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="inner">
<h1 class="keep-black" style="font-family:'Montserrat', Helvetica, Arial, sans-serif; font-size: 28px; line-height: 38px; color: #000000; mso-color-alt:auto;font-weight: 700;">Gain the momentum to tackle what's next</h1>
<p class="keep-black" style="font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 26px; color: #000000; mso-color-alt:auto;">Explore ideas that are motivating progress and transforming the consumer packaged goods industry.</p>
<!--[if mso]><i style="letter-spacing: 12px;mso-font-width:-100%;mso-text-raise:32pt"> </i><![endif]--><span style="mso-text-raise:12pt;color:#ffffff;">Join us at C360 2022</span><!--[if mso]><i style="letter-spacing: 12px;mso-font-width:-100%"> </i><![endif]-->
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Related
I have a pretty simple unordered list with some links in an html email that generated by a server. It looks and works as expected in most email clients (gmail, apple mail, outlook web), but in Outlook desktop some of the links don't work, seemingly at random.
Specifically, some of the links (all from the same list) work, some don't. When they don't, they don't appear as links: they're not underlined and the cursor doesn't change when you mouse over them.
Here's the code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>New Lead</title>
<style>
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] h2 {
margin-bottom: 5px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
#media all {
.btn-primary table td:hover {
background-color: #229422 !important;
}
.btn-primary a:hover {
background-color: #229422 !important;
border-color: #229422 !important;
}
.statusLinks a {
color: #870a0a
}
}
</style>
</head>
<body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">New lead from Bill Jones of Jason Test 20220511 B</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="margin-top: 20px; border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<img src="http://company.com/logo.png" alt="company logo" width="227" height="31" border="0" style="-ms-interpolation-mode: bicubic; max-width: 100%; padding-bottom: 2em; border: 0; outline: none; text-decoration: none; display: block;">
Hello,
<br/>
<br/>The following sales lead has been assigned to you based on the inquiry sender's location and needs.
<br/>
<br/>Please process the lead within 24 hours; contact the inquiry sender (when needed) and select the correct status or delegate the lead to someone else. Options are listed in the bottom of this email.
<br/>
<br/>
<h2>Lead Details</h2>
<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" style="display:block; width: 100% !important; margin-bottom: 20px"><tbody>
<tr><td style="color: #888888; font-size: 12px;"> ID#:</td></tr>
<tr><td style="padding-left: 10px;">218271</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Source:</td></tr>
<tr><td style="padding-left: 10px;">Manually-added lead - Outbound Calls</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Status:</td></tr>
<tr><td style="padding-left: 10px;">Awaiting Sales Action</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Generated Date:</td></tr>
<tr><td style="padding-left: 10px;">12 May 2022</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Company:</td></tr>
<tr><td style="padding-left: 10px;">Jason Test 20220511 B</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Location:</td></tr>
<tr>
<td style="padding-left: 10px;">
United States
</td>
</tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Contact:</td></tr>
<tr><td style="padding-left: 10px;"><div><div style="margin: .3em 0"><span style="margin-right: .25em; border: 1px solid #ccc;padding:.25em">Bill</span> <span style="border: 1px solid #ccc;padding:.25em">Jones</span></div></div><div>jason#company.com</div><div>Marketing Allowed: No</div></td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Interest:</td></tr>
<tr><td style="padding-left: 10px;">Training</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Customer Comment:</td></tr>
<tr><td style="padding-left: 10px;">
--
</td></tr>
</tbody></table>
<table role="presentation" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #F7ACAD; border-radius: 3px; width: 100%;" width="100%">
<tr>
<td style="padding:10pt">
<h2 style="margin-top:0">Update Lead Status</h2>
<p>Please process this as soon as possible and select one of the options below. For detailed information of the categories, please review your Sales Handbook.</p>
<ul class="statusLinks">
<li>Qualify</li>
<li>Mark as Non-Sales Inquiry</li>
<li>Work-In-Progress</li>
<li>Mark as Disqualified</li>
<li>Mark as Junk / Solitication</li>
<li>Send to Dealer</li>
<li>Mark as Career / Media / PR / Sponsorship / Supplier Inquiry</li>
<li>Delegate to Someone Else</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr style="clear: both; border: 0; border-bottom: 1px solid #cacaca; margin: 20px 0;">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">Your feedback is always appreciated.</p>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer" style="clear: both; margin-top: 10px; text-align: center; width: 100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; color: #999999; font-size: 12px; text-align: center;" valign="top" align="center">
©2022 product, a product of Company.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>
Some relevant details:
The email uses the Cerberus html template.
There are no list specific styles in play outside of changing text color (no positioning or z-index stuff, etc.)
I can't replicate it myself at all; my user can't replicate it on demand either, but sees the problem routinely.
As far as I can tell the user is using the most up to date version of outlook desktop with no plugins.
Questions
Is anyone else seeing this problem?
Are there any obvious problems with my markup?
Are there any ways to lint/validate html emails for outlook standards?
Updates:
20220513 Stabbing around in the dark, I noticed if you change the zoom in the separate message window some of the links no longer work. They still look like links, but the hover and click actions no longer work. This might be related.
20220513 With some more messing around, when viewing the message in the separate, just scrolling up and down changes whether or not the links work. This has got to be some kind of outlook bug.
I am trying to create a responsive two-column row (in a table) using media-queries for an email. Using the table align method from Mailchimp, it looks great on desktop and Android. On iPhone, the media query tells the "templatecolumnContainer" to display 100% width of the screen under 480px, but it only fills 50%. The other column container, does wrap underneath the image and stretch the width of the viewport.
Here's the media query -
#media only screen and (max-width: 480px) {
.templateColumnContainer2 {
display: block !important;
width:100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
And here's the two columns -
<table align="center" border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: inline-block !important;padding-bottom: 15px;" width="750">
<tbody>
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
<tbody>
<tr>
<td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
<img class="columnImage" src="image.jpg">
</td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
<tbody>
<tr>
<td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;" valign="top">
<h3 style="color: #606060 !important; display: inline; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
<p>Some paragraph text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I'd be eternally grateful if anyone can fill in whatever coding gap I'm omitting!! Thanks in advance.
This should do what you ask:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
#media screen and (max-width: 750px) {
#templateColumns {
width: 100% !important;
}
.templateColumnContainer2 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
}
</style>
</head>
<body width="100%" style="Margin: 0;">
<center style="width: 100%;">
<table cellspacing="0" cellpadding="0" border="0" align="center" width="750" style="margin: auto;" id="templateColumns">
<tr>
<td class="templateColumnContainer2" width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
<img class="columnImage" src="image.jpg" width="100%" height="auto">
</td>
</tr>
</table>
</td>
<td class="templateColumnContainer2" width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;">
<h3 style="color: #606060 !important; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
<p>Some paragraph text</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
I'm not sure what parent HTML you have above this, but I included the <body> and <center>, and slightly rewrote the <table> markup + classes to achieve a responsive layout that stacks once the viewport dips below the <table>'s desktop width of 750px.
Hello I am using Weebly Pro and I would like to learn how to make an accordion side bar. Now it will currently open the submenus next to the menu and it makes huge mess.
this is my website:
www.exceptyebeconverted.com
I would like something more like this:
www.excatholicsforchrist.com
I need some extreme help. I have searched google and youtube for help and have not been able to understand any of it enough to help me. That is why I am here.
How could I edit this code to get the accordion effect? Do I have to change HTML as well? Does that mean I change the page layout?
<body class="wsite-theme-light short-header-page">
<div id="container">
<div id="sidebar">
{logo}
<div id="avmenu">{menu}</div>
</div>
<div id="main-wrap">
<div id="header">
<table id="header-right">
<tr>
<td>
<table>
<tr>
<td class="phone-number">{phone:text}</td>
<td class="social">{social}</td>
<td class="search">{search}</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="clear:both"></div>
</div>
<div id="banner">
<div class="wsite-header"></div>
</div>
<div id="main">
<div id="content">{content}</div>
<div id="footer">{footer}</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
/* side-nav
--------------------------------------------------------------------------------*/
#avmenu {
clear: left;
margin: 70px 0 0;
padding: 0;
}
#avmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#avmenu li {
list-style: none;
}
#avmenu li a {
font-weight: 400;
text-decoration: none;
color: #fff;
font-family: "Lato", Arial, Helvetica, sans-serif;
font-size: 15px;
display: block;
line-height: 1;
margin: 0;
padding: 10px 5px 10px 14px;
border-bottom: 1px solid #903f3f;
}
#avmenu ul > li:last-child a,
#avmenu ul > span:last-child li a {
border-bottom: none;
}
#avmenu li#active a,
#avmenu a:hover {
color: #fff;
background: #903f3f;
}
/* Navigation Drop-Down Menu Customization
--------------------------------------------------------------------------------*/
#wsite-menus .wsite-menu {
border-top: 1px solid #903f3f;
position: relative;
top: -1px;
}
#wsite-menus .wsite-menu li a {
padding: 8px;
background: #903f3f;
border: none;
border-bottom: 1px solid #bd5353;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
}
#wsite-menus .wsite-menu li a:hover {
color: #fff;
background: #723131;
}
Try following this:
https://www.youtube.com/watch?v=gLy3vaIhyKA
Also, since this is using JQuery, there are other JQuery based accordion widgets you can use, like https://jqueryui.com/accordion/ and http://www.jqueryrain.com/example/jquery-accordion/
I've done a bunch of googling, but I can't find an answer anywhere that works for me.
I'm creating a form (for the first time ever) and I need a red asterisk directly next to the placeholder text in the input boxes. Embarrassingly, this is the closest I have been able to get so far:
form {
margin: 0 auto;
background-color: #3d549a;
}
input {
font-family: avenir;
font-size: 17px;
color: #ffffff;
font-weight: 100;
border: none;
width: 400px;
padding: 15px;
border-radius: 5px;
}
textarea {
height: 5em;
resize: vertical;
font-family: avenir;
font-size: 17px;
color: #ffffff;
font-weight: 100;
border: none;
width: 860px;
padding: 15px;
border-radius: 5px;
}
.asterisk_input:after {
content: " *";
color: #e32;
position: absolute;
margin: 0px 0px 0px -20px;
font-size: 17px;
padding: 0 5px 0 0;
}
.buttonblue {
padding-left: 90px;
background-color: #31b9e9;
font-family: avenir;
font-size: 16px;
width: 300px;
height: 75px;
color: #ffffff;
padding: 0;
border: none;
border-radius: 5px;
box-shadow: 0px 5px 1px #21a1c6;
}
button {
margin-left: .5em;
}
<table width="100%" style="background-color: #3d549a" height="820px">
<tr height="250">
<td valign="bottom" align="center" width="100%" colspan="4">
<span style="font-family: avenir; font-size: 40px; color: #ffffff; font-weight: 500; line-height: 10px;">GET IN TOUCH<span/>
<hr color="#273a72" width="75" align="centre">
<span style="font-family: avenir; font-size: 15px; color: #ffffff; font-weight: 100; line-height: 10px;">1600 Pennslyvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</span>
</td>
</tr>
<tr>
<td>
<form action="/my-handling-form-page" method="post">
<p>
<input type="text" id="name" placeholder="Your Name" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" />
<span class="asterisk_input"> </span>
<input type="email" id="mail" placeholder="Your Email" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" />
<span class="asterisk_input"> </span>
</p>
<p>
<textarea id="msg" placeholder="Your Message" style="font-family: avenir; color: #fff; font-weight:100; font-size: 17px; background-color: #273a72"></textarea>
<span class="asterisk_input"> </span>
</p>
<p>
<button class="buttonblue" type="submit">SEND MESSAGE</button>
</p>
</form>
</td>
</tr>
</table>
(I'm also having trouble centreing it ;) But one problem at a time, I suppose
Unfortunately, there isn't a universal way of doing this easily, but there is a way to get support for most browsers. The reason being is that you're going to need to style a placeholder, and there isn't a universal standard on how this is done. But, as long as you don't need support for older IE browsers, you should be okay with the following approach:
First, add a class named "required" or some such to the input box itself. Then, add the following tags:
.required::-webkit-input-placeholder:after {
content: " *";
color: red;
}
.required:-moz-placeholder:after {
content: " *";
color: red;
}
.required:-ms-input-placeholder:after {
content: " *";
color: red;
}
for align centre just add
display: table;
in .form class.
I'm creating an html esignature. Despite the same styles being applied to all of the text there is still ONE line of text the the iPhone keeps enlarging. I've read that -webikit-text-size-adjust: none; should prevent this but it is not working. Here is my code for this particular table cell.
<td valign="bottom" class="tag" style="display: block; width: 280px; height: 18px; padding-right: 6px; padding-top: 2px; text-align: right;">
<a style="font-family: Arial; font-size: 11px; line-height: 20px; font-weight: 500; color:#585859; white-space: nowrap; -webkit-text-size-adjust: none;">branding <span style="color: #db1e17;">|</span> communications <span style="color: #db1e17;">|</span> interactive</a>
</td>
In my media query above specifically for iPhone my code is this:
#media screen and (max-device-width: 480px) and (max-device-height: 320px), screen and (max-device-width: 320px) and (max-device-height: 480px){
td.tag {
width: 136px !important;
height: 7px !important;
padding-top: 2px !important;
padding-right: 3px !important;
}
td.tag a{
font-size: 5px !important;
line-height: 9px !important;
-webkit-text-size-adjust: none;}
Can you see what I could be doing wrong?
I would put this outside of the media query.
div, p, a, li, td { -webkit-text-size-adjust:none; }
All you are doing at this point is telling the phone to never set the minimum font-size for all elements.