I am working on responsive newsletter using HTML, inline css as much as possible and some css also.
I am facing issue in design as i am not able to remove space between first Image and second table after image..
https://codepen.io/KGuide/full/oNXwyEW
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #fff;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
/* -ms-interpolation-mode:bicubic; */
}
a {
text-decoration: none;
}
.primary{
background: #f5564e;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #fafafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
/*BUTTON*/
.btn{
padding: 5px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 5px;
background: #f5564e;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 5px;
background: transparent;
border: 1px solid #fff;
color: #fff;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Nunito Sans', sans-serif;
color: #000000;
margin-top: 0;
}
body{
font-family: 'Nunito Sans', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #f5564e;
}
table{
}
/*LOGO*/
.logo h1{
margin: 0;
}
.logo h1 a{
color: #000;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Nunito Sans', sans-serif;
}
.navigation{
padding: 0;
}
.navigation li{
list-style: none;
display: inline-block;;
margin-left: 5px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.navigation li a{
color: rgba(0,0,0,.6);
}
/*HERO*/
.hero{
position: relative;
z-index: 0;
}
.hero .overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
background: #000000;
z-index: -1;
opacity: .3;
}
.hero .icon{
}
.hero .icon a{
display: block;
width: 60px;
margin: 0 auto;
}
.hero .text{
color: rgba(255,255,255,.8);
padding: 0 4em;
}
.hero .text h2{
color: #ffffff;
font-size: 40px;
margin-bottom: 0;
line-height: 1.2;
font-weight: 900;
}
/*HEADING SECTION*/
.heading-section{
}
.heading-section h2{
color: #000000;
font-size: 24px;
margin-top: 0;
line-height: 1.4;
font-weight: 700;
}
.heading-section .subheading{
margin-bottom: 20px !important;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0,0,0,.4);
position: relative;
}
.heading-section .subheading::after{
position: absolute;
left: 0;
right: 0;
bottom: -10px;
content: '';
width: 100%;
height: 2px;
background: #f5564e;
margin: 0 auto;
}
.heading-section-white{
color: rgba(255,255,255,.8);
}
.heading-section-white h2{
font-family:
line-height: 1;
padding-bottom: 0;
}
.heading-section-white h2{
color: #ffffff;
}
.heading-section-white .subheading{
margin-bottom: 0;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.4);
}
.icon{
text-align: center;
}
.icon img{
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
</head>
<style>
</style>
<body>
<table style="width:100%; text-align:center;">
<tr>
<td style="width:100%; text-align:center; border-spacing: 0px;" >
<table align="center" style="width:100%; max-width:600px;">
<tr>
<td ><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
</tr>
<tr>
<td class="">
<table style="width:100%; background:#525252; max-width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> Move-in now to your dream home in City Center Plaza
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> BUTTON </td>
</tr>
<tr>
<td style="padding:15px; background:#0A0A0A;">TEXT TEXT TEXT TEXT TEXT</td>
</tr>
<tr>
<td><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="padding:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Replace your code with this and see if this works:
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; border-collapse: collapse;">
<tr>
<td>
<img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="margin: 0; border: 0; padding: 0; display: block; width:100%; max-width: 600px;">
</td>
</tr>
Edit:
Here is 2 tutorials they helped me while creating HTML emails:
Build an HTML Email Template From Scratch
How to Code a Responsive Email from Scratch
As pointed out by the other user, some of that space is coming from the the font size.
What I recommend is using either:
line-height: 0;
or
font-size: 0;
To remove that, and then put all text inside spans to put the size back up.
You also need to remove the padding from your cells,
tr, td {
padding: 0;
}
Complete changes required:
tr, td {
padding: 0;
line-height: 0;
}
span {
line-height: 1;
}
Plus wrap all text in spans.
use "font-size: 0;"
and I think solve your problem
Example:-
<td style="font-size: 0;"><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
Related
I am trying to create a certificate in an html email. I cannot get the border to extend to the right alignment. Below is my code and an image of it. I know that html in outlook doesnt behave the same way but I do want instructor and manager on the same line inside the border. Float doesnt work and I could not get the margins to work.
CSS Code
<pre>
<style>
.cert {
border: 15px solid #0072c6;
border-right: 15px solid #0894fb;
border-left: 15px solid #0894fb;
width: 700px;
font-family: arial;
color: #383737;
overflow: visible;
}
.crt_title {
margin-top: 30px;
font-family: "Satisfy", cursive;
font-size: 40px;
letter-spacing: 1px;
color: #0060a9;
}
.crt_logo img {
width: 130px;
height: auto;
margin: auto;
padding: 30px;
}
.colorGreen {
color: #27ae60;
}
.crt_user {
display: inline-block;
width: 20%;
padding: 5px 25px;
margin-bottom: 0px;
padding-bottom: 0px;
font-family: "Satisfy", cursive;
font-size: 40px;
border-bottom: 1px dashed #cecece;
}
.signature{
font-family: 'Brush Script MT', cursive;
font-size: 40px;
letter-spacing: 3px;
text-decoration: underline;
}
.normal{
font-family: 'Arial';
font-size: 40px;
letter-spacing: 3px;
}
.afterName {
font-weight: 100;
color: #383737;
}
.colorGrey {
color: grey;
}
.certSign {
width: 200px;
}
#media (max-width: 700px) {
.cert {
width: 100%;
}
.tableClass {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 20px 0px !important;
}
</style>
</pre>
HTML Code
<table al[![enter image description here][1]][1]ign="center" width="600" border="0" cellpadding="0" cellspacing="0" class="cert">
<tr>
<td width="70%" align="center" class="crt_logo">
<img src="logo path"width="200" height="121" alt="logo">
</td>
</tr>
<tr>
<td width="70%" align="center">
<h1 class="crt_title">Certificate Of Completion
<h2>This Certificate is awarded to</h2>
<h1 class="colorGreen crt_user">Name</h1>
<h3 class="afterName">For completion in Class
</h3>
<h3>Awarded on Date taken</h3></td>
</tr>
<tr>
<td align="left" valign ="middle" style="font-family: 'Brush Script MT', cursive;
font-size:30px; text-decoration: underline;display:inline:">Instructor </td>
<td width="10px" align="left" valign ="middle" style="font-family: 'Brush Script MT',
cursive; font-size:30px; text-decoration: underline;display:inline:">Manager</td>
</td>
</td>
</tr>
</table>
I'm trying to make responsive email in HTML but i need to put very long table in table, which is a structure. It's not problem to make table responsive with overflow-x: auto, but it's difficult (for me) to make responsive table in table.
Here's codepen: https://codepen.io/Aventadorrre/pen/NWPeWdd
When you remove whole div table-wrapper then it works perfectly with small devices. When i have this table in table it's only scalling.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Transactional Email</title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
/*All the styling goes here*/
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
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-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%; }
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
margin: 0 auto !important;
/* makes it centered */
max-width: 991px;
padding: 10px;
width: 991px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
margin: 0 auto;
max-width: 991px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.locals {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
.locals td {
text-align: center;
padding: 8px;
}
.locals th {
text-align: center;
padding: 8px;
}
.table-title {
margin-top: 35px;
}
.table-wrapper {
margin-bottom: 30px;
}
.about-wrapper p {
margin-bottom: 15px;
}
.main {
background: #ffffff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.content-block {
padding-bottom: 10px;
padding-top: 10px;
}
.footer {
clear: both;
margin-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%; }
.btn > tbody > tr > td {
padding-bottom: 15px; }
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 768px) {
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;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.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="">
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p>Szanowni Państwo,</p>
<p>Dziękuję serdecznie za zainteresowanie inwestycją Rezydencja Gubałówka. <br><br>W odpowiedzi na zapytanie, załączam kilka informacji dotyczących inwestycji.</p>
<p>Nasza oferta to:</p>
<ul>
<li>Rentowność do 7% w skali roku od wartości zainwestowanej kwoty</li>
<li>W cenie apartamentu wykończenie pod klucz w bardzo wysokim standardzie</li>
<li>Do 2 tygodni pobytu właścicielskiego w roku</li>
<li>200 m od górnej stacji Polany Szymoszkowej </li>
<li>Umowa najmu na 10 lat</li>
<li>Pierwsza wpłata 20% kolejne wraz z realizacją inwestycji</li>
<li>Planowany termin oddania II kwartał 2022 r.</li>
<li>Możliwość rozliczenia podatku VAT (w tym celu zalecamy kontakt z właściwym Urzędem Skarbowym).</li>
</ul>
<p class="table-title"><strong>Poniżej znajduje się przykładowa oferta lokali od 12 do 39 m.kw.</strong></p>
<div class="table-wrapper" style="overflow-x: auto;">
<table class="locals">
<tr>
<th>Budynek</th>
<th>Kondygnacja</th>
<th>Nr lokalu</th>
<th>Powierzchnia po podłodze [m²]</th>
<th>Pokój [m²]</th>
<th>Łazienka [m²]</th>
<th>Balkon [m²]</th>
<th>Antresola [m²]</th>
<th>Cena m² netto</th>
<th>Cena netto</th>
</tr>
<tr>
<td class="align-center">5</td>
<td class="align-center">-1</td>
<td class="align-center">5A-07</td>
<td class="align-center">12,63</td>
<td class="align-center">10,43</td>
<td class="align-center">2,20</td>
<td class="align-center">-</td>
<td class="align-center">-</td>
<td class="align-center">21 900 zł</td>
<td class="align-center">276 597 zł</td>
</tr>
<tr>
<td class="align-center">5</td>
<td class="align-center">-1</td>
<td class="align-center">5A-07</td>
<td class="align-center">12,63</td>
<td class="align-center">10,43</td>
<td class="align-center">2,20</td>
<td class="align-center">-</td>
<td class="align-center">-</td>
<td class="align-center">21 900 zł</td>
<td class="align-center">276 597 zł</td>
</tr>
</table>
</div>
<div class="about-wrapper">
<p>Do każdego lokalu istnieje możliwość zakupu miejsca postojowego w garażu podziemnym w cenie 50.000 zł netto. Kwota ta zalicza się do kwoty zainwestowanej od której naliczany jest czynsz.</p>
<p>Rezydencja Gubałówka to unikalny na skalę polską obiekt położony w Kościelisku na szczycie góry Gubałówka. Dzięki swojej unikalnej lokalizacji, Rezydencja Gubałówka zyskała szerokie grono klientów ceniących Zakopane za shopping i życie nocne (10 min. od Krupówek), wspaniałą naturę (Rezydencję otaczają łąki i lasy) oraz luksus (w obiekcie znajdą Państwo basen, spa, nagradzaną restaurację oraz bardzo wysoki standard wykończenia). Zapierające wdech w piersiach widoki powodują, że Rezydencję odwiedza coraz więcej turystów ceniących piękno natury i aktywną turystykę bez kompromisu.</p>
<p>Obiekt funkcjonuje od 2017 roku o stale rosnącej popularności (<strong>średnia ocena na domain.com to 9,2</strong>). </p>
<p>Zapraszam do odwiedzenia strony naszego obiektu www.domain.com/, <br> oraz strony naszej inwestycji domain.com</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
<span class="apple-link">Dział Sprzedaży Rezydencja Gubałówka</span>
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
There are three general ways of tackling responsive tables in HTML emails. Overflow-x will not work across all email clients, so it's not a solution.
Hybrid Column Approach
What you have is:
[head1] [head2] [head3]
[data1] [data2] [data3]
[data4] [data5] [data6]
But what you'll need for mobile responsiveness is a vertical table:
[head1] [data1]
[head2] [data2]
[head3] [data3]
With the second row as another table:
[head1] [data4]
[head2] [data5]
[head3] [data6]
By using the hybrid email approach and hiding the repeated headers by default (for desktop), we can achieve this.
See full write-up with code example for 4 columns here: https://medium.com/#nathankeenmelb/bulletproof-responsive-datatables-in-html-emails-64248b9e18f5
Table as image
You can save the entire table as an image; that way you enable zooming and scrolling for all email clients.
However, it comes with a large drawback in that the data is inaccessible, and requires extensive interaction by the user to read (zooming, constant moving left/right & up/down).
Cards
Does it have to be done as a table? It may be a better approach to group data into a 'card', allowing you to use multiple lines (plus it reads a whole lot better!).
See my write-up here: https://medium.com/#nathankeenmelb/responsive-datatables-through-card-ui-design-for-email-aca6f3c395a2
I am creating an html calendar(cal.ics) invite and it works in email clients like Gmail, Firefox, and YahooMail. But when I try it in thunderbird, the paragraph(p) tags are always off to the right, even though I've explicity set attributes like align left, float: none, etc. Am I doing something wrong? The email is below, is there something missing in my css?
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Follow-Up! Meeting</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 2.0em;
margin: 0;
padding: 0;
text-align: left;
}
img {
max-width: 600px;
width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
height: 100%;
-webkit-text-size-adjust: none;
width: 100% !important;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
margin-bottom: 10px;
width: auto !important;
}
.btn-primary td {
background-color: #348eda;
border-radius: 25px;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
text-align: center;
vertical-align: top;
}
.btn-primary td a {
background-color: #348eda;
border: solid 1px #348eda;
border-radius: 25px;
border-width: 10px 20px;
display: inline-block;
color: #ffffff;
cursor: pointer;
font-weight: bold;
line-height: 2;
text-decoration: none;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
padding: 20px;
width: 100%;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
clear: both !important;
width: 100%;
}
.footer-wrap .container p {
color: #666666;
font-size: 12px;
}
table.footer-wrap a {
color: #999999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
color: #111111;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
line-height: 1.2em;
margin: 40px 0 10px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 0;
margin-bottom: 10px;
float: none;
text-align: left;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
clear: both !important;
display: block !important;
Margin: 0 auto !important;
max-width: 600px !important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
display: block;
margin: 0 auto;
max-width: 600px;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table width="100%" class="body-wrap" bgcolor="#f6f6f6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF"><!-- content -->
<div class="content">
<table width="100%" style="width: 100%; text-align: left;" cellpadding="0" cellspacing="0" border="0">
<tr style="width: 100%; text-align: left;" >
<td align="left" style="width: 100%; text-align: left;" >
Hi John Doe,
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
<h4>Topic</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >A Samle Meeting!</p>
<h4>Summmary</h4>
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0; text-align:left;" >
A sample meeting to prove the concept work andthen take it form there
</p>
<h4>Location</h4>
<p>
123 Example Street New york, NY
</p>
<h4>Time</h4>
<p>
From: February 7, 2016, 2:28 am GMT-0500 <br />
To: February 9, 2016, 3:50 pm GMT-0500
</p>
<h4>Next Steps</h4>
<p>
You may view more information on the meeting by clicking the link below
</p><!-- button -->
<table class="btn-primary" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>View Meeting</td>
</tr>
</table><!-- /button -->
<p>
Please adjust your meeting schedule infomration there.
</p>
<p>
Thanks,
</p>
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /body -->
<!-- footer -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container"><!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
</td>
</tr>
</table>
</div><!-- /content --></td>
<td></td>
</tr>
</table>
<!-- /footer -->
</body>
</html>
Tested your email in latest Thunderbird and paragraphs seem to be where they should be.
You may be however referring to the 20px padding set on the "container" with white background. Removing the padding will make the text stick to the left side of white space.
Since both Gmail and Yahoo ignore CSS in HEAD you do not see the padding there.
Personally I would advice against removing the padding for esthetic reason.
Preview in Thunderbird 38.5.1 (Windows)
The problem quite stupid actually. Apparently the spaces in the html were causing the problem.So I changed
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">
You have been invited to attend a meeting.
</p>
To
<p style="text-align: left; margin: 0px; padding: 0px; float: none; display: block;">You have been invited to attend a meeting</p>
With no space and problem fixed
I'm adding a new 'News Container' to a slightly older webpage at our firm.
This container is made up of a 2x3 table. I want the Cell 2x2 to be as High as the Text.
Here's the Problem:
Everybody uses IE in our offices (Security reasons etc.) but for some reason IE ignores the height attribute given either directly in HTML (style="height:;" or height="") or in a separate CSS.
So in Chrome it looks like this (how it should):
╔════════════════╗
╠══╦═════════════╣
║ ║Test String ║
║ ╠═════════════╣
╚══╩═════════════╝
And in Internet Explorer like this:
╔════════════════╗
╠══╦═════════════╣
║ ║Test String ║
║ ║ ║
║ ╠═════════════╣
╚══╩═════════════╝
Picture: http://imgur.com/a/jQXhQ
View it yourself (Open in both Chrome and IE) here.
How can I get IE to use the Height attribute or alternatively is there a different way?
IE Version: 11.0.9600.17358
Update: 11.0.13
Code:
<table id="NewsTable">
<tr>
<th id="NewsHeader" colspan="2">IT Status</th>
</tr>
<tr>
<td rowspan="2">
<img id="NewsAmpel" alt="NewsStatus" src="Ampel/AmpelA.jpg" width="36px" height="100px">
</td>
<td id="NewsStatus"><b>Status: </b>Test String</td>
</tr>
<tr>
<td id="NewsDesc"><b>Description: </b>Sample Text</td>
</tr>
i have made some changes in html as well as CSS
Working Fiddle
http://jsfiddle.net/UzCRc/60/
HTML
<table id="NewsTable">
<tr>
<th id="NewsHeader" colspan="2">IT Status</th>
</tr>
<tr>
<td id="NewsAmpel">
<img alt="NewsStatus" src="Ampel/AmpelA.jpg" width="36px" height="100px">
</td>
<td id="NewsStatus"><b>Status: </b>Test String</td>
<td id="NewsDesc"><b>Description: </b>Sample Text</td>
</tr>
</table>
CSS
#NewsAmpel{
width:36px;
}
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
h1 {
font-size: 15px;
font-weight: bold;
}
h2 {
font-size: 14px;
body {
font-family: Verdana, sans-serif;
font-size: 13px;
}
h1 {
font-size: 15px;
font-weight: bold;
}
h2 {
font-size: 14px;
font-weight: bold;
}
img {
border: 0;
}
a {
color: #00538E;
}
#content {
width: 100%;
float: left;
}
#center {
width: 600px;
height: auto;
margin: 0 auto;
}
font-weight: bold;
}
img {
border: 0;
}
a {
color: #00538E;
}
#content {
width: 100%;
float: left;
}
#center {
width: 600px;
height: auto;
margin: 0 auto;
}
#NewsTable {
border: 2px solid #000000;
background-color: #FFFFFF;
width: 100%;
}
#NewsStatus {
height: 20px;
padding:0;
border-bottom: 1px solid #000000;
width: 100%;
vertical-align: top;
display:block;
}
#NewsDesc {
height: 20px;
width: 100%;
margin:0;
padding:0;
display:block;
}
#NewsHeader {
text-align: center;
font-size: 14px;
font-weight: bold;
border: 1px solid #000000;
background-color: #FF1000;
}
Changes in html
Removed colspan
added image TD in same TR
Instead of image, ID has given to TD
CSS changes
#NewsStatus {
height: 20px;
padding:0;
border-bottom: 1px solid #000000;
width: 100%;//modified
vertical-align: top;
display:block;//added
}
#NewsDesc {
height: 20px; //added
width: 100%;//modified
margin:0;
padding:0;
display:block;//added
}
#NewsAmpel{
width:36px;
}
When i re-size my browser and scroll to the right end,
I get the header like the following figure, http://awesomescreenshot.com/02a29uof91
This is my output
Even stackoverflow Header too display like this..
How to fill the header when scrolling right?
CSS
body
{
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
color: #666;
background: #fff;
}
#templatemo_header_wrapper
{
height: 114px;
margin: 0 auto;
background: #19446a url(images/templatemo_header_bg.jpg) repeat-x;
}
#templatemo_header
{
width: 1200px;
margin: 0 auto;
}
#templatemo_menu_wrapper
{
clear: both;
width: 100%;
height: 41px;
margin: 0 auto;
background: url(images/templatemo_menu_bg.jpg) repeat-x;
}
#templatemo_menu
{
width: 1320px;
height: 41px;
margin: 0 auto;
}
#templatemo_menu ul
{
margin: 0 0 0 28px;
padding: 0px;
list-style: none;
}
#templatemo_menu ul li
{
padding: 0px;
margin: 0px;
display: inline;
}
#templatemo_menu ul li a
{
float: left;
display: block;
height: 22px;
width: 115px;
padding: 13px 0 0 0;
background: url(images/templatemo_menu.jpg) bottom no-repeat;
text-align: center;
font-size: 14px;
text-decoration: none;
color: #FFF;
font-weight: bold;
outline: none;
}
HTML
<div id="templatemo_header_wrapper" >
<div id="templatemo_header">
<div class="style1">
<table width="1200px">
<tbody>
<tr>
<td style="text-align: left">
<p>
Heading
</p>
</td>
<td align="right">
<table>
<tbody>
<tr>
<td>
<img height="50px" src="images/x.PNG" alt="x">
</td>
<td>
<strong><span style="font-family: Times New Roman; text-transform: uppercase; font-size: 18pt;">
Comapny name</span></strong>
<br>
<span style="font-size: 14px; font-weight: normal;">Pvt.
Ltd.</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Some code would be helpful.
Genrally, if you want things to fill horizontally, you need to specify a 100% width container and then place (or float) elements within it.
And I don't see anything like this on stackoverflow.com, regardless of how wide I make the window.