I'm needing to collapse a table and it's not working for me. I'm using inline styling in WordPress because it's just one page that will be styled like this.
<table style="border-collapse: collapse; max-width: 100%; height: auto; margin: 0 auto;">
<tbody>
<tr>
<td style="background-color: #299696; margin: 0 auto; ">
<div style="float: right !important; width: 40%; padding-left: 5%;">
<img style="float: right !important; width: 100%; height: auto; min-width: 325px;" alt="weeSpring parent panel, boy holding apple with heart-shaped bite out of it" src="http://blog.weespring.com/wp-content/uploads/2016/01/43b6e465b5d42899675508a8d0bc0b36-300x220.jpg"
/>
</div>
<div style="float: left !important; width 10%; padding: 6% 1% 0 1%;">
<img style="float: left !important; width: 100%; height: auto;" alt="" src="http://www.weespring.com/media/disclosure-arrow.png" />
</div>
<h5 style="color: #ffffff !important; padding-top: 2%;">Disclosure Statement from weeSpring</h5>
<p style="color: #ffffff !important; font-size: 14px; margin: 0 5% 0 6%; text-align: left !important; font-weight: bold; line-height: 1.4em;"><span style="font-size: 28px;">O</span>n weeSpring, members may be invited to participate in sampling campaigns where they receive complimentary products for review. When posting their reviews, members are required to abide by our disclosure terms:</p>
<p></p>
<p style="color: #ffffff !important; font-size: 14px; margin: 0 5% 0 6%; text-align: left !important; font-weight: bold; line-height: 1.4em;">The Federal Trade Commission requires testing program participants to disclose that they have received products for complimentary testing purposes in all review materials. Please note that failure to abide by these rules may result in suspension
from the weeSpring Parent Panel. Please refer to the following rules and guidelines below for more information.</p>
</td>
</tr>
<tr>
<td style="width: 100%; background-color: #000000; vertical-align: middle;">
<span style="color: #299696 !important; font-size: 1.8em; font-weight: bold;">When Writing Reviews</span>
</td>
</tr>
</tbody>
</table>
So it looks like all I had to do to solve this was add this to my table cell style and oddly, it solved it.
border: solid 0;
Related
I create a template on Sendgrid as a standard email, I tested on Gmail in different devices, it works fine, until I try Outlook, it looks like all of my css, images are gone. So what is the root cause?
Here is my html code:
<div style="font-family: 'Poppins', Helvetica, sans-serif;">
<div style="background-color: black; position: relative; padding-top: 30px; padding-bottom: 30px;">
<img src="image.png"
style="height: auto; width: 135px; position: absolute; top: 0; bottom: 0; margin: auto; padding-left: 16px;">
</div>
<div style="padding: 10px; text-align: center;">
<img src="image.png"
style="width: 40px; height: auto; margin-bottom: 16px;">
<p style="margin: 0; padding: 0; color: #00cc66; font-size: 24px; font-weight: bold;">Email Confirmation</p>
</div>
<div>
<div style="padding: 16px; color: black;">
<p>Hi -Name-,</p>
<p>Welcome.</p>
<p>Please confirm your email-address by clicking the button below.</p>
</div>
<div style="text-align: center; padding-bottom: 15px;">
<a href="-EmailConfirmUrl-" target="_blank">
<button style="border: none; cursor: pointer; background: #2840ff;
color: white; width: 200px; height: 48px; text-transform: uppercase;
font-size: 0.8rem; outline-style: none;
background-image: linear-gradient(to top right, #2840ff, #22eaff); box-shadow: 0px 1px 15px -2px lightgrey;">
Verify Email Now
</button>
</a>
</div>
<div style="text-align: center; background: #2840ff; color: white;
background-image: linear-gradient(to top right, #2840ff, #22eaff); bottom: 0; padding: 4rem 0;">
<img src="image.png"
style="height: 20px; width: 160px;">
<p style="color: #ced4da; font-weight: 300;">
Copyright © 2018. All rights reserved.
</p>
</div>
</div>
</div>
You can't use standard css3 in your emails, if it has to work in outlook.
Outlook is using the HTML rendering engine of Microsoft Word (sad, but true).
There are a lot of amazing tips and tricks on how to make email work in (all) clients.
Here are just a view links:
https://litmus.com/resources
https://mailchimp.com/resources/?_ga=2.98108630.81642254.1536052613-1816129050.1536052613
Beginner at HTML. I have created this html email that displays perfectly fine and central in thunderbird but in Apple Mail, it is stuck on the right, anyone got any ideas?
this is the email in apple mail that is aligned to the right - I want it in the centre!
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width">
<title>Fusion CSA Accept Email</title>
<style type="text/css">
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !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;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</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%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<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;">This is preheader text. Some clients will show this text as a preview.</span>
<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">
<!-- 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;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<th>
<img src="http://fusiondiscordbots.com/Email Images/icon.png" height="50px" width="100px">
<h1 style="font-family: SinkinSans 300Light; font-size: 250%;">Thanks for applying</h1>
</th>
</tr>
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px; Margin-top: 20px;">Hi [INSERT NAME],</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">We would like to thank you for your applciation to become a Fusion Customer Support Agent. After carefully reviewing your application, we have decided to <font color="green"><i><b>Accept</b></i></font> your application. We look forward to welcoming you to the team and working with you in the future.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">In the next 48 hours, we will send you some information about your role. In this information will be some terms that we require you to accept by emailing us back. Once the terms have been accepted, we will announce your new position to the server and give you your new role.</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">Well all thats left to say is... Congratulations!</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal;">With appreciation,</p>
<img src="http://fusiondiscordbots.com/Email Images/seansignature.png" height="50px">
<p style="width: 50%;">Sean Hatch<br>
Fusion Managing Director</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END CENTERED WHITE CONTAINER -->
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
I just want to be able to send this email to couple of people but I want it to look professional and line up in the centre of all email clients. If anyone could help, it would be appreciated.
Thanks in advance,
Sean.
Your email looks fine in every Apple and IOS email client I looked at in Litmus. The logo and “Thanks for Applying” are not centered in Yahoo! mail.
The biggest issue is that you're not properly formatting your height and width for the logo and the signature graphics.
Instead of this:
icon.png" height="50px" width="100px"
Do this:
icon.png" height="50" width="100"
Outlook doesn't understand height="50px" so the images are the size of the width of the email. That fix and adding a center tag to the table cell for the logo makes your email look great for your recipients.
Good luck to [INSERT NAME] on their new job.
I have successfully used style="text-align: center;" as an inline style for the <tr> elements to centre content.
I have my company name on the left and my email on the right. I have the email set up like this:
<div style="color: white; float: right; padding-right: 10px; text-align:right">
<p style="font-size: 16px;">E-mail</p>
<p style="font-size: 20px; text-decordation: none;">newtrendphotography23#gmail.com</p>
</div>
As I am unable to upload any photos, this might be hard to explain. There is a verticle gap (like the height of the company name) between the word "email" and my actual email.
Here is the entire (relevant) HTML:
HTML:
<div style="margin: 0 auto; overflow: auto;">
<div style="background: #000; height: 80px; width: 100%; overflow: hidden;">
<h1 style="font-family: Snell Roundhand, cursive; padding-left: 10px; color: white; float: left;">New Trend Photography</h1>
<div style="color: white; float: right; padding-right: 10px; text-align:right">
<p style="font-size: 16px;">E-mail</p>
<p style="font-size: 20px; text-decordation: none;">newtrendphotography23#gmail.com</p>
</div>
</div>
</div>
This gap is because of margin and padding p element.
Use :
div p {
margin: 0;
padding: 0;
}
If you want ,remove gap between email and my actual email only.
So use:
div p {
margin: 0;
padding: 0;
}
div p:first-child {
margin-top: 20px;
}
Demo
I have an image in ASP.NET, I hope I can explain this very clearly so you can give very clear answers.
My master form has the following setup:
.page
{
width: auto;
background-color: #fff;
margin: 0px auto 0px auto;
border: 1px solid #496077;
height: auto;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
}
.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;
}
I have a "contact us" page with variable information about each entry for a person on the left hand margin side of the page (name, address, contact info, etc.). I want to position an image that is just a few pixels past the most far right information given for a certain person, and I want the heightxwidth of the picture to vary based on the height of the text (if the user was to enter more lines for information for each contact person, etc.)
How can I get an image with this positioning? So far I've been able to get an image on the far right side of the screen, but this is not good, as I would like to have 2 columns of contact information for more space on the form.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<h1>Contact Information<b><img align="left" alt="pic" class="bold"
src="profilepic.jpg"
style="width: 150px; height: 150px; float: right;" vspace="0" /></b></h1>
<b><h2>adsf</h2>
adsf</b> <br />
asdf<br />
asdf</br>
asdf <br />
asdf <br />
asdf
</asp:Content>
have you ever considered using a table? You can style the rows width, text alignment, vertical alignment, and all other styles yadda yadda through using classes; or however you choose. But that will set you up with columns and rows for each person....
<table class="table">
<tr class="tableRow">
<td class="tableDataLeft">
Some Persons info Number 1
</td>
<td class="tableDataMiddle">
Person Number 1's second column of info
</td>
<td class="tableDataRight">
Person number 1's image...<img src/>
</td>
</tr>
<tr>
<tdclass="tableDataLeft">
Some Persons info Number 2
</tdclass="tableDataLeft">
<td class="tableDataMiddle">
Person Number 2's second column of info
</td>
<td class="tableDataRight">
Person number 2's image...<img src/>
</td>
</tr>
</table>
My HTML code:
<div id="divMainFirst">
<div id="divInnerFirst">
<div id="divTitleHeaderUC">
<span id="spanTitleHeaderUC">Urgent Care Wait Time</span>
</div>
<div id="divSubTitleUC">
<div id="smallText" style="padding:0 5px; position: absolute; bottom: 1%; left: 0; right: 0; color: #000000; text-align: center;">If you are experiencing a life-threatening emergency, call 911 or go to your nearest emergency room. Do not go to the urgent care center.<br>Estimated wait times are provided for general information only, may change at any time, and may not reflect your actual wait time once you arrive.</div>
</div>
</div>
<div id="divInnerNext">
<div id="divTitleHeaderFD">
<span id="spanTitleHeaderFD">Find a Doctor</span>
</div>
<div id="divSubTitleFD">
<span style="width: 100%; text-align: center;">
<table cellpadding="5">
<tr>
<td class="alignLeft">By Name [View All]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
<tr>
<td class="alignLeft">By Specialty [View All]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
<tr>
<td class="alignLeft">By Location [View All]:</td>
</tr>
<tr>
<td style="padding-left: 15px;">
<select>
<option>TEST1</option>
<option>TEST2</option>
</select>
</td>
</tr>
</table>
</span>
</div>
</div>
</div>
My CSS code:
#divMainFirst {
display: block;
margin: 0 0 0 200px;
overflow: hidden;
}
#divInnerFirst {
display: inline-block;
margin: 0 0 0 100px;
height: 270px;
padding: 0;
width: 265px;
vertical-align: top;
}
#divInnerNext {
display: inline-block;
margin: 0 0 0 50px;
height: 270px;
width: 265px;
vertical-align: top;
}
#divTitleHeaderUC {
width: 265px;
height: 40px;
background-color: #FFFFFF;
text-align: center;
box-shadow: inset 0 0 10px rgba(245, 159, 36, 0.5);
position: relative;
}
#spanTitleHeaderUC {
width: 100%;
height: 40px;
line-height: 40px;
vertical-align: middle;
background-color: #FFFFFF;
font-family: 'blackjarregular';
font-size: 18pt;
color: #F59F24;
font-weight: bold;
}
#divSubTitleUC {
width: 265px;
height: 220px;
background-color: #FFFFFF;
text-align: center;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-box-shadow: #F59F24 0px 2px 3px;
-moz-box-shadow: #F59F24 0px 2px 3px;
box-shadow: #F59F24 0px 2px 3px;
position: relative;
}
With the above HTML and CSS code, It displays the following zoomed in and by default:
But when I view it in different size screen it changes to this:
As you can see the size of the box hasn't changed and not shrunk to fit all three boxes instead it overflows on to the next section below the first two and cannot be seen.
How can I modify so boxes changes based on the zoom in/screen size?
Have a look into #media queries within your CSS.
With media queries, you can set break points to change the CSS doing things such as hiding certain elements when they're no longer required for the device they're being used on.
Have a look at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
That will give you a much more in-depth explanation behind the queries and how to use them effectively.
use percentages for everything. or #media (min-width: 768px) {}