building an email with html css. i'm using tables which works fine on Gmail Outlook and Yahoo clients. on ios mail in mobile all tables are aligned left.
I need it to centered.
this is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<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">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style type="text/css">
</style>
</head>
<body style="background-color: #F9FBFF; margin:auto;">
<table align="center" style="background-color:#FFFFFF; width:609px; height:55px; padding-left: 10px; border:1px solid #E7F7FF; display:block;">
<tbody>
<tr style="height:50px;">
<td style="vertical-align: middle; ">
<div style="font-size: 16px; font-family: 'Helvetica';font-weight: 500; ">Hate Speech</div>
</td>
<td>
<a href="https://www.kidas.net/post/toxicity-in-video-games">
<img style="height:auto !important; padding: 8px 0px 0px 5px;" title="Abusive language based on prejudice" width="15" src="http://cdn.mcauto-images-production.sendgrid.net/6e0d08eb67685199/9451cd9d-023e-4c4f-a679-84200923b3b6/15x15.png">
</a>
</td>
</tr>
</table>
</body>
</html>
Related
Notice that the image isn't flushed to the top, instead it has a gap. It looks fine on all emails, but on iPhones I'm getting this to happen. How can I fix this on iPhone emails?
Here is the inlined code for the container divs:
<!DOCTYPE html>
<html>
<head>
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1" />
</head>
<body style="padding:0;">
<div class="email-background" style="background: #eee;padding: 10px;">
<div class="email-container" style="max-width: 600px;background: white;background-image: url(body_textur_bkg.jpg);font-family: Helvetica, sans-serif; margin: 0 auto; overflow: hidden; border-radius: 5px; display:block; padding: 0px;">
<a href="https://www.youtube.com/">
<img src="thankyou_header_link.jpg" style=" max-width:100%;vertical-align: top;"></a>
<h1 class="name" style="margin: 40px;font-size: 25px;text-align: left;color: #666;line-height: 1.5;">
[CANDIDATE_NAME],.....
Not sure if you need the rest of the code, but I can post if needed.
Try this piece of code to see if it fixes it:
<!DOCTYPE html>
<html>
<head>
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1" />
</head>
<body style="padding:0;">
<div class="email-background" style="background: #eee;padding:0px 10px;">
<div class="email-container" style="max-width: 600px;background: white;background-image: url(body_textur_bkg.jpg);font-family: Helvetica, sans-serif; margin: 0 auto; overflow: hidden; border-radius: 5px; display:block; padding: 0px;">
<a href="https://www.youtube.com/">
<img src="thankyou_header_link.jpg" style=" max-width:100%;vertical-align: top;border:0px; display:block;"></a>
<h1 class="name" style="margin: 40px;font-size: 25px;text-align: left;color: #666;line-height: 1.5;">
[CANDIDATE_NAME],.....
Let me know if it fixes it.
Cheers
<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
</head>
<body style="width: 100%; height: 100%">
<table cellspacing="1" style="width: 100%; height: 100%">
<tr>
<td valign="middle" align="center">
<h1>Hello World</h1>
</td>
</tr>
</table>
</body>
</html>
The result of that html snippet is the word Hello World is on top of the screen. I did everything to make it in the middle. What can I do?
I tried another way using vertical align style
<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>How to get Sexier Avatar in IMVU 2</title>
</head>
<body style="width: 100%; height: 100%">
<div style="height: 100%;width: 100%;vertical-align: middle">
<h1>Click here to Get Game and See Yourself</h1>
</div>
</body>
</html>
I clearly said that the vertical align for the div should be middle. It doesn't work.
It seems that the size of the body is not fullscreen. How do I make it full screen?
<!doctype HTML>
<html>
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Title</title>
<style>
#centerInScreen {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#centerInScreen h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="centerInScreen">
<h1>Hello World!</h1>
</div>
</body>
</html>
Use this to center in screen.
Use CSS
<div class="center">Hello World</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
I'm trying to create an html email that gets sent out to users as a receipt. However I can't get the background-colour to display properly. I've tried putting all the styles inline inside of divs and it still does not work.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 0;padding-bottom: 0px;background-color: #d6d6d6;
margin-bottom: 0px; margin: 0 auto;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slice Receipt E-mail</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="body: 100%;margin: 2%; margin-bottom: 0px;margin-top:0px;">
<div id="white-div" style="body: 100%;margin-bottom: 0px;margin-top:0px; background-color: white;">
<table border="0" cellpadding="0" cellspacing="0" width="95%" align="center">
<tr style="width: 80%">
<td style="padding-left: 0px; padding-bottom: 10px; padding-top: 15px;">
After this I have tables for the e-mail. I don't think it's important to post the next 100+ lines because I think the problem exists in how I'm trying to style it.
I have added to a blogspot blog a page with a gallery of images: here.
in chrome some of the images are distorted(vertical format images) - in firefox everything looks fine:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta name="generator" content="Bluefish 2.2.2" />
<meta name="author" content="" />
<meta name="date" content="2013-01-20T10:35:50+0100" />
<meta name="copyright" content=""/>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
<meta http-equiv="expires" content="0"/>
<meta />
</head>
<style type="text/css">
table {
text-align: center;
}
td {
margin-top: 4;
margin-bottom: 4;
margin-left: 4;
margin-right: 4;
}
img {
height: 85%;
width: 85%;
}
</style>
<body>
<div id='galleryWinter'>
<table vertical-align:middle; horizontal-align:middle>
<tr>
<td>
<a href="http://www.istockphoto.com/stock-photo-19712275-virginia-creeper-in-fall.php?st=ee2d438" target="_parent" name="Wilder Wein">
<img src="http://i.istockimg.com/file_thumbview_approve/19712275/2/stock-photo-19712275-virginia-creeper-in-fall.jpg" alt="Wilder Wein" />
</a>
<h3>Wilder Wein</h3>
</td>
<td>
<a href="http://www.istockphoto.com/stock-photo-19792446-virginia-creeper-in-fall.php?st=ee2d438" target="_blank" name="Wilder Wein">
<img src="http://i.istockimg.com/file_thumbview_approve/19792446/2/stock-photo-19792446-virginia-creeper-in-fall.jpg" alt="Wilder Wein" longdesc="Wilder Wein" />
</a>
<h3>Wilder Wein</h3>
</td>
</tr>
.
.
.(the code for the other images and links)
As you can see I have put the images into a table. What do I need to do, that the vertical format images are not distorted in chrome (expanded to the width of the table cell).
Looking forward to your answers,
Force the image heights to be auto instead of the 85% that you've set globally to every image on the page:
Css:
#galleryWinter img{
height: auto !important;
}
I have an html table nested in an html table cell. I want the nested table to use the full size of the cell it is nested in. When I use firefox or google chrome I get the result I want but when I use Internet Explorer 8 (even if I use td style="height="100%") the height of the nested cell depends on it's content. As a result I get whitespace before and after my nested table. Here is a simple html that will reproduce the problem.
<!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" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table, td, th {border:#000 medium solid}
</style>
<body>
<table>
<tr>
<th style="margin:0;padding:0;height:100;">
<table><tr><th style="height:100%">nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
Here is your problem, you have specified <th style="margin:0;padding:0;height:100;"> in inline CSS style for you th inside your main table.
This should solve you problem, try using height:100%; instead.
EDIT:
To get rid of you extra space that requires in IE8 to scroll down you page, you can remove you border and add cellpadding="0" cellspacing="0" to you main table.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body, html, table{
height: 100%;
width: 100%;
margin:0px;
padding:0px;
}
</style>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<th style="margin:0px;padding:0px;height:100%;">
<table><tr><th>nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
Using attached code worked for me for both IE and FF but had to remove the borders as they are handled differently by IE and FF
<!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" />
<title>Untitled Document</title>
</head>
<style type="text/css">
<!--
body, html, table{
height: 100%;
width: 100%;
margin:0;
padding:0;
}
table{border:#000 0px solid}
</style>
<body>
<table style="background:#063" cellpadding="0" cellspacing="0" border="0">
<tr>
<th style="margin:0;padding:0;height:100%;">
<table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:100%">nested cell</th></tr></table>
</th>
</tr>
</table>
</body>
</html>
In your <th>, you have "height:100;" instead of "height:100%;" - missing the "%"
<th style="margin:0;padding:0;height:100%;">
instead of
<th style="margin:0;padding:0;height:100;">
try just adding th{height:100%} to your css style