This HTML works fine in any editor, but when I send a sample email to the gmail based on this html Background moves to the center:
</head>
<body style="padding: 0 25px;background: linear-gradient(to bottom, red 80px, black 0%) no-repeat top / auto;background-size: 900px 1020px;">
<header>
HTML email is 1990's style web design, but with mobile support and some limited opportunity for progressive design. So it's going to need a complete redesign.
Some no no's:
Don't set a width greater than about 280px (or less if you have padding). Mobiles won't be responsive with that.
Linear-gradient could work on some platforms, but not on others. For this gradient, which is not even a gradual change, use the bgcolor attribute or background-color style.
You may have issues with the <body> tag, as it gets replaced or used weirdly in different email clients. Put your work in a table.
Don't use <header> and other more modern HTML/CSS, unless you have a fallback for email clients that don't support it.
You could start with something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
</head>
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
<!-- START OUTER WRAPPER -->
<center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<div style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
<!-- END OUTER WRAPPER -->
<!-- START SINGLE COLUMN v1 -->
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;">
<table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;">
<!-- START TEXT -->
<tr>
<td bgcolor="red" style="border-collapse:collapse;padding:10px;width:100%;text-align:left;height:80px;">
<p style="margin:0;font-size:14px;margin-bottom:10px;"> </p>
</td>
</tr>
<tr>
<td bgcolor="black" style="border-collapse:collapse;padding:10px;width:100%;text-align:left;color:#fff">
<p style="margin:0;font-size:16px;">This is another paragraph. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END SINGLE COLUMN v1 -->
<!-- START OUTER WRAPPER -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
<!-- END OUTER WRAPPER -->
</body>
</html>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);">
<tr>
<td style="color:#ffffff;">In the table, you can give background. Make sure gradient background will not render in Outlook email browser. Instead of linear background, you can give image in the background. </td>
</tr>
</table>
</body>
Related
I need to complete an assignment for a Web App Dev course I'm taking. The instructions are:
Include a reference to the CSS sheet you created (done)
Add the title styles (done)
Add a page heading "Having Fun with Styles" (done)
Place some text in a paragraph block (done)
Add a table with two rows and three columns
Place the same image to each cell in the first row
Enter 25% Opacity, 50% Opacity, and 100% Opacity in the second row
Create two internal (embedded) imgclass styles “a" One will be class
“a” the other class “b.”
Set the opacity for “a” to .25 (dot 25) and “b” to .50 (dot 50)
Update the first image in the table to the img class "a" style
Set the second image in the table to the img class "b" style
Change the color style for the h1 element to teal.
Make the width style of the p element to 50% using the in-line style.
I need help with #5, 6, and 8.
I tried putting the below code and cannot get the pictures to display.
<div>
<table>
<tbody>
<tr> <th> a </th> <th> b </th> <th> c </th></tr>
<style type= "text/css">
.imga {width 300px; height:238px; opacity:.25}
.imgb {width 300px; height:238px; opacity:.50}
<img class= "a" src= "tiger.jpg">
<img class= "b" src= "tiger.jpg">
</style>
</tbody>
</table>
</div>
<hr>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="ISO-8859-1">
<title>Styles</title>
</head>
<body>
<h1>Having Fun with Styles</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam id orci elementum, interdum velit eget, congue felis.
Sed erat odio, semper finibus nisl quis, congue auctor est.
Curabitur accumsan mi in leo tincidunt eleifend.
</p>
<div>
<table>
<tbody>
<tr> <th>a </th> <th>b </th> <th> c</th> </tr>
<style type= "text/css">
.imga {width 300px; height:238px; opacity:.25}
.imgb {width 300px; height:238px; opacity:.50}
<img class= "a" src= "tiger.jpg">
<img class= "b" src= "tiger.jpg">
</style>
</tbody>
</table>
</div>
<hr>
</html>
I expected the pictures to display, but none of them do.
I see h1 displayed with the correct color from my CSS file, the paragraph text, the background color changed by the CSS, and the horizontal line rule.
Number #5, #6, and #8
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta charset="ISO-8859-1">
<title>Styles</title>
<style>
.a {
opacity: 0.25;
}
.b {
opacity: 0.50;
}
</style>
</head>
<body>
<h1>Having Fun with Styles</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam id orci elementum, interdum velit eget, congue felis.
Sed erat odio, semper finibus nisl quis, congue auctor est.
Curabitur accumsan mi in leo tincidunt eleifend.
</p>
<table>
<tbody>
<tr> <!-- Row 1 -->
<td>
<img class= "a" src= "tiger.jpg">
</td>
<td>
<img class= "b" src= "tiger.jpg">
</td>
<td>
<img src= "tiger.jpg">
</td>
</tr>
<tr> <!-- Row 2 -->
<td style="opacity: 0.25;">
Cell 2,1
</td>
<td style="opacity: 0.50;">
Cell 2,2
</td>
<td style="opacity: 1;">
Cell 2,3
</td>
</tr>
</tbody>
</table>
</html>
I have a table made with HTML and PHP (PHP for the content) and because of the length of some of the sentences in one of the sub-sections I need the width to go outside the screen(so scrolling goes in width as well as height).
The printed text in one of the columns is a full stack trace for an Android app and because of the short length of the column, the text gets 'squeezed' inside it.
How can I expand the table in width to go off the screen so a scrollbar at the bottom appears? I'm going to add another column too so I need to have space enough.
Additionally, because of the height of the text in one of the 6 columns the other content gets set to the middle of the column. How do I make all the text start at the top independently of the other columns?
Important code:
<table border="1" style="border:2px solid black;">
<thead>
<tr>
<td>time</td>
<td>android_version</td>
<td>device_id</td>
<td>app_version</td>
<td>stacktrace</td>
<td>package</td>
</tr>
</thead>
<tbody>
<?php
//etc database stuff
while($row = mysql_fetch_assoc($result)) {
?>
<tr>
<td><?php echo $row['time'];?></td>
<td ><?php echo $row['android_version'];?></td>
<td ><?php echo $row['device_id'];?></td>
<td ><?php echo $row['app_version'];?></td>
<td ><?php echo $row['stacktrace'];?></td><!-- This is the part that is very long. The other text is centered based on the length of this. -->
<td><?php echo $row['package'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
I tried searching for it, but I only found questions relating to tables going outside the default visible screen but they did not want it. I want the table to be its full size, even if the screen expands so there is a scrollbar in width
To make table width bigger you can apply some CSS for StackTrace column.
If you need to display it in one line - use white-space: nowrap;
If you need only some specific width for it - use min-width: #px or just width: #px;
To align all elements to top of cell use vertical-align: top.
td {
vertical-align: top;
}
td:nth-child(5) {
/*white-space: nowrap;*/
min-width: 500px;
}
<table border="1" style="border:2px solid black;">
<thead>
<tr>
<td>time</td>
<td>android_version</td>
<td>device_id</td>
<td>app_version</td>
<td>stacktrace</td>
<td>package</td>
</tr>
</thead>
<tbody>
<tr>
<td>1975-01-01
<br/>1975-01-01
<br/>1975-01-01</td>
<td>5.3</td>
<td>9/11</td>
<td>0.1.001</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec tortor vitae augue tempus egestas. Maecenas dictum dui vitae nisl tempus porta. Fusce ac nunc nec magna gravida sodales eget sed massa. Integer dapibus pulvinar tortor, ut ultrices
nulla convallis vitae. Aenean egestas nunc sem, et efficitur est viverra at. Curabitur ipsum ante, commodo ac facilisis vitae, lobortis vitae felis. Curabitur dapibus faucibus erat, vitae consectetur est. Proin rutrum purus vel massa faucibus
elementum. Vivamus venenatis a ante nec fringilla. Phasellus volutpat eu erat et placerat. Quisque diam felis, mollis vel auctor et, dapibus sed nisi. Maecenas vitae nisi leo. Proin aliquam malesuada nisl, sed imperdiet ligula porta non.</td>
<td>Nop!</td>
</tr>
</tbody>
</table>
Note
I see that you are using mysql_fetch_assoc -- Don't use deprecated functions! Use PDO or MySqli
To your question:
How do I make all the text start at the top independantly of the other columns?
You must set a vertical align (vertical-align in CSS, or valign in HTML):
<td valign="top">
OR
<td style="vertical-align: top">
How do I make a HTML table to be bigger than the default page size
You can give width more than 100%
td {vertical-align: top;}
<body>
<table border="1" style="border:2px solid black;width: 150%;">
<thead>
<tr>
<td>time</td>
<td>android_version</td>
<td>device_id</td>
<td>app_version</td>
<td>stacktrace</td>
<td>package</td>
</tr>
</thead>
<tbody>
<?php
//etc database stuff
while($row = mysql_fetch_assoc($result)) {
?>
<tr>
<td><?php echo $row['time'];?></td>
<td ><?php echo $row['android_version'];?></td>
<td ><?php echo $row['device_id'];?></td>
<td >some text</td>
<td >This is the part that is very long. The other text is centered based on the length of this.</td>
<td ><?php echo $row['package'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Can I use HTML5 elements to outline code on a "page" that uses a table for formatting? For Example:
<section id="posts">
<tr id="posts-title-row">
<header><td id="posts-title">
<h2>Latest Posts</h2>
</td></header>
</tr>
<tr id="posts-row">
<article><td>
<p>Maecenas faucibus mollis interdum.</p>
</td></article>
<article><td>
<p>Maecenas faucibus mollis interdum.</p>
</td></article>
<article><td>
<p>Maecenas faucibus mollis interdum.</p>
</td></article>
</tr>
</section>
In general, I understand that this is extremely poor form, but until email clients (esp. Gmail) support CSS3 formatting of emails, there is little other option, except to use tables to format HTML emails (e.g. newsletters). However for my own semantic peace of mind, I'd like to use < section >, < article > and < header > type elements to organize things.
If it's the semantics you care about you could just use the ARIA roles defined for <section> and <article> on the existing elements:
<table id="posts" aria-role="region">
<tr id="posts-title-row">
<td id="posts-title" aria-role="banner">
<h2>Latest Posts</h2>
</td>
</tr>
<tr id="posts-row">
<td aria-role="article">
<p>
Maecenas faucibus mollis interdum.
</p>
</td>
<td aria-role="article">
<p>
Maecenas faucibus mollis interdum.
</p>
</td>
<td aria-role="article">
<p>
Maecenas faucibus mollis interdum.
</p>
</td>
</tr>
</table>
You can, but you have the elements in the wrong place. They need to be inside the <td>s. You also need to wrap the entire table in a <table>
<section id="posts">
<table>
<tr id="posts-title-row">
<td id="posts-title">
<header>
<h2>Latest Posts</h2>
</header></td>
</tr>
<tr id="posts-row">
<td>
<article>
<p>
Maecenas faucibus mollis interdum.
</p>
</article></td>
<td>
<article>
<p>
Maecenas faucibus mollis interdum.
</p>
</article></td>
<td>
<article>
<p>
Maecenas faucibus mollis interdum.
</p>
</article></td>
</tr>
</table>
</section>
Well, you can use HTML5 tags with table formatting as long as your e-mail service accept it. However, you can try using CSS (note that I haven't said CSS3) to give style to your page. And always remember inline styles!
Using table formatting in 2013 is like going in carriage to work, but when talking about e-mail services it still being the town sheriff.
Good luck!
I have created an email newsletter for a client and the contents display correctly in my browser when testing the page and in Hotmail when opening the email. However, Gmail is consistently displaying the page incorrectly. I have a two-column layout, and the left column is just fine. The right column, however, does not contain the contents - they are instead placed off to the right outside the cell (as shown by using Chrome's developer tools). This happens no matter what the contents are. I've tried viewing it in Gmail through Firefox and still get the error. I'm stumped.
I read these two pages trying to get some help, but neither one addresses why the contents of a cell would display outside of it. It's the column with the Lorem Ipsum that is not displaying correctly. Here's what it should look like: http://www.murraysampson.net/michele/newsletter.html
And displayed incorrectly:
http://cl.ly/2e3D0z3A432g3r1x1a31
Here's my table:
<table width="900" height="541" border="0" cellpadding="0" cellspacing="0" style="border:solid thin">
<tr>
<td colspan="2"><div align="center"><img src="http://www.murraysampson.net/michele/header.jpg" alt="Header" width="875" height="114" /></div></td>
</tr>
<tr>
<td height="24" colspan="2" style="padding:0px; border-top:solid thin; border-bottom:solid thin"><p style="float:left; pading-top:10px; padding-bottom:0px; margin-top:10px; marging-bottom:0px"><span style="font-family: arial; color: #FF6600; margin-left:15px">An occasional snapshot of our activities</span></p><p style="float:right; pading-top:0px; padding-bottom:0px; margin-top:10px; marging-bottom:0px;font-family: arial; color: #666666;"><span style="margin-right:15px">January 2012</span></p></td>
</tr>
<tr>
<td width="574" height="600"><img src="http://www.murraysampson.net/michele/content.jpg" width="560" height="500" style="padding-top:0px; margin-left:15px" /></td>
<td width="326"><span style="font-family: arial; color: #FF6600; margin-right:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tellus metus, facilisis in tincidunt in, sodales id turpis. Quisque bibendum risus eget odio ultricies accumsan. Vivamus vitae venenatis nulla. Fusce sed nisl eu libero bibendum tincidunt quis sed sapien. In sed est vel ante venenatis scelerisque at at nulla. In hac habitasse platea dictumst. Mauris at tortor lorem, vehicula vestibulum erat. Aliquam ut odio nunc, in volutpat risus.</span>
<img src="http://www.murraysampson.net/michele/signature.jpg" alt="Signature" width="170" height="62" align="bottom" /><img src="http://www.murraysampson.net/michele/portrait.jpg" alt="Portrait" width="114" height="154" align="top" /></td>
</tr>
</table>
I had this problem even after adding the "display:block" thing, and here's how I solved it:
If the contents of cells are too big for the column width, they cause them to enlarge. Most of my text was on the large side, so I thought maybe the non-breaking spaces I had added to empty table cells was the issue. I added a "font-size:9px" attribute to the table, so that the non-breaking spaces would be smaller. This fixed the problem.
This question has been asked before.
Here is the answer from that question from mahalie:
The specific answer to your question is that Gmail adds extra space to
table cells which only contain an image. To fix this add
style="display:block" to these images.
Campaign Monitor is a great resources, as is Mailchimp.com. Both
provide several guides, template examples etc.
So, working on a "simple" website (XHTML and CSS) formatted using a table, I ran into this nagging little issue with text rendering outside of a cell in IE8. It renders properly in all other browsers tested, as well as in IE8 with compatibility mode; I just can't make heads or tails of it. I've gone ahead and uploaded a stripped down version of the page to http://olypen.com/yourface/f7u14/ to show what I mean. The text in question is the main data frame <td id="mainbody">, it renders sticking out to the right on the frame.
Any suggestions would be greatly appreciated; this was one of those projects that started as, "Hay, he knows how to write web pages; he'll be able to completely re-do our site. How hard can it be, I've been doing it myself in Frontpage for years." and it just went downhill from there. From what I can see it looks as though once I get this figured out I'll be done with it (for now, insert dramatic music: dun dun dun).
Thanks,
Richard
Here's my code if anyone wants to have a crack as slugging through it:
Page:
<!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=ISO-8859-1" />
<link rel="stylesheet" href="css/default.css" type="text/css" title="default" />
<title>Y U NO WORK IN IE8?</title>
</head>
<body>
<table border="0" id="formatting">
<tr>
<td colspan="2" id="header">
<!--headerstuff-->
<h1><img src="images/y-u-no.jpg" height="100px" alt="Y U NO" />Y U NO WORK?</h1><br />
</td>
</tr>
<tr>
<td rowspan="2" id="leftbar">
<!--left navbar-->
<div align="center">
<table id="leftlinks"><tbody>
<tr>
<td><span style="font-variant: small-caps; font-size:16px;">H</span>ome</td>
</tr>
<tr>
<td><span style="font-variant: small-caps; font-size:16px;">O</span>ur <span style="font-variant: small-caps; font-size:16px;">S</span>ervices</td>
</tr>
<tr>
<td><span style="font-variant: small-caps; font-size:16px;">T</span>echnical <span style="font-variant: small-caps; font-size:16px;">S</span>upport</td>
</tr>
<tr>
<td><span style="font-variant: small-caps; font-size:16px;">A</span>bout <span style="font-variant: small-caps; font-size:16px;">U</span>s</td>
</tr>
</tbody></table>
</div>
<!--end of left navbar-->
</td>
<td id="bgformattingwide">
<div align="center">
<!--Top Navlinks-->
<table id="navlinks-table"><tbody>
<tr>
<td id="navlinks"><span style="font-variant: small-caps; font-size:16px;">H</span>ome</td>
<td id="navlinks"><span style="font-variant: small-caps; font-size:16px;">O</span>ur <span style="font-variant: small-caps; font-size:16px;">S</span>ervices</td>
<td id="navlinks"><span style="font-variant: small-caps; font-size:16px;">T</span>echnical <span style="font-variant: small-caps; font-size:16px;">S</span>upport</td>
<td id="navlinks"><span style="font-variant: small-caps; font-size:16px;">A</span>bout <span style="font-variant: small-caps; font-size:16px;">U</span>s</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
<tr>
<td id="mainbody">
<!-- main data frame -->
<br />
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit eros
at risus varius a lacinia risus porttitor. Pellentesque quis tristique elit. Sed
hendrerit nulla ac mi aliquet porta. Suspendisse non leo lectus. Fusce tristique
laoreet magna in porttitor. Morbi nunc mi, bibendum nec faucibus nec, aliquet eget
ante. Quisque placerat ipsum sit amet nulla porttitor quis accumsan nisl mollis.
Proin elit leo, adipiscing nec congue id, suscipit ut risus. Nunc vitae odio nisl.
Curabitur varius dictum eros placerat porta. Donec vestibulum urna sed sem facilisis
varius. Donec id ante justo. Mauris condimentum tristique justo vitae dapibus. Donec
mattis tristique accumsan. Suspendisse condimentum lacinia lobortis. In hac habitasse
platea dictumst. Sed id tortor eu purus rutrum adipiscing.
</p>
<!--end of main data frame -->
</td>
</tr>
<tr>
<td colspan="2" id="footer-frame">
<!--Copyright Notice-->
Content Copyright © 2011, <a href="http://deafmutetech.com/">Deaf-Mute
Technologies</a>. All Rights Reserved.
</td>
</tr>
</table>
</body>
</html>
And here's my CSS:
body{font-family: Arial;font-size: 12px;cursor: default;color: #000;background-color:#FFFFFF;}
img{border: 0px;}
#formatting {border-spacing: 15px 15px;width: 100%;height: 100%;}
#header {text-align: center; height: 170px;padding-top: 15px;background:
#CCCCCC; border: 5px solid #000000;}
#navlinks-table {border-spacing: 5px 0px;}
#navlinks {text-align: center;width: 200px;padding-left: 0px;padding-right: 0px; background : #FFFFFF;border: 2px solid #000000;}
#navlinks a{font-family: Arial;font-size: 18px;color: #000000;}
#mainbody {text-align:center;vertical-align:top;padding-left:5%;padding-right:5%;width: 82%;background: #CCCCCC;border: 5px solid #000000;min-width: 840px;}
#footer-frame{padding-top: 10px;text-align: center;height: 2%;background: #CCCCCC;border: 3px solid #000000;}
h3{font-family: Arial;font-size: 18px;color: #000000;font-weight: bold;}
a{font-family: Arial;font-size: 16px;color: #000000;text-decoration: none;}
a:link{font-family: Arial;font-size: 16px;font-weight: bold;color: #000000;}
a:visited{font-family: Arial;font-size: 16px;font-weight: bold;color: #000000;}
a:hover{font-family: Arial;font-size: 16px;font-weight: bold;color: #000000;text-decoration: underline;}
#bgformattingwide {text-align: center;height:1%;min-width: 840px;padding-top:5px;padding-bottom: 5px;}
#bgformattingtall {width: 1%;}
#leftbar {border: 5px solid #000000; background: #cccccc;width: 17%;min-width: 210px;vertical-align: top;}
#leftlinks td {text-align: center;width: 200px;padding-left: 5px;padding-right: 5px;background : #FFFFFF;border: 2px solid #000000;}
#leftlinks {border-spacing: 5px 15px;}
#leftlinks a{font-family: Arial; font-size: 18px;color: #000000;}
I changed mainbody's padding from percent to pixels, and that seems to render correctly in IE8.
It seems that the problem of computed padding in a table-cell is a known bug in IE8, see here: http://jhop.me/ie8-bugs: "Computed width of a content area of a table-cell isn’t re-calculated when a padding (percentage) value is applied", with an example here: http://jhop.me/tests/bugs/ie8/tablecell-computedwidthpadding.html