<body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;">
<tr>
<td width="100%" valign="top">
<table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth">
<tr>
<td><img src="spacer.gif" width="100%" height="30" alt="" /></td>
</tr>
</table>
<!-- More tables with content -->
</td>
</tr>
</table>
</body>
I've done a lot of testing on this and research. I believe that I am doing this correctly however when I go to test it expecting the table to be centered in yahoo it isn't!
The fix is supposed to be putting table-layout: fixed; on the outer table with 100% width on.
which I've done.
So can anyone spot what I've done wrong here to not make this work?
Cheers
The code below should fix it. Your email code just needs a few more CSS resets.
<html>
<head>
<style>
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
</style>
</head>
<body bgcolor="#f6f6f6" style="background:#f6f6f6; border:0; color:#9e9e9e; margin:0; padding:0;">
<center style="width: 100%; background: #f6f6f6;">
<!-- Your Email Code Begins Here -->
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" bgcolor="#f6f6f6" style="table-layout: fixed; margin: 0 auto; background:#f6f6f6;">
<tr>
<td width="100%" valign="top">
<table cellpadding="0" cellspacing="0" bgcolor="#f6f6f6" border="0" align="center" width="600" class="fullWidth">
<tr>
<td><img src="spacer.gif" width="100%" height="30" alt="" /></td>
</tr>
</table>
<!-- More tables with content -->
</td>
</tr>
</table>
<!-- Your Email Code Ends Here -->
</center>
</body>
</html>
Related
I keep trying all the fixes I could find either on here or Litmus, but none work. I have tried adding the border-collapse: collapse; attribute to no avail. I also tried setting the line-height the same as the img height but got the same result. All the images in email don't have that problem, only the row where I have two GIFS side by side is where the problem arise. The issue happens only on Outlook. When viewed on a browser the email renders fine.
Here is a snipbit from the HTML code:
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="row ee_columns two-cols ee_nostack ee_element" ee-type="container" data-title="Columns" style="max-width: 660px; position: relative; background-color: rgb(255, 255, 255); --darkreader-inline-bgcolor:#181a1b; table-layout: auto;" role="presentation" data-darkreader-inline-bgcolor="">
<tbody>
<tr>
<td align="center" valign="top" class="row-inner f-size-0 element-pad" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;">
<!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:660px;" width="660"><tr><td><![endif]--><div class="no-stack-column no-stack-column-width" ee-percent-width="50" style="max-width: 50%; min-width: 50%; width: 50%;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="table-layout: auto;" role="presentation">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="col-font-reset ee_element ee_imageelement" ee-type="element" data-title="Image" role="presentation" style="table-layout: auto;"><tbody><tr><td align="left" class="element-pad element-bord" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; font-size: 1px; line-height: 305px;"><img src="https://i.emlfiles.com/cmpimg/7/2/7/8/0/2/files/1239793_gif1.gif" width="330" alt="" style="width: 100%; display: block; max-width: 100%; min-height: auto; height: auto;" class="ee_editable" border="0"> </td></tr></tbody></table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]></td><td align="left" valign="top" style="width:330px;" width="330"><![endif]--><div class="no-stack-column no-stack-column-width" style="max-width: 50%; min-width: 50%; width: 50%;" ee-percent-width="50">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="table-layout: auto;" role="presentation"><tbody><tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="col-font-reset ee_element ee_imageelement" ee-type="element" data-title="Image" role="presentation" style="table-layout: auto;"><tbody><tr><td align="left" class="element-pad element-bord" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; font-size: 1px; line-height: 305px;"><img src="https://i.emlfiles.com/cmpimg/7/2/7/8/0/2/files/1239794_gif2.gif" width="330" alt="" style="width: 100%; display: block; max-width: 100%; min-height: auto; height: auto;" class="ee_editable" border="0"> </td></tr></tbody></table>
</td>
</tr></tbody></table>
</div><!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
I have used Sendgrid to make the following template:
To send this using my Node server I have created the following module:
/**
* Created by root on 6/6/16.
*/
var path = require('path'),
emailTemplates = require('email-templates'),
async = require("async"),
mailConfig = require('../config/email.json'),
templates = require('../config/emailTemplates.json'),
_ = require('lodash'),
sendgrid = require('sendgrid')(mailConfig.sendGridApiKey);
var mymailer = {};
/**
* Sends an email to either one or multiple users
* #param template_id (The id key of the template. Can be found in emailTemplates.json
* #param to String or Array
* #param from String
* #param subject String
* #param keyReplacer Array of objects for keys to replace in the template
*/
mymailer.sendTemplate = function (template_id, to, from, subject, keyReplacer, text) {
var email = new sendgrid.Email();
var templateKey = templates[template_id];
if (templateKey) {
email.setSmtpapiTos(to);
email.subject = subject;
email.from = from;
email.text = text;
email.html = '';
email.setFilters({
'templates': {
'settings': {
'enable': 1,
'template_id': templateKey
}
}
});
email.smtpapi.header.sub = createSub(keyReplacer);
sendgrid.send(email);
}
else {
console.log('incorrect key');
}
};
function createSub(keyReplacer) {
var finalObject = {};
if (keyReplacer) {
_.forEach(keyReplacer, function (value, key) {
var k = ':' + key;
finalObject[k] = [value];
})
}
return finalObject;
}
module.exports = mymailer;
However when I receive my email it is stripped from both CSS and images.
It looks like this:
I guess it's some settings I'm missing but I don't know which. Which ones can I try?
Template html
<!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" data-dnd="true">
<head>
<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" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--<![endif]-->
<!--[if (gte mso 9)|(IE)]><style type="text/css">
table {border-collapse: collapse;}
table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
img {-ms-interpolation-mode: bicubic;}
</style>
<![endif]-->
<style type="text/css">
body {
color: #000000;
}
body a {
color: #0071cb;
text-decoration: none;
}
p { margin: 0; padding: 0; }
table[class="wrapper"] {
width:100% !important;
table-layout: fixed;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
img[class="max-width"] {
max-width: 100% !important;
}
#media screen and (max-width:480px) {
.preheader .rightColumnContent,
.footer .rightColumnContent {
text-align: left !important;
}
.preheader .rightColumnContent div,
.preheader .rightColumnContent span,
.footer .rightColumnContent div,
.footer .rightColumnContent span {
text-align: left !important;
}
.preheader .rightColumnContent,
.preheader .leftColumnContent {
font-size: 80% !important;
padding: 5px 0;
}
table[class="wrapper-mobile"] {
width: 100% !important;
table-layout: fixed;
}
img[class="max-width"] {
height: auto !important;
}
a[class="bulletproof-button"] {
display: block !important;
width: auto !important;
font-size: 80%;
padding-left: 0 !important;
padding-right: 0 !important;
}
// 2 columns
#templateColumns{
width:100% !important;
}
.templateColumnContainer{
display:block !important;
width:100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
</style>
<style>
body, p, div { font-family: arial,sans-serif; }
</style>
<style>
body, p, div { font-size: 14px; }
</style>
</head>
<body yahoofix="true" style="min-width: 100%; margin: 0; padding: 0; font-size: 14px; font-family: arial,sans-serif; color: #000000; background-color: #0071CB; color: #000000;" data-attributes='%7B%22dropped%22%3Atrue%2C%22bodybackground%22%3A%22%230071CB%22%2C%22bodyfontname%22%3A%22arial%2Csans-serif%22%2C%22bodytextcolor%22%3A%22%23000000%22%2C%22bodylinkcolor%22%3A%22%230071cb%22%2C%22bodyfontsize%22%3A14%7D'>
<center class="wrapper">
<div class="webkit">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#0071CB">
<tr><td valign="top" bgcolor="#0071CB" width="100%">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" role="content-container" class="outer" data-attributes='%7B%22dropped%22%3Atrue%2C%22containerpadding%22%3A%220%2C0%2C0%2C0%22%2C%22containerwidth%22%3A600%2C%22containerbackground%22%3A%22%23FFFFFF%22%7D' align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center">
<tr><td role="modules-container" style="padding: 0px 0px 0px 0px; color: #000000; text-align: left;" bgcolor="#FFFFFF" width="100%" align="left">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0;" class="module preheader preheader-hide" role="module" data-type="preheader">
<tr><td role="module-content"><p></p></td></tr>
</table>
<table class="module" role="module" data-type="wysiwyg" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td role="module-content" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div><%body%></div></td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module wrapper" role="module" data-type="imagetext" data-attributes='%7B%22dropped%22%3Atrue%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22textbackground%22%3A%22%23ffffff%22%2C%22textmargin%22%3A%220%2C0%2C0%2C0%22%2C%22imagealignment%22%3A%22left%22%7D'>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr role="module-content">
<td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="leftColumnContent" role="column-one" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table role="module" data-type="image" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" class="wrapper" data-attributes='%7B%22child%22%3Atrue%2C%22link%22%3A%22%22%2C%22width%22%3A%22250%22%2C%22height%22%3A%22333%22%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22url%22%3A%22https%3A//marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg%22%2C%22alt_text%22%3A%22%22%2C%22dropped%22%3Atrue%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22alignment%22%3A%22%22%2C%22responsive%22%3Afalse%7D'>
<tr>
<td style="font-size:6px;line-height:10px;background-color:#ffffff;padding: 0px 0px 0px 0px;" valign="top" align="" role="module-content">
<img class="max-width" width="250" height="333" src="https://marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg" alt="" border="0" style="display: block; color: #000; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; " />
</td>
</tr>
</table></td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" >
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="rightColumnContent" role="column-two" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
<td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div>Hello world</div> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A2%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22cellpadding%22%3A0%2C%22containerbackground%22%3A%22%22%7D'>
<tr><td style="padding: 0px 0px 0px 0px;" bgcolor="">
<table class="columns--container-table" border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr role="module-content">
<td style="padding: 0px 0px 0px 0px" role="column-0" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area empty">
</td><td style="padding: 0px 0px 0px 0px" role="column-1" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area ">
<table class="module" role="module" data-type="button" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22borderradius%22%3A6%2C%22buttonpadding%22%3A%2212%2C18%2C12%2C18%22%2C%22text%22%3A%22Your%20Bulletproof%20Button%22%2C%22alignment%22%3A%22center%22%2C%22fontsize%22%3A16%2C%22url%22%3A%22%22%2C%22height%22%3A%22%22%2C%22width%22%3A%22%22%2C%22containerbackground%22%3A%22%23ffffff%22%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22buttoncolor%22%3A%22%231188e6%22%2C%22textcolor%22%3A%22%23ffffff%22%2C%22bordercolor%22%3A%22%231288e5%22%7D'>
<tr>
<td style="padding: 0px 0px 0px 0px;" align="center" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile">
<tr>
<td align="center" style="-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size: 16px;" bgcolor="#1188e6">
Your Bulletproof Button
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module footer" role="module" data-type="footer" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A1%2C%22padding%22%3A%2210%2C5%2C10%2C5%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr><td style="padding: 10px 5px 10px 5px;" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr role="module-content">
<td align="center" valign="top" width="100%" height="100%" class="templateColumnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td class="leftColumnContent" role="column-one" height="100%" style="height:100%;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Afalse%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'>
<tr>
<td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
This email was sent by: [Sender_Name] [Sender_Address], [Sender_City] [Sender_State] [Sender_Zip]
</div>
<div style="font-size:12px;line-height:150%;margin:0;text-align:center;">
To unsubscribe click: here
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
</tr></td>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</td>
</table>
<![endif]-->
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</tr></td>
</table>
</div>
</center>
</body>
</html>
The problem with your code is, email clients does not support embedded css. Therefore all styles that you need must be inline with the tag. Also ugly as it might be, but the best way to layout an email template is by using tables.
However, here are some things that might help you with this problem.
TIPS
This will not work:
<style media="screen">
h1{
color: red;
}
</style>
<h1>I like turtles</h1>
This will work:
<h1 style="color:red;">I like turtles</h1>
HELPFUL SOURCES
You can read this to know more about creating email templates.
Source 1
Source 2
Also, there are some inliner out there that will convert your embedded css to inline css. Personally I am using Zurb's email inliner to solve this problem.
That's all I can say, I hope this will get you somewhere. Good luck :)
I had this problem, I fixed it by changing
Content content = new Content("text/plain", notification.getContent());
To
Content content = new Content("text/html", notification.getContent());
I am working on an email template so my options are limited to tables.
I need a way to achieve the following using tables
All content is generated dynamically via RSS feed so I cannot use images.
Here's what I have so far
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="banner"><tbody><tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody><tr>
<td width="100%">
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody><tr>
<!-- start of image --><td align="center"> *|FEEDBLOCK:http://domain.com/feed/|* *|FEEDITEMS:[$count=1]|*
<a target="_blank" href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a>
</td>
</tr></tbody></table>
<!-- end of image -->
</td>
</tr>
<tr>
<td width="100%">
<table width="150" align="left" bgcolor="#ff4800" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody><tr>
<!-- start of title --><td align="left">*|FEEDITEM:TITLE|*</td>
</tr>
<tr>
<!-- start of content -->
<td align="left" bgcolor="#ffffff">*|FEEDITEM:CONTENT|* </td>
</tr>
</tbody></table>
<!-- end of title -->
</td>
</tr>
<!-- Spacing -->
<tr><td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td></tr>
<!-- Spacing -->
</tbody></table>
</td>
</tr></tbody></table>
Yes you can always do that. I have tried to get some similar kind of layout with respect to the screen-shot in your post.
You may check this code
<html>
<head>
<title>My Layout</title>
<style type="text/css">
table{
border:1px solid #c4c4c4;
}
td{
border:1px solid #c4c4c4;
}
#table1{
width: 800px;
}
.table1-td-left{
height:400px;
width:200px;
background-color: green;
}
.table1-td-right{
width:600px;
background-color: yellow;
}
.table2-td-left{
background-color: red;
width: 200px;
}
.table2-td-right{
background-color: blue;
width: 300px;
}
</style>
</head>
<body>
<table id="table1">
<tr>
<td class="table1-td-left">LHS</td>
<td class="table1-td-right">
<table id="table2">
<tr>
<td class="table2-td-left">Content # 1</td>
<td class="table2-td-right">Content # 2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You may also see this Fiddle Demo.
Basically you need to table within td.
This can be achieved, however, know that background images are not supported in Outlook 2003, 2007, and 2013. If you are not looking to support those email clients here is how you can achieve this. Disclaimer: this should be tested in Litmus or Email on Acid to verify the email clients you wish to support are producing the results you intended.
<table width="620" height="400" cellspacing="0" cellpadding="0" border="0" background="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png">
<tbody>
<tr>
<td align="left" valign="top" style="padding-top: 75px;">
<table width="200" bgcolor="#dddddd" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td><h2>Title</h2></td>
</tr>
<tr>
<td><p>Some text</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
You can also view it here: http://jsfiddle.net/fcpz1um2/
using the backgrounds.cm method, you can do something like below sample and it should work in about 99% of email clients. It will need media queries and such to make it responsive, but should render consistently - even in ALL Outlooks.
<table width="620">
<tr>
<td background="http://i.stack.imgur.com/dDVdU.png" bgcolor="#EFEFEF" width="100%" height="300" valign="top" style="-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center; background-image:url(http://i.stack.imgur.com/dDVdU.png); background repeat: no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;height:250px;">
<v:fill type="frame" src="http://i.stack.imgur.com/dDVdU.png" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="text-align:left;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="34" style="font-size:1px; mso-line-height-rule:exactly; line-height:1px;"> </td>
</tr>
</table>
<table align="left" width="230" cellpadding="0" cellspacing="0" border="0" style="vertical-align:bottom; max-width:430px;">
<tr>
<td style="padding-left:5px;">
<table align="left" bgcolor="red" width="100%" cellpadding="0" cellspacing="0" border="0" style="vertical-align:bottom; max-width:430px;">
<tr>
<td style="color:#FFFFFF; font-size:67px; line-height:80px; padding:5px;">30% <span style="font-size:40px;">Off</span></td>
</tr>
<tr>
<td bgcolor="#000000" style="color:#FFFFFF; padding:5px;">HURRY UP! GRAB YOUR BITE</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
I have this table at the top of my page...
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed; z-index:99999;">
<tr>
<td><img src="logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
</table>
it always stays at the top of the page however when scrolling down, all the content on the page goes behind the table and you can see it behind
does anyone know what i can do to stop this from happening?
EDIT:
This is my full code...
<style type="text/css">
body,html {
height:100%;
}
#top-bar {
width:100%;
padding:10px 10px 80px 10px;
margin:0 0 100px 0;
border-bottom:solid 1px #000000;
top:0;
left:0;
}
#left-bar {
width:170px;
display:inline;
float:left;
}
#right-bar {
width:80%;
display:inline;
float:right;
}
</style>
</head>
<body>
<div id="top-bar">
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed">
<tr>
<td><img src="logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
</table>
</div>
<div id="left-bar"><iframe src="header.php" width="180px" height="100%" frameborder="0" scrolling="no"></iframe></div>
<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
</div>
</body>
You're most probably looking for this:
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
<tr>
<td><img src="logo.png" width="282" height="41" /></td>
<td align="right">Hello <?php echo $_SESSION["forename"]; ?> | Logout</td>
</tr>
</table>
The background-color makes sure you can't see any content that is behind the table.
JsFiddle: http://jsfiddle.net/CRHxk/
So, I have a predicament. My tabs are pushing down the content below it. Here is some of the code:
<div id="navigation">
<div id="test" class="blue">
<p>Home</p>
<p class="subtext">View/update contact information</p>
</div>
<div id="lessons" class="blue">
<p>Projects</p>
<p class="subtext">Create/open projects, view existing reports</p>
</div>
<div id="test" class="blue">
<p>Help</p>
<p class="subtext">If something doesn't work, click here</p>
</div>
</div>
<div id="contain3">
<table id="maintable" align="center" width="940" cellspacing="0" cellpadding="0" class="lessontablemain">
<tr align="center" valign="top">
<td height="500" cellpadding="0" cellspacing="0">
<!--<div id="maincontent">-->
<table align="left" cellspacing="4" cellpadding="4" style=" margin-top:10px; background-color:transparent; border: 0;" width="100%" class="textfont_charms">
<tr>
<td cellspacing="0" cellpadding="0" align="center" valign="top">
<br>
<!--template up-->
<!--side bar table below -->
<? include_once("sidebar.php"); ?>
</td>
<td cellspacing="0" cellpadding="0" width="100%" valign="top" align="center">
<table id="maintable" style=" margin-top:10px; background-color:transparent; border: 0;" cellspacing="0" cellpadding="0" height="100%" valign="top" width="100%">
<tr>
<td valign="top" align="center" width="100%" cellspacing="0" cellpadding="0" height="100%">
<div align="center" id="content" style="vertical-align: top;"></div>
</td>
</tr>
</table>
<!--template down-->
</div>
</td>
</tr>
</table>
</tr>
<tr valign="bottom">
<td style="background-color: #E2E2E2;">
<?
include('template/footer_tmpl.php');
?>
</td>
</tr>
</table>
</div>
Here is my css:
#contain3{
width:940px;
margin-left:auto;
margin-right:auto;
text-align:left;
/*position: absolute;*/
top: 137;
z-index: -1;
}
#navigation{
width:940px;
margin-left: 8px;
text-align:left;
font-family:"Lucida Grande","Lucida Sans",sans-serif;
font-size:12px;
top: 109;
/*position: absolute;*/
z-index: 2;
}
To see what I'm talking about, my site is: http://www.charmscorp.com/inspect/projects.php - click on the tabs up above. Don't mind the slowness of the site, it's a server issue... so you have to wait a few seconds for the tabs to initialize.
Also, as you can see, I commented out position absolute. I thought that would be the answer, but instead, it just put the tab div on top of the content... Please help, this is giving me a headache!
Instead of making the divs with class "blue" higher - and thus revealing the drop down - why don't you show() the paragraphs with class "subtext" themselves instead?
Have them set to display: none by default, and use JavaScript to reveal them. You'll need to set them to position: absolute also, so they don't push any content down.
ok, I fixed this. I made the position: absolute, and then margin-top:27px, which pushed the content div down to where I wanted it to be. Another problem arose though, which is IE related. I'll start a new thread for that one though, as it's a new problem. Thanks!