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
Related
I'm coding emails using adobe CRM and HTML 5 and CSS.
I have a problem with Vertical-Align:Middle it's working fine in Outlook but when forward email to gmail it's not working it's like it adds a space in my image table.
this my code
table
{
border-spacing : 0;
border-collapse : collapse;
margin: 0 auto;
}
td
{
padding: 0;
}
<table width="680" cellspacing="0" cellpadding="0" align="center">
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img alt="" src="1.png" style="vertical-align:middle;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td><img alt="" src="2.png" style="vertical-align:middle;"></td>
<td>
<img alt="" src="3.png" style="vertical-align:middle;"></td>
<td>
<img alt="" src="4.png" style="vertical-align:middle;"></td>
<td>
<img alt="" src="5.png"style="vertical-align:middle;"></td>
<td>
<img alt="" src="6.png" style="vertical-align:middle;">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img alt="" src="7.png" style="vertical-align:middle;">
</table>
Dont know why it's not working for Gmail and it's working fine for Outlook...
Can someone help me please ?
thanks
I have an email template I created but I can't seem to figure out what is stretching out the table, I've attached a screenshot for reference. Any help would be wonderful.
Here's the code for that part of the template:
<tr>
<td style="width:27px;height:53px;display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
<td style="width:31px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:24px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:25px;height:53px;display:block;float:left;padding:0;margin:0;"> <img src="#" />
</td>
<td style="width:518px;height:53px;display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
</tr>
<tr>
<td style="display:block;float:left;padding:0;margin:0;">
<img src="#" />
</td>
</tr>
Instead of float, use the html align="left" in your table cells. You don't need display:block; in the table cells, instead put it in your image tags.
Also, remove all the css width and height in your table cells and replace it with the html width="" and height=""
Also, if you put this in your table tag: border="0" cellpadding="0" cellspacing="0", you don't need the padding and margin in your table cell css.
Basic example of all combined:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="31" height="53" align="left">
<img alt="" src="" width="31" height="53" border="0" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
Note - align left is default, so it is not really needed.
I'm having what seems to be a basic CSS issue.
I have a table within a table, and the imbedded table is there to contain a sliced image to support a rollover graphic change.
The second row of the imbedded table is getting a space between the first row and itself.
Here is the HTML Markup:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th class="appResourceHead text14px textBold">Parametric Search</th>
</tr>
<tr>
<td class="appResourceBodyNoPad text12px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_01.png" width="163" height="132" style="border-style: none;" />
</a>
</td>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_02.png" width="67" height="132" style="border-style: none;" />
</a>
</td>
</tr>
<tr>
<td> <a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="http://www.centralsemi.com/centralSemi/images/Parametric_Search_03.png" width="163" height="48" style="border-style: none;" />
</a>
</td>
<td><a href="http://web.centralsemi.com/paraSearch/parametricSearch_v1_1.php">
<img src="/centralSemi/images/Parametric_Search_04.png" rel="/centralSemi/images/Parametric_Search_Down_04.png" class="rollover" width="67" height="48" style="border-style: none;" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have the following jsfiddle to show you my markup in action.
http://jsfiddle.net/5bZtz/
When looking at the table in Firefox and Chrome I don’t have the space, but in IE the space is shown like you can see in the jsfiddle example.
Simple add below code in your css,
td {
line-height:0;
}
I update your fiddle here. Kindly see it works ! http://jsfiddle.net/5bZtz/1/
Good Luck ..)
Add to <img ... /> css properties: display:block; and height:132px;
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;
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!