I currently use the following HTML to render the image shown below. This however does not work in Outlook as background images are not supported. I have been tipped to use tables to render elements correctly in outlook, but have no idea how to go about this. 200 bounty to the person who provides the html that will render the image below correctly in Outlook 2007/2010"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
div, p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
div.box {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color:rgb(255,232,0);
}
div.box div.inner {
height:100%;
background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<p class="name">John</p>
<p>XYZ Company</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
table {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color: #fee800;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<table>
<tr><td>John Smith</td><td></td></tr>
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr>
</table>
</body>
</html>
For emailer You should have to use table and don't use CSS in head or different CSS. Try to use and inline CSS.
<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;">
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td> </td>
</tr>
<tr>
<td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td>
</tr>
</table>
Related
I'm trying to replicate the design and structure of a Facebook page post.
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post td {
vertical-align: top;
}
.timestamp {
font-size: 13px;
color: #999;
}
<div class="post">
<table>
<tbody>
<tr>
<td>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<table>
<tr>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
Here is the JSFiddle of what I have: https://jsfiddle.net/6nodfbdj/
As you can see, the image is only 50x50, but it's pushing the td all the way out like that for no reason.
Somehow it's conflicting with the td that contains the content. So basically what's happening, is whatever the width of the content td is, is also being set for the td containing the image.
Any ideas?
As mentioned in one of the comments, tables are not to be used for formatting. They are for tabular data.
From The w3.org site
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
Note. This specification includes more detailed information about tables in sections on
https://www.w3.org/TR/html401/appendix/notes.html#notes-tables
Instead you should use CSS. While the layout and sizes aren't exactly the same as your fiddle, take a look at https://jsfiddle.net/ringhidb/jeeu2yrt/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 16px;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post {
position: absolute;
}
.header {}
.logo {
float: left;
padding: .1em;
}
.info {
float: left;
padding: .25em;
}
.site {
font-size: 1.02em;
font-weight: bold;
}
.timestamp {
font-size: .75em;
color: #999;
}
.content {
clear: both;
}
</style>
<title>CSS Layout</title>
</head>
<body>
<div class="post">
<div class="header">
<div class="logo">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</div>
<div class="info">
<a class="site">Toomblr</a>
<div class="timestamp">20/01/2017 - 11:43</div>
</div>
</div>
<div class="content">
Some content.
</div>
</div>
</body>
</html>
It's being set by the width of the text in the <td> containing "Some content". Try:
<td colspan=2>
Some content.
</td>
I don't know what you want to do, but try this.
.post td {
vertical-align:top;
float:left;
}
You had a "spare cell" what can be fixed with rowspan and colspan.
Try this:
<body>
<div class="post">
<table>
<tbody>
<tr>
<td rowspan=2>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td></tr>
<tr>
<td colspan=2>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
</body>
have you tried image width 100% ?
I'm getting a 2px unwanted margin/padding/border, but can't for the life of me see what's causing it. It comes out the same way in both FF47 and O 36.0.2130.80
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
padding:0;
margin:0;
border:0;
}
BODY {
background-color:#555577;
color:#CCCCCC;
font-family:"Verdana","Arial","Helvetica";
font-size:9pt;
text-decoration:none;
border:0;
padding:0;
margin:auto ;
}
</style>
</head>
<body>
<table width="400" style="background-color:white;margin:auto;padding:0;border:0">
<tr>
<td>
<table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
<tr>
<td>FOO</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Add
border-spacing: 0px;
To the table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
padding:0;
margin:0;
border:0;
border-spacing: 0px;
}
BODY {
background-color:#555577;
color:#CCCCCC;
font-family:"Verdana","Arial","Helvetica";
font-size:9pt;
text-decoration:none;
border:0;
padding:0;
margin:auto ;
}
</style>
</head>
<body>
<table><tr><td height="50"></td></tr></table>
<table width="400" style="background-color:white;margin:auto;padding:0;border:0">
<tr>
<td>
<table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
<tr>
<td>FOO</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
https://jsfiddle.net/
Add "border-collapse: collapse;" to your table element, you can see a pic here:
You can archieve your goal more clean and professional using divs instead tables:
BODY {
background-color:#555577;
}
#progress-containes {
margin-top: 50px;
width : 400px;
height: 30px;
background-color: #fff;
}
#progress-bar {
background-color:#780000;
font: 400 9pt/1 "Verdana","Arial","Helvetica";
width: 50%;
color: #fff;
padding-top: 8px;
padding-left: 6px;
box-sizing: border-box;
height: 100%;
}
<div id="progress-containes">
<div id="progress-bar">
FOO
</div>
</div>
I'mkind of knew so I have no idea if I'm formatting this correctly, but my question is: How do center the footer to the middle of the page (vertically of course)?
<!-- Header & footer-->
<header>
<style type="text/css">
body {
font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:400px;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
</style>
</header>
<footer><table align="center">
<tr><td align="left"><p class="padding"><font color="white">Phone: 555-555-1800<br>Fax: 555-555-1800<br>Canada:1-800-555-5555<br>Mexico:001-800-555-5555</p></font></td>
<td align="left"> <p> <font color="white"> company title<br>Street<br>City, State zip<br>
<font color="white"> email adress</p></font></td></tr>
</table><table align="center">
<tr><td><p class="padding"><font color="white" font size="2"> copy write 2014 yatayata </tr></td>
</table> </footer>
</html>
there are several method to vertically center.. here is one of them. Check the DEMO first.
html, body {
width:100%;
height:100%;
}
html {display:table;}
body {
display:table-cell;
vertical-align:middle;
font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
Now its centered , Tested
<header>
<style type="text/css">
body {
font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
margin: 0 auto;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
</style>
</header>
<footer><table align="center">
<tr><td align="left"><p class="padding"><font color="white">Phone: 555-555-1800<br>Fax: 555-555-1800<br>Canada:1-800-555-5555<br>Mexico:001-800-555-5555</p></font></td>
<td align="left"> <p> <font color="white"> company title<br>Street<br>City, State zip<br>
<font color="white"> email adress</p></font></td></tr>
</table><table align="center">
<tr><td><p class="padding"><font color="white" font size="2"> copy write 2014 yatayata </tr></td>
</table> </footer>
</html>
remove
"
margin-right:0px;
margin-left:400px;
margin-top:0px;
margin-bottom:0px;
"
from body
You should use margin auto for center.
add in body
"margin: 0 auto; "
Use <center> tag
Link: JSFiddle
<html>
<style>
body {
font-family : Verdana, Helvetica, Geneva, SunSans-Regular, sans-serif, arial ;
background-color: #C2A366;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
}
p.padding
{
padding-top:0px;
padding-bottom:0px;
padding-right:50px;
padding-left:0px;
}
</style>
<body>
<footer>
<center>
<table align='center'>
<tr><td align="left"><p class="padding"><font color="white">Phone: 555-555-1800<br>Fax: 555-555-1800<br>Canada:1-800-555-5555<br>Mexico:001-800-555-5555</p></font></td>
<td align="left"> <p> <font color="white"> company title<br>Street<br>City, State zip<br>
<font color="white"> email adress</p></font></td></tr>
</table><table align="center">
<tr><td><p class="padding"><font color="white" font size="2"> copy write 2014 yatayata </tr></td>
</table>
</center>
</footer>
</body>
</html>
I have a very stupid problem: I want a field inside a table, which has 100% of the Table-Cell height. The Problem is the IE-Browser, which won't do that. On Chrome etc. it works (Firefox too I think). Here is a sample html-File:
<?xml version='1.0' encoding='UTF-8' ?>
<!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>Test</title>
<style type="text/css" media="screen">
body {
background-color: #ffffff;
font-size: 12px;
font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
color: #000000;
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
border: medium none;
}
table.subTable td {
border-width: 0px;
padding: 0px;
margin: 2px;
}
.ui-slottable table {
height:100%;
width:100%;
}
.ui-slottable-slot {
width:100%;
height: 100%;
border-radius: 5px;
border-width:1px;
border-style:solid;
border-color: #cccccc;
background-color:#eeeeee;
border-collapse: separate;
}
</style>
</head>
<body>
<div class="ui-slottable">
<table>
<tbody>
<tr>
<td>
<div class="ui-slottable-slot">
<table class="subTable" style="margin:2px;">
<tbody>
<tr>
<td>T1 Hallo</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div class="ui-slottable-slot">
<table class="subTable">
<tbody>
<tr>
<td>T2 Hallo</td>
</tr>
<tr>
<td>Halloggggggggggggggggggg</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In this File The Field T1 should have the same height as T2.
I've tested a lot of different way's, but nothing worked...
Hope someone can tell me how IE makes this...
Attempting to set height usually does not work.
You can get the same height for the fields by using 2 lines in the innermost table for T1, too. (Use nbsp as contents of the extra line.) Then remove the style="margin:2px;" inside the table html tag.
I want to set margin-top and bottom to my print page for writing header and footer.
I did it in Firefox. But it doesn't work in chrome and internet explorer.
When I used #page code it works in chrome. But I cant write header on the top and footer on the bottom. How can I solve this problem?
Here is my code
pagination.php
<!DOCTYPE HTL>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex">
<meta http-equiv="cache-control" content="no-cache">
<title>Brove.NET ISO Yazılımı</title>
<link rel="stylesheet" type="text/css" href="css/pagination.css" />
</head>
<body>
<table class="header" cellpadding="0" cellspacing="0">
<tr>
<td>header
</td>
</tr>
</table>
<table class="content" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
content
</td>
</tr>
</table>
<table class="footer" cellpadding="0" cellspacing="0">
<tr>
<td>footer
</td>
</tr>
</table>
</body>
</html>
pagination.css
#media screen{
.header{
width:768px;
height:100px;
border:2px solid #000;
}
.content{
width:768px;
margin-top:10px;
margin-bottom:10px;
height:1000px;
}
.footer{
width:768px;
height:100px;
border:2px solid #000;
}
}
#media print{
.header{
position:fixed;
top:0;
left:0;
width:768px;
height:100px;
border:2px solid #000;
}
.content{
width:768px;
margin-top:120px;
margin-bottom:120px;
height:1000px;
}
.footer{
position:fixed;
left:0;
bottom:0;
width:768px;
height:100px;
border:2px solid #000;
}
#page{
margin-bottom:150px;
}
}
IE screenshot:
Firefox screenshot:
Chrome screenshot: