I'm trying to create a new HTML signature for our company, but I can't seem to get it work nicely on Gmaill app (Android in my test case). Both font-size and line-height changes. I tried different stuff, even deleted the whole HTML signature and try to make a new one with just a few lines to test, but unfortunately I can't get it to work. I tried so many things, that I just have no clue anymore how to fix. I also tried to search for the problem, but I still can't seem to make it work. Please see attached code.
If anyone can help me into the right direction, that would be great. I also included screenshots to show what I mean regarding the Gmail app. As you can see, also text-size is different.
https://imgur.com/mxtU4Bs
https://imgur.com/RXKQt9w
Thanks in advance!
<html>
<head>
<meta charset="utf-8">
<title>html signature</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {margin: 0px; padding: 0px; }
img { border: 0px; }
a { color: #00002E; text-decoration: none; }
h1.title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 0px; margin-bottom: 5px; }
span.function { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
#wrapper { width: 100%; max-width: 470px; }
#border { border-left: 1px solid #00002E; }
table.functiondetails { width: 100%; margin-top: 5px; }
table.functiondetails tr { height: 30px; }
table.functiondetails tr td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
table.functiondetails tr td.icon { width: 10%; }
table.functiondetails tr td.detail { width: 90%; }
#media screen and (max-width: 768px) {
#wrapper { width: 90%; }
#logoColumn { width: 30%; max-width: 30%; }
#logoColumn img { width: 100%; }
#functionColumn { width: 70%; max-width: 70%; }
}
#media screen and (max-width: 470px) {
#wrapper{ width: 100%; }
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="wrapper" cellpadding="0" cellspacing="0">
<tr>
<td id="logoColumn">
logo
</td>
<td id="border"></td>
<td id="functionColumn">
<h1 class="title">Name of employee</h1>
<span class="function">Function | Company</span>
<table class="functiondetails" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-phone.jpg" alt="Bel ons" width="13" height="13"></td>
<td class="detail">+31 (0)6 - 12345678<br>+31 (0)162 -123456</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-email.jpg" alt="Mail ons" width="13" height="13"></td>
<td class="detail">email#domain.nl</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-location.jpg" alt="Adresgegevens" width="13" height="13"></td>
<td class="detail">Address line 1<br>Address line 2</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-arrow.jpg" alt="Website" width="13" height="13"></td>
<td class="detail">domain.nl</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[1]: https://imgur.com/mxtU4Bs
Campaign Monitor can tell you a lot of information about what CSS properties are supported by the different email platforms. On there it mentions that font-size and line-height are almost universally supported. But it says that style tags in the head or body are not entirely supported, and there is very low support for linked CSS. So your best bet is to try inline styles.
https://www.campaignmonitor.com/css/text-fonts/line-height/
One downside of only using inline styles however is that you can't use media queries. So you could still leave the media queries in a style tag, but they just won't be used by every platform.
Related
I have built a few email templates the issue is that the CSS is not working on yahoo / outlook / windows native app etc. Pretty much anything that is not mac or google.
I did write the templates using tables but for the CSS I used the style tag because I want the templates to also be responsive.
I will leave some code examples below maybe you can point out my mistake.
<style type="text/css" data-hse-inline-css="true">
* {
margin: 0;
padding: 0;
}
body {
background-color: #ebeff5;
font-family: 'Source Sans Pro', sans-serif;
}
table,
tr,
td {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
}
img {
width: 100%;
border: 0;
}
p {
font-size: 20px;
color: #39506f;
line-height: 30px;
}
a {
text-decoration: none;
cursor: pointer;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #ebeff5;
}
.main {
background-color: #ebeff5;
margin: 0 auto;
width: 100%;
max-width: 750px;
padding: 35px 15px;
}
.spacing-one {
height: 15px;
}
.spacing-two {
height: 25px;
}
.card {
padding: 20px;
background-color: #ffffff;
border-radius: 5px;
}
.main-font {
font-size: 30px;
color: #1b3040;
font-weight: 400;
}
...
<main class="wrapper">
<table class="main">
<tr>
<td class="card">
<table width="100%">
<tr>
<td>
<img
class="logo"
src="path"
alt="logo"
/>
</td>
</tr>
<tr class="spacing-two"></tr>
<tr>
<td>
<h1 class="main-font">Hey {{name}},</h1>
</td>
</tr>
<tr class="spacing-one"></tr>
<tr>
<td>
<p>text.</p>
</td>
</tr>
<tr class="spacing-one"></tr>
<tr>
<td style="height: 56px">
<a href="{{url}}" target="_blank">
<span class="main-button"
>Reset Password
<img
class="main-button-icon"
src="path"
alt=""
/></span>
</a>
</td>
</tr>
<tr class="spacing-one"></tr>
<tr>
<td>
<p>
text.
</p>
</td>
</tr>
</table>
The biggest issue here is that not all email clients support HTML5 semantics (like the <main> tag you're using). And email clients will behave very differently in how they do not support it. You can refer to Can I email for details on support of HTML5 semantics.
For example, Gmail does not support the <main> tag. But it will change it into a <div> element and apply the same class attribute you had in the first place, making this seamless.
Yahoo, however, will remove the <main> element completely, thus also removing the styles you wanted to apply on it.
In your case, changing <main class="wrapper"> into <div class="wrapper"> is enough to make it work in Yahoo.
This might not be enough for Outlook on Windows and Windows native client as both of those use Word as a rendering engine and have very poor support for CSS. Thinks like margin:0 auto or max-width won’t work. You will have to rely on conditional comments, tables and eventually mso specific styles to get a proper rendering for Outlook on Windows.
I am trying to remove the header from only the first page while printing,
or Saving it to PDF
but it's not working
I have tried the below CSS codes but none of theme are working:
I have also visited these link but but none of the answer worked for me
Remove Header from First Page of HTML Generated PDF - CSS
and Delete the footer only on the last page using CSS
#page: first {
#top-left {
content: normal;
}
}
#page :not(:first) {
}
Both of theme didn't worked.
my styles
<style type="text/css">
.page-header,
.page-header-space {
height: 100px;
}
.page-footer,
.page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black;
/* for demo */
background: white;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black;
/* for demo */
background: white;
/* for demo */
}
.page {
page-break-after: always;
}
#page {
margin: 10mm;
}
#media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
body {
margin: 0;
}
#page: first {
#top-left {
content: normal;
}
}
.main_paragraph {
white-space: pre-line;
white-space: pre-wrap;
line-height: 25px;
font-size: 16px;
margin-right: 10px;
margin-left: 10px;
text-indent: 30px;
text-align: justify
}
</style>
my Body
<body>
<div class="page-header" style="text-align: center">
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div>
<img src="{{URL::asset("img/logo.jpg")}}" style="width: 90%;display: block;margin: 0 auto;z-index: 1;">
</div>
<table id="main_table" dir="rtl"
style="width: 95%;text-align:center; margin: 0 auto;border-collapse: collapse;" border="1">
<tbody>
<tr style="font-size: 18px;font-weight:bold;height:40px">
<td style="width: 47.5%">sugestion</td>
<td style="width: 7%">date</td>
<td style="width: 46.5%">order</td>
</tr>
<tr>
<td style="border-bottom: hidden;text-align:right">
<p style="text-align: right;font-size: 19px;margin-right:30px;font-weight:bold">
{{$result[0]->name}}</p>
</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
{{-- <td>{{strlen($result[0]->document_text)}}
</td> --}}
#if(strlen($result[0]->document_text)<=977) <td style="vertical-align: top;border-top:hidden;height:65vh"
dir="rtl">
#else
<td style="vertical-align: top;border-top:hidden;" dir="rtl">
#endif
{{$result[0]->document_text}}
<p class="main_paragraph" dir="rtl" lang="ar">{{$result[0]->document_text}}</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<div class="page-footer" style="text-align: center;width:94.5%;margin-left:2.55%">
</div>
</body>
I'm testing it on chrome.
You can use media query in CSS to fix that
media query is used to hide an element when printing web pages. Use #media print query and set the display none or visibility hidden to that element that needs to hide at printing
like this
#media print{
.page-header{
display:none;
}
}
if this doesn't work with you try to add media = print link on an HTML page
like this
<link rel="stylesheet" href="style.css" type="text/css" media="print" />
If still doesn't work try to add CSS code to the HTML page
Like This
<style>
#media print{
.page-header{
display:none;
}
}
</style>
try to do it with Laravel
<div class="header
#if(Route::currentRouteName() === 'yourPage')
{{hied-in-print}}
#endif "></div>
and use this class hied-in-print in #media print
<style>
#media print{
.hied-in-print{
display:none;
}
}
</style>
I have an HTML table with lots of cells in it. Some of these cells should be flagged as warning, others as alert.
I have come up with the following HTML/CSS to do something like this.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
float: right;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
Which displays the text like...
However, I want it to display with the little flag immediately to the right of the text, like this...
If I change the CSS to specify float: left; this then displays the flag before the text.
The reason I want it aligned to the right of the text, is that depending on the width of the column, it might not be obvious which text is being flagged.
ps. I've included the td width/height just so that I can demonstrate what I'm trying to do, there's also no table borders in my final design.
You can avoid making your circle narrow by using display:inline-block; and remove the float all together.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
display: inline-block;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
The primary difference between a <div> and a <span> is how they affect the layout.
A <div>, by default, is a block element and wants to live on its own line.
A <span>, by default, is a inline element and will sit next to the element before and after it.
Changing to a <span> and getting rid of the float will solve the problem. Though you do need to set its display value to something like inline-block to allow the width and height values to work correctly.
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30>hello
<span class='circle'>I</span>
</td>
</tr>
</table>
</body>
</html>
Please make Couple of adjustments to your code:
Change:
hello
To:
<div style="float:left;">hello</div>
And In CSS
Change:
float:right;
To
float: left;
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
color: #fff;
line-height: 16px;
text-align: center;
background: #ff0000;
float: left;
}
</style>
</head>
<body>
<table border=1 cellpadding=0 style="border-collapse: collapse;">
<tr>
<td width=150 height=30><div style="float:left;">hello</div>
<div class='circle'>I</div>
</td>
</tr>
</table>
</body>
</html>
I am trying to create an Email Signature Generator. I am trying to get the blue line (it can be seen in the program) to stretch all the way down. However, when I do it, it stretches the rest of the items. I believe this may be because it is all inside a table and when one element is sized differently than the others, it tries it equal it out but I am not sure how to change it. Here is my code:
table {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
}
.spacer {
width: 30px;
}
hr {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
}
#fullName {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
}
#job {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-top: 11px;
}
#jobLocationText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 15px;
padding-top: 6px;
}
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
</td>
<td class="spacer"></td>
<td>
<hr>
</td>
<td class="spacer"></td>
</tr>
<tr>
<td>
<center>
<div id="fullName">Billy Staples</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="job"><i>Programmer</i></div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="jobLocationText">at the <b id="jobLocation">HTML hub</b></div>
</center>
</td>
</tr>
</table>
And a working version can be found here.
Again, I am trying to get it so the hr (in the CSS) when the height is changed (to say 300 or something) it doesn't stretch the rest of the table with it. If you have an idea as to how I might be able to do my table differently so that it might be easier or just so that I could fix this problem, suggestions are welcome!
Thanks in advance!
Use rowspan="" to strech <hr> to way down,
<td rowspan="4">
<hr>
</td>
Here's your updated code, https://jsfiddle.net/he84kv8n/10/
<hr> is a horizontal rule (divider), bending it to be a vertical rule (divider) is a use case that will likely be difficult for anyone looking at your code to decipher.
I would suggest using a CSS border attribute on the table cell, that will automatically be the correct size.
I need help with a responsive table. What's needed is to basically have it change to a 'mobile version' upon resizing, however the mobile version is a little different to the main style of it, as the image shows.
I've currently got this: http://jsfiddle.net/MLsZ8/
HTML:
<table class="crafting">
<thead>
<tr>
<th style="width:15%">Name</th>
<th style="width:20%">Ingredients</th>
<th style="width:205px;">Input > Output</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ore Blocks</td>
<td>Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</td>
<td><img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" /></td>
<td>Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</td>
</tr>
</tbody>
</table>
CSS:
td {
border:0;
}
table.crafting {
border-spacing:0;
border-collapse:collapse;
}
.crafting th {
border:2px solid #f3f3f3;
padding:5px;
}
.crafting td {
border:2px solid #f3f3f3;
padding:5px;
vertical-align:top;
}
.crafting tr {
background:#c6c6c6;
}
.crafting-name {
font-weight:bold;
border-bottom:0 !important;
background:#c6c6c6;
}
.crafting-ingredients {
border-top:0 !important;
border-bottom:0 !important;
background:#bcbcbc;
}
.crafting-img {
width:205px;
border-bottom:0 !important;
border-top:0 !important;
background:#c6c6c6;
}
.crafting-desc {
border-top:0 !important;
background:#bcbcbc;
}
If you are not opposed to changing the overall format of the HTML, I have a solution that might be a bit easier to handle...
If you change the current table structure to a series of div elements, you can nest each table row into a container div.
I'll give you an example for one "row":
<div class="tableRow">
<div class="columnOne"> content </div>
<div class="columnTwo"> content </div>
<div class="columnThree"> content </div>
<div class="columnFour"> content </div>
</div>
Then, using CSS, you could set .tableRow {width: 100%}. From here, you could set the column widths based on your needs. From your example, it looks like you could do:
.columnOne {width: 10%; float: left;}
.columnTwo {width: 15%; float: left;}
.columnThree {width: 30%; float: left;}
.columnFour {width: 45%; float: left;}
Then, when you reach your mobile view breakpoint, using a #media query, you can do the following:
.columnOne, .columnTwo, .columnThree, .columnFour {width: 100%}
This will cause the columns to effectively become rows of width: 100%.
Option 1:
Full tables
http://jsfiddle.net/2655u/
Option 2
Convert tables to div in used mediaqueries
HTML
<div class="title">
<div class="name">Name</div>
<div class="ingredients">Ingredients</div>
<div class="field">Input > Output</div>
<div class="description">Description</div>
</div>
<div class="responsive">
<div class="name">Ore Blocks</div>
<div class="ingredients">Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</div>
<div class="field">
<img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" />
</div>
<div class="description">Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</div>
</div>
CSS
div {
display: table;
width: 100%;
table-layout: fixed;
}
div > div {
display: table-cell;
background : #C6C6C6;
border:2px solid #f3f3f3;
padding:5px;
vertical-align : top;
}
div.title {
text-align : center;
font-weight:bold;
}
div.name {
width : 90px;
}
div.ingredients {
width : 150px;
}
div.field {
width : 205px;
}
#media only screen and (max-width: 767px) {
.title {display:none;}
.responsive div {
display : block;
width : auto;
text-align : center;
background : white;
}
.responsive div.ingredients {background : #C6C6C6;}
.responsive div.description {background : #C6C6C6;}
}
Example: http://jsfiddle.net/2DTSG/
Well, I was also searching for the same one day. Got the following. It follows the same approach, converting columns to rows when getting viewed in smaller device.
http://css-tricks.com/responsive-data-tables/
Before moving ahead see the Live Demo
One simple solution is to have two tables: a regular table (with class full) and a mobile one (with class mobile). Then you can use a media query to switch between them at a particular screen size.
If your website isn't particularly heavy, this is an approach that will save a lot of headache.
Example fiddle: http://jsfiddle.net/QDrPb/
.mobile {
display:none;
}
#media (max-width:767px) {
.full {
display:none;
}
.mobile {
display:block;
}
}
Twitter Bootstrap is a nice thing to achieve table-responsiveness.
http://getbootstrap.com/
You have to download it from the above link and add the css file.
After that, apply like this: http://getbootstrap.com/css/#tables-responsive
I hope this may help your need.
Thanks
here simple demo please reffer this link for pure css demo fiddle
/*by Ñ££¿ Upadhyay*/
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;a
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 18px;
margin: 10px;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: 10px;
}
table th,
table td {
padding: 10px;
text-align: center;
}
table th {
font-size: 14px;
letter-spacing: 0;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 14px;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: 5px;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: 14px;
text-align: right;
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
padding-right: 70px;
}
table td:last-child {
border-bottom: 0;
}
}
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Due Date">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Acount">Visa - 3412</td>
<td data-label="Due Date">02/01/2016</td>
<td data-label="Amount">$842</td>
<td data-label="Period">01/01/2016 - 01/31/2016</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
</tbody>
</table>
Responsive Tables JavaScript Plugin
<link rel="stylesheet" href=".../dist/css/table-fluid.css"/>
<script src=".../dist/js/table-fluid.js"></script>
<table class="table-fluid">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Use JavaScript function
window.tableFluid('.table-fluid');
https://www.npmjs.com/package/table-fluid
https://github.com/maestro888/table-fluid
Table cells cannot rearrange they way you want - rows and columns are locked and cannot float. All you can do is change the layout WITHIN each cell. You will need to change your mark-up completely to make that happen.