Unable to place image even with the signature in table. The top pf the image should be the same level as the top of the text
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Email Signature</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 100%;
max-width: 560px">
<tr>
<td width="5%" valign="middle">
<img href="https://www.pravoconstruction.com/" src="https://media-exp1.licdn.com/dms/image/C4E0BAQGQicp-n_FWzw/company-logo_200_200/0/1530564205372?e=2159024400&v=beta&t=OdxbaYftUNG_-cf8lLTWVA-voPANK8goWs3hiafOo84" style="width: 30%;min-width: 62px;
display: block;">
</td>
<td width="70%" valign="top">
<h4 style="margin:0 0 5px; font-size: 9px;font-family: arial;color:#99A3A4; line-height:1.2"><strong>test email</strong></h4>
<h5 style="margin:0 0 5px; font-size: 8px;font-family: arial;color:#99A3A4; line-height:1.2">job role | 123.456.7890</h5>
<h5 style="margin:0 0 5px; font-size: 8px;font-family: arial;color:#99A3A4; line-height:1.2">1234 anywhere lane | Texas,TX 77777</h5>
</td>
</tr>
</table>
</body>
</html>
Looks like your photo has some space inside the image which probably causes it to look not lined up. If you want to compensate for that I would suggest adding some padding to the top of the h4.
Also, you could crop the image so it doesn't have this space on the top.
Related
Sample Code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
</head>
<body style="font-family: Arial; margin: 0; padding: 0;">
<table align="center" width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px; background-color: #000000; font-family: Arial; font-size: 15px;color: #ff0000;">
<tr>
<td style="padding:10px;font-weight: bold;font-size: 20px; color: #ff0000;">Header Title</td>
</tr>
<tr>
<td style="padding:10px;">Here is the content for this section.</td>
</tr>
<tr>
<td style="padding:10px">
<img src="LearnMore.png" width="170" height="38" border="0" alt="Learn More" />
</td>
</tr>
</table>
</body>
</html>
Output for Office 365 in windows 10
All other clients seem to be fine.
Attempted the fixes from here
Looks like if a font size of 12px or 16px doesn't show the line but the requirement is to use 15px
expected result
The problem is often due to a rounding error in the Outlook engine (MS Word) with odd numbers. In your case, you've already identified an even numbered font-size works. Seeing as that's the core error, and it's not a bug in your code, you have to weigh up whether the unsightliness of the line is worse than changing the size of the font.
If that's not acceptable, you may have luck by setting a line-height of 16px like so: font-size:15px; line-height:16px;.
If all else fails, you can set the font-size differently just for Outlook desktops: font-size:15px; mso-ansi-font-size: 16px;
I'm practicing writing HTML email code but for this particular issue, I've been stuck it on for a very long time no matter what I try.
When the view reaches <= 600px (when scrolling your screen to left), the This text should be in the middle! text is inside the 1200x1000 placeholder but not directly in the middle of it.
On the flip side, when the view reaches >= 601px, the This text should be in the middle! text is between the 320x30 placeholder and not inside 1200x1000 placeholder
Lastly, once it reaches <= 1207px, the left and right scrolling begins to happen on the entire page, which it shouldn't but not sure why it's happening.
I have no idea why these things are happening and just feeling like I've ran out of options in terms of fixing this. What am I doing wrong and how can I fix it? A Fiddle is provided below as well: https://jsfiddle.net/s01mr3xp/50/
Here's my HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&v=1.0&song=cantbuymelove" rel="stylesheet"
type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,700&display=swap" rel="stylesheet">
<style type="text/css">
#import url("https://use.typekit.net/anr2nbh.css");
table td, table th {
border-collapse:collapse;
border-spacing:0px;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
border:0px none;
padding:0;
}
#media screen and (max-width: 600px){
.header-welcome {
background-image: url('http://via.placeholder.com/1200x1000');
background-size: 320px 320px;
background-repeat: no-repeat;
width: 320px !important;
height: 320px !important;
}
.width-320 {
width: 320px !important;
}
.height-auto {
height: auto !important;
}
.overload {
display: block !important;
}
.hide {
display: none !important;
}
.fontsize-11 {
font-size: 11px !important;
}
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
.outlook-fallback {
font-family: Arial, sans-serif !important;
}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body width="100%" bgcolor="#f4f8f1">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width-320" style="margin: 0 auto;" width="1200">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="width-320" align="center" > <img class="width-320 height-auto" style="display: block;" src="http://via.placeholder.com/328x44" width="328" height="44" border="0" /> </td>
</tr>
<tr>
<td class="width-320" align="center" height="30"><img class="width-320" style="display: block;" src="http://via.placeholder.com/320x30" width="600" height="30" border="0" /></td>
</tr>
<tr>
<td class="width-320 header-welcome" valign="top" align="center">
<a href="#">
<font class="fontsize-11 outlook-fallback" style="font-family: museo-sans,Arial,Sans-Serif; font-weight: 100; font-size: 40px; color: #000000;">This text should be in the middle!</font>
</a>
<a href="#">
<img class="hide" style="display: block;" src="http://via.placeholder.com/1200x1000" alt="Welcome!" border="0" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Take a closer look at these:
#media screen and (max-width: 600px){
.header-welcome {
background-image: url('http://via.placeholder.com/1200x1000');
background-size: 320px 320px;
background-repeat: no-repeat;
width: 320px !important;
height: 320px !important;
}
.hide {
display: none !important;
}
<tr>
<td class="width-320 header-welcome" valign="top" align="center">
<a href="#">
<font class="fontsize-11 outlook-fallback" style="font-family: museo-sans,Arial,Sans-Serif; font-weight: 100; font-size: 40px; color: #000000;">This text should be in the middle!</font>
</a>
<a href="#">
<img class="hide" style="display: block;" src="http://via.placeholder.com/1200x1000" alt="Welcome!" border="0" />
</a>
</td>
</tr>
When the screen width is <=600px:
You are setting the background-image for .header-welcome class.
You are hiding the additional image element <img class="hide"
When the screen width is >600px:
The background-image is not set anymore
The additional image element is shown and the text is placed on top of it.
Then, you have used valign="top" here:
<td class="width-320 header-welcome" valign="top" align="center">
Change it to valign="middle". This places the text in the middle of the cell vertically.
I didn't realise it got put on hold. Sorry about that. Here's the answer:
At the moment every 3rd one is blue and every 5th is black. I'm assuming you want the 3rd one after black to be blue. You are going to want to change the css to
li:nth-child(5n-2) {
background: blue;
}
li:nth-child(5n) {
background: black;
}
I am writing an html email using inline styles since I'll be sending it in Outlook and read that's the best way to circumvent browser reformatting. I want to center the two links below, which I put into table cells because that's the only way I could get padding to work in Outlook. I would like the 2 links to appear centered with their background and padding on the page, but I don't know how to do that using inline styling and tables. Can anyone help? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "wall cuts, train stations, New York City"
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
<table>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
First, instead of using padding on each cell, you can just specify cellpadding attribute for a table tag -
<table cellpadding="10">
The cell content is centered by default -
<table cellpadding="10">
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
</table>
UPD
To center the whole table, set margin to 0 auto -
<table style="margin: 0 auto;">
To center only either a row or a column, apply accordingly -
<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or
<td style="width: 50%; margin: 0 auto; display: table;"></td>
You add an align attribute to the td cell.
<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> Your link
</td>
Adding margin to body tag, will that work for you.
<body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">
Use text-align:center, vertical-align:middle,
table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<div id="centerme">
<table>
<tr>
<td>
Watch my film "wall cuts, train stations, New York City"
<br/>
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
</div>
</body>
</html>
Check out this html. Appears fine to me.
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body style="height:height:500px;">
<table border="0" style="width:100%; text-align:center;">
<tr>
<td >
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "wall cuts, train stations, New York City"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "red hook, rush hour"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
</td>
</tr>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
I am having trouble centering my table in html as I am trying to create a web page for a class.
This is what I have entered into html:
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
However, whenever I try to add 'align' and 'width' in the attribute, it only affects my width. It doesn't center the table.
Does anyone know of a way to both center the table in the page while applying width?
Thank you. I can provide the markup of my html page if needed.
Try this:
<table style="margin:0px auto; width:500px">
However align is obsolete so you may try this:
table {
width:500px;
margin: 10px auto;
}
ie, give width to your table and set margin auto horizontal
just add this to your table
table {
text-align: center;
}
Live Demo
try to put it inside
<p align="center">
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</p>
Enclose your table in a wrapping div:
<div class="wrapper">
<table>
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div>
And then in your css file (if you want to centre the text too):
table {
text-align: center;
width: 50%
}
.wrapper {
margin: 0 auto;
}
You can't center an element without defining the width of its outside container. Let me show you a better way to set it up.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside-container {
width: 100%;
}
#form-container {
width: 50%;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="outside-container">
<div id="form-container">
<table align="center">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div> <!-- CLOSE #form-container -->
</div> <!-- CLOSE #outside-container -->
</body>
</html>
My table keeps show up in one cell, not sure what i did wrong. anyone willing to look and let me know where i went wrong.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
<title>Ironton Fire department Sponsors</title>
</head>
<body>
<div style="width:1020px; height:1020px; float:center; background- image:url(images/zombie_5k_TM_AP_stripped.png)">
<div class="home">
<img src='images/home_button.jpg' name="register" onMouseOver="this.src='images/home_button_hover.jpg'" onMouseOut="this.src='images/home_button.jpg'" onclick="location.href='index.html'"/>
</div>
<div class="register">
<img src='images/register_button.jpg' name="register" onMouseOver="this.src='images/register_button_hover.jpg'" onMouseOut="this.src='images/register_button.jpg'" onclick="location.href='register.html'"/>
</div>
<div class="sponsor">
<img src='images/sponsor_button.jpg' name="sponsor" onMouseOver="this.src='images/sponsor_button_hover.jpg'" onMouseOut="this.src='images/sponsor_button.jpg'" onclick="location.href='sponsors.html'"/>
</div>
<div class="gallery">
<img src='images/gallery_button.jpg' name="gallery" onMouseOver="this.src='images/gallery_button_hover.jpg'" onMouseOut="this.src='images/gallery_button.jpg'" onclick="location.href='gallery.html'" />
</div>
<div class="sponsors">
<table>
<tr>
<td align="center" width="250">Seth Jackson - Edward Jones</td>
<td align="center" width="250">Heritage Mechanical </td>
</tr>
<tr>
<td align="center" width="250">Mike Flanagan – Iron Range Auto </td>
<td align="center" width="250"> </td>
</tr>
</table>
</div>
<div class="sform">
< p align="center">
<a style="color: #D91D1F;"href="Images/ZX5K Sponsorship Agreement.pdf" target="_blank">ZX5K Sponsorship Agreement</a></p></div></div>
</body>
</html>
here is the css that covers the class .sponsors
.sponsors {
position: absolute;
top: 280px;
left: 340px;
}
here is the link to see what i am talking about, http://www.ifdauxzx5k.com/sponsors.html
Your table doesn't show up in one cell.
But all the cells are on top of eachother, because you have position: absolute; on your TD in your main.css line 62.
td{
color: #D91D1F;
position: absolute;
}
This is why every TD is going to the left top position of the table. Remove this line and it will behave correctly.