I have a website that has a footer. The footer is a simple gray background. I want to center some absolutely sized content in that footer. In an effort to do this, I tried the following:
<div style="background-color:gray; font-size:10pt; width:100%;">
<div style="margin-left:auto; margin-right:auto; text-align:center;">
<table border="0" cellpadding="0" cellspacing="0" style="width:800px; padding:8px 0px; text-align:center;">
<tr>
<td><img alt='' height="75" width="75" src="/images/img1.png" /></td>
<td><img alt='' height="75" width="75" src="/images/img2.png" /></td>
<td style="text-align:center; color:White;"><table border="0" cellpadding="0" cellspacing="0" style="text-align:center; width:100%;">
<tr><td>
<a href='index.html'>HOME</a> |
<a href='about.html'>ABOUT</a> |
<a href='contact.html'>CONTACT US</a>
</td></tr>
<tr><td>123 Pine Street | City, State 12345 | 1-800-555-5555</td></tr>
<tr><td style="font-size:8pt;">Copyright Company, Inc. | All Rights Reserved</td></tr>
</table></td>
<td><img alt='' height="75" width="75" src="/images/img3.png" /></td>
<td><img alt='' height="75" width="75" src="/images/img4.png" /></td>
</tr>
</table>
</div></div>
Why won't my 800px table center within the footer?
Thank you!
You need to set the width of the second nested div to 800px for the auto margin to work. Right now it's the same width as the containing div so the margin has no effect. You can also put auto margins on the table as the other answers point out.
text-align doesn't apply to the table itself. Try margin: auto on the table.
A really simple example:
<table style="background: #0f0; width: 800px; margin: auto"><tr><td>content</td></tr></table>
remove the div around the table and add the following style to the table:
margin: 0 auto;
Related
<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>
I'm trying to code a a mailing to my clients and i thought that i can insert a gif countdown clock (only the numbers) on top of an another image (i know i can do a gif with a custom background, but the message is too heavy then). Every e-mail client (web or desktop) respects the display:block and margins apart from GMAIL. It displays images one after another.
Is there a way to solve it? Pls help
The table code looks something like that:
<table align="center" width="652" bgcolor="#f5f5f5" cellpadding="0" cellspacing="0" border="0" style="background:#f5f5f5; border:none; margin-top: -95px;">
<tr width="650" height="95" cellpadding="0" cellspacing="0" border="0" style="">
<td width="134" height="95" cellpadding="0" cellspacing="0" border="0" style="border-left: 1px solid #afafaf;"colspan="3">
<a href="link" border="0" style="border:none;">
<img src="3.jpg" border="0" width="134" height="95" style="width:134px; height:95px; border:none; display:block;" alt="alt">
</a>
</td>
<td width="381" height="95" cellpadding="0" cellspacing="0" border="0" style=""colspan="3" bgcolor="#000">
<a href="link" border="0" style="border:none;">
<img src="4.jpg" border="0" width="381" height="95" style="width:381px; height:95px; border:none; display:block;" alt="">
</a>
</td>
<td width="135" height="95" cellpadding="0" cellspacing="0" border="0" style="border-right: 1px solid #afafaf;"colspan="3">
<a href="link" border="0" style="border:none;">
<img src="5.jpg" border="0" width="135" height="95" style="width:135px; height:95px; border:none; display:block;" alt="alt">
</a>
</td>
</tr>
</table>
And Gmail displays one image under another, and doesent respect minus margins.
It looks like this right now:
It looks like this right now
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/
I tried to send simple newsletter using oscommerce platform and the content is simple table with few images. Before i send the preview look good (no cellspacing or cellpadding)
Preview:
But after I receive and open using gmail :
you can see the table is different; I mean the white border.
Here is code for generate table and content for newsletter .
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter/Newsletter.jpg" style="width: 950px; height: 1187px;" /></td>
</tr>
<tr>
<td><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter2.jpg" style="width: 950px; height: 114px;" /></td>
</tr>
<tr>
<td><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter3.jpg" style="width: 950px; height: 158px;" /></td>
</tr>
<tr>
<td><img alt="" src="http://www.sfbeautyskin.com/uploads/image/Newsletter4.jpg" style="width: 950px; height: 440px;" /></td>
</tr>
</tbody>
</table>
The question is how to completely remove border property.
I've had a similar problem with emails before. If I remember correctly, I fixed it by making the image (or try 'a' tag) inside the td use display: block.
Try something like this:
<td><img alt="" style="display: block;" src="http://www.sfbeautyskin.com/uploads/image/Newsletter/Newsletter.jpg" style="width: 950px; height: 1187px;" /></td>
Add style="line-height:0" for each td
<td style="line-height:0"><img ... /></td>
On each of your tr, td and img elements, add style="margin:0;padding:0;"
Or just delete your table all together. They seem to serve no purpose.
Now Define your img tag vertical-align:top
<img src="some.jpg" style="vertical-align:top;" />
Demo
--------
Check the fiddle.
http://jsfiddle.net/tuD6L/12/
margin: -5px 0;
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!