This is how it looks everywhere except in Outlook:
In Outlook it looks like that:
Three tables are used to create the 2-column design, this is the code:
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
html { width: 100%; }
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
table td { border-collapse: collapse; }
.yshortcuts a { border-bottom: none !important; }
img { display: block !important; }
a {
text-decoration: none;
color: #e54a39;
}
/* Media Queries */
#media only screen and (max-width: 640px) {
body { width: auto !important; }
table[class="table600"] { width: 450px !important; }
table[class="table-container"] { width: 90% !important; }
table[class="container2-2"] {
width: 47% !important;
text-align: left !important;
}
table[class="full-width"] {
width: 100% !important;
text-align: center !important;
}
img[class="img-full"] {
width: 100% !important;
height: auto !important;
}
}
#media only screen and (max-width: 479px) {
body { width: auto !important; }
table[class="table600"] { width: 290px !important; }
table[class="table-container"] { width: 82% !important; }
table[class="container2-2"] {
width: 100% !important;
text-align: left !important;
}
table[class="full-width"] {
width: 100% !important;
text-align: center !important;
}
img[class="img-full"] { width: 100% !important; }
}
<!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>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Test</title>
</head>
<body marginwidth="0" marginheight="0" style="margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" offset="0" topmargin="0" leftmargin="0">
<!-- PREFOOTER -->
<table width="100%">
<tr>
<td align="center" bgcolor="orange">
<table class="table600" width="600">
<tr>
<td>
<table class="full-width" width="287" align="left">
<tr>
<td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
Why do I get this mail?
</td>
</tr>
</table>
<!-- SPACE -->
<table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
</tr>
</table>
<!-- END SPACE -->
<table class="full-width" width="287" align="right">
<tr>
<td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
Contact Us
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END PREFOOTER -->
</body>
</html>
I already figured that the problem is caused by:
<!-- SPACE -->
<table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
</tr>
</table>
<!-- END SPACE -->
But I don't understand why. How can I replace the spacer to make it work in Outlook but keep the space?
To answer your follow-up about the spacing. Just use padding on the td, padding is well supported and will work fine.
<table class="table600" width="600">
<tr>
<td style="padding-bottom: 30px;">
You can then also adjust that padding with a class in the media query.
Also a side note: You don't need to use attribute css selectors for css anymore. It was an old bug that's been fixed now. So you're free to use standard .class selectors.
Related
so I started doing HTML email template with using the table form or the tr>td codes and stuff, my template mostly combine with small text and mostly graphic my main concern is that when I test my email template in my pc It jus work fine also. the images and graphic ay pretty responsive but when I test it on my mobile the image is not even loading even the place holders for it does bother to load I really confuse
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application Accepted </title>
<head>
<style type="text/css">
#import url('https://fonts.googleapis.com/css2?family=Manrope:wght#200&display=swap');
.body{
margin: 0px;
background-color: #ffffff;
font-family:'Manrope', sans-serif;
}
.table{
border-spacing: 0;
}
.td{
padding: 0;
}
.img{
border: 0;
}
.wrapper{
width: 100%;
table-layout: fixed;
background-color: #ffffff;
padding-bottom: 40px;
}
.main{
background-color: #ffffff;
margin: 0 auto;
width: 100%;
max-width: 600px;
border-spacing: 0;
font-family:'Manrope',sans-serif;
color: #FDB833;
}
.Logo{
padding: 10px;
text-align: left;
}
.content{
padding: 0px;
text-align: center;
line-height: 0;
}
.logo{
text-align: right;
}
#media screen and (max-width: 600px){
.content .img{
width: 600px!important;
max-width: 600px!important;
}
.Logo .img{
width: 400px!important;
max-width: 400px!important;
}
}
</style>
</head>
<body>
<center class="wrapper">
<table class="main" width= 100%>
<!--header-->
<tr>
<td>
<table width="100%">
<tr>
<td class="Logo">
<img src="https://lh3.googleusercontent.com/dydWcJy6wrBvml0hAPEw12f9CiHgEEf9MN0vFDkrEPx7i0bzCpdq4_WqDhC9mGCeMv3CsWnq2BH1jgaDXsEhCd9DWaRMu1LBPJCCCWsnt9NrRyucZf5qeJz1wOMUsNjZ2rl4CITbE4GXf1_FudMM473BriHc_gILDFmQ4qdD0rUeJkfDVdXFns0bJUA0HqPFh9nyWoNbSe5g5SHTulxEYCemom23K-5_ld1zMvX_AkZwC-brRTN4gTAHk_eWAi6wbdXzVujAhc6_IrYByYd3HMqhD8WJBe8qi9FsR95AlX1ncMVvzXwEmd4Ozz_KvSxf2BXi8tWTZJc6pUEhkVTlCOHrqgiVP13HzYOEhUol1_3X3fJUD6IxTcKzI5kGBA4byp_47cQWqnSRVx_9t5QH3dVEzJjsorPEH19JhQ54NSdhoQg3KkHsJzS0lJTLIfDdP8EQv90kGWKh8Up7B4XLn0z0Hycp_WciuaEupO_ykCDFrPhRNk74vjWyo8mMhxzkQEvRf2Jvvmn8-yzp8B_AB9J4SmbnUXehwabt13SSgK8QN70cYzpjij3HX7ABng0kXiyVH_pGlcXruVNokaisVr4lpCHGUgsTuTLC83A9iEsoNPuViaYJPQm_Rs-tvYS2jJy-ejXCd8W5FynfxibIL9CXynSzqEWQKlGBtc2LHDfcHowtXMuEVddGUCJ9lg=w400-h113-no?authuser=0"
alt="" width="200px">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width=100% height= 20px style="background-color: #007F5F;"></td>
</tr>
<!--content-->
<tr>
<td class="content">
<img src="https://lh3.googleusercontent.com/mU8vN1xEsyHYAbV7IZZEbvpxRijXbTf7B2OlX_0kKDKTIWDeREXmRymFksPekBaVkX-fZ9MwYlGTH4roD9K0qzu8LHpyfOJwJ54fZO9m6O6Cl4jn1ErWRNqEcRMXNr3LescX20M-lTDsiiMrjik5fiPKoKPiy-WxsEDP3r3VtQllkE4ISTjwSrTSYbDBawi2Hx-2VAJSL34CZwDAeIICqcQSxJPD5JCE1FEejrGCdQPzrYr7tUpUyfygTn5_5SOoNHvCbnZW3GsnMzQ4nSqWyFTZF1qrmN1tlVlAbL6lVSsF_V9QY5xRqhaxjtyky6kBNxAXBjU6QX4WlpFD-8Dj2hMDM9X9ckzMuZWuju5C_bKni1bw1OpsYKyO0lyiNamABd5l8rrkRVFK7Z_5gz3KJJYsBqcSn97hmhxjkgQjt0HJwfEIbd_H5bKGcl3GikiCNOsNY5sb_L7c6mx65y_vlKln4DJ25jk927_t6VM0aCZUMah1KrbcQdqUvopeDD0vp008cnREa15_17waa3_hZD1yJwzmFEmtmOq_Z7UItGr5rWIvPCZfQFznX-k6znGJ7xr7i-MGZihGplciBV-5rn6ncMjXzEkd-JQvQbOcM8HbJFZOiLNDYaJPPJYWV4hgNJi9ueuCjPmoVXLsdS7PfqcxhT4Kqse6SviuXwktYziddS_quS_EjrJexDrImg=w495-h695-no?authuser=0"
alt="" width= auto style="max-width: 600px;">
</td>
</tr>
<!--footer-->
<tr>
<td class="footer" style="background-color: #007F5F; padding: 15px;">
<p style="text-align: left;font-size: 15px; font-weight: bold;">Courtesy:</p>
<p style="text-align: left;font-size: 10px;"> Approved by the St.Jerome School Administration and Club Committee<br>
Valid only for Academic year 2020-2021</p>
</td>
</tr>
</table>
</center>
</body>
this my code for it I also the check the sizing if that the case yet it seems it's not, I am really new in coding and this is not even my forte.
Email newsletter looks good, other than they want the spacing between the columns to be gone so the left block touches the right block. I have the spacing to 0 but its still separate columns left to right. They want to keep the three rows separate but not the left to right. Any way to achieve this?
any spacing I've changed only affects the up and down between elements, not left and right.
td {
font-family: Lato, Arial, Helvetica, sans-serif !important;
}
#applecenter {
margin:auto;
max-width:690px;
}
table, td {
border-collapse: collapse;
}
a {
color:#0D47A1;
text-decoration:none;
}
a:visited {
text-decoration:none;
}
hr {
display:none;
visibility:hidden;
}
#media screen and (max-width: 693px) {
#background {
padding:0 !important;
}
table, td {
width:auto !important;
}
ul {
margin:19px 0 19px 10px !important;
}
#hero img, #narrow, #preheader {
width:95% !important;
}
#applecenter {
padding:10px 0;
}
#col1 {
float:left !important;
padding:20px !important;
}
#col2 {
float:left !important;
padding:0 0 10px !important;
text-align:center !important;
}
#col2 div {
display:inline-block;
padding:0 10px;
}
#col2 table {
width:200px !important;
}
#cta {
width:90% !important;
}
.goaway {
display:none;
}
.stack {
display:block;
}
.hero {
margin: 10px 0 0;
}
}
<!doctype html>
<html 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, initial-scale=1.0">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!--<![endif]-->
<title>
Blueberry Template
</title>
<!--[if mso]>
<style>
#cta td {padding:20px;}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="background:#E0E0E0; margin:0; font-family:Lato, Arial, Helvetica, sans-serif; font-size:16px; color:#212121;mso-line-height-rule:exactly;">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr>
<td id="background" style="padding:20px; background:#E0E0E0;">
<div id="applecenter">
<table id="preheader" cellpadding="0" cellspacing="0" border="0" align="center" style="width:650px; margin:auto;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-bottom:5px;">Use this area as a secondary subject line.</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center" style="width:690px; margin:auto;">
<tr>
<td id="hero" style="text-align:center; padding:0 0 10px;"><img style="width:650px; display:block; border:0; margin:auto;" src="http://emissourian.com/app/images/MedShoppe-Hero.jpg"></td>
</tr>
<tr>
<td style="padding:0 10px 10px;"><table cellpadding="0" cellspacing="0" border="0" align="center" style="width:650px;">
<tr>
<td valign="middle" class="stack" style="padding:10px; background:#2196F3;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" style="line-height:125%; font-size:16px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; padding:10px; text-align:center;"><h1 style="margin:0; font-size:24px; line-height:100%;">- The myth of Diabetes - <br>How to get the genie back in the bottle <br><br>With 1 in 3 being <br>diabetic or pre-diabetic <br> let’s turn diabetes around together! </h1>
<p style="margin:0; text-align:center;"><br>
</p>
<a style="color:#ffffff;" href="tel:1-636-629-2022"><strong>Call To RSVP 636-629-2022</strong></a></td>
</tr>
</table></td>
<td class="goaway" style="width:10px; text-align:center;"> </td>
<td valign="top" class="stack hero" style="width:300px; text-align:center; background:#BBDEFB; padding:10px; vertical-align:top;"><img src="http://emissourian.com/app/images/MedShoppe-Body1.jpeg" alt="" style="width:100%; display:inline; border:0;">
<p style="margin:5px 0;"></p></td>
</tr>
</table></td>
Remove this unused 5th last line
<td class="goaway" style="width:10px; text-align:center;"> </td>
I can't seem to get media queries to work - at least for the one relevant style which needs to work - padding for the table-wrapper class. The padding set inline always wins.
I believe I need to have !important set for the media query so I do have that.
Media queries are at the top of the html
This is at the top of the html - <meta name="viewport" content="width=device-width">
The rest of the styles are inline / done by an app.
Anyone know what I might be missing?
https://codepen.io/lg00/pen/LvrXVY
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title></title>
<style>
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.header-title h1 {
font-size: 25px !important;
}
}
</style>
<div class="email-wrapper" style="background-color:#F5F6F7">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<!-- PADDING SET HERE -->
<table cellpadding="0" cellspacing="0" class="table-wrapper" style="margin:auto; margin-top:50px; background-color:#fff; padding:64px 100px">
<tbody>
<tr>
<td class="container header" style="background-repeat:no-repeat; border-top-left-radius:6px; border-top-right-radius:6px; text-align:center; color:#000; padding-bottom:32px; display:block !important; margin:0 auto !important; clear:both !important">
<div class="header-title" style="font-weight:bold">Test</div>
</td>
</tr>
<tr>
<td class="content" style="border-bottom-left-radius:6px; border-bottom-right-radius:6px; margin:0 auto !important; clear:both !important">
<div class="header-title" style="color:#000; text-align:center">
<h1 style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom:15px; color:#47505E; margin:0px 0 10px; line-height:1.2; font-weight:200; line-height:45px; font-weight:bold; margin-bottom:30px; font-size:28px; line-height:40px; margin-bottom:32px; font-weight:400; color:#000; padding-top:0px">Test The Length of the Title - Will it Wrap</h1>
</div>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="text-center" style="text-align:center">
Test
</td>
</tr>
</tbody>
</table>
<table class="data-table bordered" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px; border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<tbody>
<tr>
<td class="data-table-title" style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; font-weight:bold; font-size:20px; padding-top:0px">Test</td>
</tr>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
</tr>
<tr class="bordered" style="border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">test</td>
</tr>
</tbody>
</table>
<table class="data-table" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px">
<tbody>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test</span><br>
test<br>
</p>
</td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; width: 20%"></td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test2</span><br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="width:100%; text-align:center; clear:both !important">
<p class="text-center" style="text-align:center; font-size:12px; color:#666">Test</p>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</div>
It is a specificity issue in your media queries. Move .header-title above .table-wrapper since the padding is overriding what is being set in .table-wrapper
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
Change your css to this, I hope it will work.
<style>
//Default styling
.table-wrapper {
width: 50%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
.header {
border-radius: 0px;
}
.header-title {
padding-left: 20px;
padding-right: 20px;
}
.header-title h1 {
font-size: 25px;
}
}
</style>
Please check the CSS specificity, as you said the in-line style is the most specific selector and "wins".
CSS specificity:
Inline Style
ID, Class
Pseudo-class, atributes
Elements, pseudo-element
I am having issues with my CSS for my current design. I have everything pretty much completed. However, in the final product, I am noticing that the "View Participation Button" is not aligned with other "View Participation Buttons." They seem up and down. The should all be aligned. I adjusted the surrounding table/box so that they are aligned by fixing the height to 150px. Can anyone see the error in my code and point out how this one part can be fixed? I have a picture below on what it looks like:
<style type="text/css">
/*<![CDATA[*/
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
.em_black a {
text-decoration: none;
color: #000000;
}
.em_white a {
text-decoration: none;
color: #ffffff;
}
.em_blue a {
text-decoration: none;
color: #0a75b1;
}
.em_grey a {
text-decoration: none;
color: #4d4d4d;
}
.em_g_img + div {
display: none;
}
#media only screen and (min-width: 481px) and (max-width: 667px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_wrapper2 {
width: 100% !important;
height: 150px !important
}
.em_hide {
display: none !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_side10 {
width: 10px !important;
}
.em_ptop {
padding-top: 20px !important;
}
/* Padding Left Right Bottom */
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_w300 {
width: 320px !important;
}
.em_w280 {
width: 320px !important;
}
.em_font_18 {
font-size: 27px !important;
line-height: 31px !important;
}
}
#media screen and (max-width: 480px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_wrapper2 {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_side10 {
width: 10px !important;
}
.em_side_10 {
width: 10px !important;
}
.em_ptop {
padding-top: 20px !important;
}
/* Padding Left Right Bottom */
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_font_18 {
font-size: 18px !important;
line-height: 23px !important;
}
.em_w300 {
width: 300px !important;
}
/* update the N number as per width */
.em_w280 {
width: 300px !important;
}
.em_w146 {
width: 146px !important;
}
.em_aside25 {
padding: 0px 25px !important;
}
u + .em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important;
}
}
A sample of my code is below:
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" class="em_ptop">
<table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tbody>
<tr>
<td align="center" valign="top">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#9E9F9F" style="background-color:#9e9f9f; color:#fff;">
Feature Presenter 3
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table>
</td>
</tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;">
<img src="./TREATMENT OPTIONS FOR ADVANCED BREAST CANCER_files/oshughnessy-joyce-800.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4D4D4D" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;height:150px" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px;">
<span style="font-weight:bold;">Joyce O’Shaughnessy</span><br>
Baylor University Medical Center
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#007F3D" style="border-radius:5px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold;">
<a target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3" style="text-decoration:none; color:#ffffff; display:block; line-height:16px;">View
Participation<br>
Options
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
I can add the CSS styling too if needed but I think the inline CSS that I have is what needs to be adjusted/modifyed/added.
I've started by completely throwing out your table based layout, this simplifies the HTML. Then I've taken away the inline styles, which simplifies things further.
So we have a list of things, order doesn't matter so lets use an unordered list (ul).
You have many options on how to lay out the list elements, I've chose display:block for simplicity. You could also look at Flex, CSS Grid, or even CSS Tables.
To align the buttons to the bottom, I've created an element with a fixed height, set that to position:relative. I've then applied position:absolute to the button element and set the position relative to the bottom of the parent element.
.presenters {
list-style: none;
padding: 0;
}
.presenter {
display: inline-block;
margin-right: 10px;
width: 158px;
background-color: #4D4D4D;
color: #FFF;
border-radius: 0 0 5px 5px;
vertical-align: top;
overflow: hidden;
}
.presenter-imgContainer {
background-color: #FFF;
border: solid 2px #9e9f9f;
}
.presenter-img {
display: block;
width: 155px;
}
.presenter-title {
background-color: #9E9F9F;
font-size: 16px;
font-weight: 400;
text-align: center;
width: 155px;
margin: 0;
}
.presenter-content {
/*Set a sensible fixed height*/
height: 80px;
/*Give enough room in the bottom padding
For the action element
*/
padding: 8px 10px 70px;
/*We want to postion the action element
relative to this
*/
position: relative;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
line-height: 17px;
text-align: center;
}
.presenter-name {
font-weight: bold;
}
.presenter-action {
background-color: #007F3D;
display: block;
padding: 10px 5px;
text-decoration: none;
color: white;
border-radius: 5px;
/*Postion the button at the bottom*/
position: absolute;
bottom: 10px;
width: calc(100% - 30px);
}
<ul class="presenters">
<li class="presenter">
<div class="presenter-imgContainer">
<h2 class="presenter-title">Feature Presenter 2</h2>
<img class="presenter-img" src="https://www.fillmurray.com/154/189" />
</div>
<div class="presenter-content">
<div class="presenter-name">Dennis Salmon</div>
<div class="presenter-desc">UCLA Medical Center</div>
<a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
</div>
</li>
<li class="presenter">
<div class="presenter-imgContainer">
<h2 class="presenter-title">Feature Presenter 3</h2>
<img class="presenter-img" src="https://www.fillmurray.com/154/189" />
</div>
<div class="presenter-content">
<div class="presenter-name">Joyce O’Shaughnessy</div>
<div class="presenter-desc">Baylor University Medical Center</div>
<a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
</div>
</li>
</ul>
The blue table data entry won't reside its width. Is there a new html5 way to be able to achieve this feat? The row should be the same width as the photo above it.
<div class="template" style="text-align:center">
<table width="100%" and height="100%" BORDER=0 CELLSPACING=0 CELLPADDING=0 align="center">
<tr>
<td width='100%' height='100%' bgcolor='#f2f3f4'>
<div style="text-align: center;">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</div>
</td>
</tr>
<!-- Background photo -->
<TABLE width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center">
<TR>
<TD WIDTH="997" HEIGHT="326"
background="https://image.ibb.co/dO1HfQ/dog3edit.jpg" style="background-
image:url(https://image.ibb.co/dO1HfQ/dog3edit.jpg); background-repeat:
no-repeat;">
<!-- <b>WELCOME TO ROVER! </b> -->
<FONT class="titletext" color="white" align="center" style="width: 800px;
font-size: 50px;"><b>WELCOME TO ROVER!</b></FONT><br><br>
<FONT class="subtitletext" color="white" align="center" style="width:
100px;
font-size: 30px;">Ready to get started?</FONT><br><br><br>
<a href="#"><img src="https://image.ibb.co/nvbiLQ/button.png"
alt="Button" border="0"></a>
</TD>
</TR>
<tr>
<td width="80%" bgcolor="#blue" style="width:80%">
</td>
</tr>
</TABLE>
</table>
</div>
article {
width: 100%;
}
#banner {
background: url("https://image.ibb.co/dO1HfQ/dog3edit.jpg") no-repeat no-repeat;
padding: 25px 0;
}
h1 {
font-size: 50px;
margin-bottom: 0;
}
h1, p {
color: white;
width: 100%;
text-align: center;
}
p {
font-size: 30px;
}
button {
width: 200px;
background: #00c55c;
border: none;
padding: 12px 24px;
color: white;
font-size: 24px;
border-radius: 6px;
display: block;
margin: 0 auto;
clear: both;
}
#logo {
background: #f2f3f4;
}
#logo img {
display: block;
margin: 0 auto;
clear: both;
}
<article>
<section id="logo">
<img src ="https://image.ibb.co/i4ykZk/roverlogo.png" alt="RoverLogo">
</section>
<section id="banner">
<h1>Welcome to Rover!</h1>
<p>Ready to get started?</p>
<button>Search Sitters</button>
</section>
</article>
I'd do something like this. No table for layout. If it has to be inline, just put a <style></style> tag above the HTML block.
For the background color of the button i used the following website.
https://flatuicolors.com/
I also made everything separated into css and html so you could see. No inline CSS. This is the proper way to use tables, and headers.
Use a <div> tag for the headers as it automatically pushes things to a new line after it. No need for the break tag. The break tag is rarely used in design anymore.
Also i made sure that your separator line is blue.
I believe there are better ways of accomplishing this WITHOUT tables, however you said you needed this in table form, so here ya go!
table {
width: 80%;
border: none;
text-align: center;
margin: 0 auto;
color: white;
}
.background {
background: url('https://image.ibb.co/dO1HfQ/dog3edit.jpg');
}
.titletext {
font-size: 50px;
}
.subtitletext {
font-size: 30px;
}
button {
margin: 10px 0;
width: 50%;
border-radius: 15px;
height: 100px;
background: #27ae60;
border: 1px solid rgba(255,255,255,0.8);
font-size: 20px;
color: white;
}
button:hover {
background-color: #2ecc71;
}
.seperator {
width: 80%;
background: blue;
}
<TABLE>
<TR class="background">
<TD>
<div class="titletext">WELCOME TO ROVER!</div>
<div class="subtitletext">Ready to get started?</div>
<button>Search Sitters</button>
</TD>
</TR>
<tr>
<td class="seperator""></td>
</tr>
</TABLE>
You are using inline css,Try this:
<TABLE style="width="80%" BORDER="0" cellpadding="0" CELLSPACING="0" align="center"";>