I am making a HTML newsletter and keep running into this problem. The image at the top for some reason ignores the margin and gives an ugly white line.
While this site says that email clients should accept margin's: http://www.campaignmonitor.com/css/
Does anyone know how to fix this?
Edit: new and cleaner code, but still same problem! I have no idea how to get that damn thing down. =/ (also my left border is gone now, and I don't know why)
<table cellspacing="0" cellpadding="0" width="811px" style="border:0px solid black;border-collapse:collapse">
<tr>
<td width="150px" VALIGN=TOP style="border-bottom: 1px solid #000000;">Nieuwsbrief #<?php echo $nr; ?></td>
<td width="500px" style="vertical-align: bottom;"><img src="http://pietrow.net/newsletter/images/lad_wide.png" style="z-index:-1;"></img></td>
<td width="150px" align="right" style="vertical-align: top; border-bottom: 1px solid #000000;" >Datum: <?php echo $datum; ?></td>
</tr>
<tr style="background: #DBDBDB; border: 1px solid #000000; border-top: 0px" width="811px">
<td width="270px"><center>Website</center></td>
<td width="271px"><center>Facebook</center></td>
<td width="270px"><center>Contact</center></td>
</tr>
<tr style="background: #DBDBDB; border:0px; border-left: 1px solid #000000; border-right: 1px solid #000000;" width="811px">
<td colspan="3" width="811px"><center>**ENGLISH VERSION BELOW**</center></td>
</tr>
<tr >
<td style="background: #DBDBDB; border: 1px solid #000000; border-bottom: 0px;" colspan="3" width="811px">
Remember with HTML emails you need to go very much 'old-school' as the email clients that render them are even more archaic than even old versions of IE.
Therefore, try to remember back to the days before DIVs and lovely CSS layouts, back to the days when tables were for layout...
Try adding:
cellpadding="0" cellspacing="0"
to your table declaration then consider putting your content in a table within the main table as opposed to two tables stacked on top of one another. Or, if you can, rationalise the three columns and create one single table.
You need display:block; on your image. Here is an example of how all images should look in html email:
<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="" height="" alt="">
Some additional notes:
You don't need <center>, use <td align="center"> instead.
You shouldn't use px in the width="" declarations. Example: width="150"
Declare background color only in a table or table cell using bgcolor method. Example: bgcolor="#DBDBDB"
Related
I'm very very new to html. I'm mostly copy-pasting bits of code as my framework and customizing it to make my emails work. I have this bit of code for my email, but I can't seem to get the opt-in button to center. I've tried reading other similar questions, but my knowledge of coding is that of a beginner, and I can't understand how their coding solutions, in which the code is slightly different, relates to my code to find a solution. I was adding style=text-align: center; in a few spots, but it wasn't working. There were other solutions, but I didn't quite understand how they would work in my code. I've been trying to fix this things for hours now. So very frustrated.
Other than the centering it works in the email.
<td valign="middle" style="text-align: center; padding: 0px 10px 10px
0px;">You've previously contacted us at Business Name. <br>We
are <b>only sending this email once</b> to our current client list to
invite you to join our new free monthly e-newsletter. <br>
style="text-align: center;
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr>
<td>
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td style="border-radius: 2px;" bgcolor="#018736">
<a href="https://www.businessname.com/community-
newsletter.html" target="_blank" style="padding: 10px 32px; border: 1px
solid #018736;border-radius: 2px;font-family: Helvetica, Arial, sans-
serif;font-size: 24px; color: #ffffff;text-decoration: none;font-
weight:bold;display: inline-block;">
OPT-IN
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>Grief is a difficult thing. If you choose not to join our free
monthly newsletter at this time we understand, but will not be sending
any other emails to you going forward. <br><br></td>
Use this code below:
<td valign="middle" style="text-align: center; padding: 0px 10px 10px
0px;">You've previously contacted us at Handsome Stitchery. <br>We
are <b>only sending this email once</b> to our current client list to
invite you to join our new free monthly e-newsletter. <br>
<table width="100%" cellspacing="0" cellpadding="0"><tbody><tr>
<td style="text-align:center;">
<table cellspacing="0" cellpadding="0" style="margin:0 auto;">
<tbody><tr>
<td style="border-radius: 2px;" bgcolor="#018736">
<a href="https://www.handsomestitchery.com/community-
newsletter.html" target="_blank" style="padding: 10px 32px; border: 1px
solid #018736;border-radius: 2px;font-family: Helvetica, Arial, sans-
serif;font-size: 24px; color: #ffffff;text-decoration: none;font-
weight:bold;display: inline-block;">
OPT-IN
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<br>Grief is a difficult thing. If you choose not to join our free
monthly newsletter at this time we understand, but will not be sending
any other emails to you going forward. <br><br></td>
Going off what you have, I think throwing style="text-align: center; on the <td> that your link button is in should do the trick. Also you might want to get rid of the other style="text-align: center; that is floating above the first tag, it is code that is showing up as text on your page.
Hi I've been working on a ASP.NET browser based game without any scripting.
There is a problem though when I try to use IF ELSE in a Razor file to generate HTML tags.
Here is the code:
<table width="400" height="400 " style="overflow: hidden; white-space: nowrap; table-layout:fixed;" class="field">
#for (var row = 0; row < Model.Field.RowCount; row++)
{
<tr>
#for (var column = 0; column < Model.Field.ColumnCount; column++)
{
var tile = Model.Field;
#if (tile.TileField[row, column].IsMarked)
{
<td style="border:1px solid black;">
}else{
<td style="border:2px solid black;">
}
<a href='/Tetravex/Move?row=#(row)&column=#(column)'>
<table width="100" height="100" style="transform:rotate(45deg); text-align:center;">
<tr style="border-bottom:1px solid black;">
<td style="border-right:1px solid black; transform:rotate(-45deg);"><p style="margin:0px;">#(tile.TileField[row, column].North)</p></td>
<td style="transform:rotate(-45deg);"><p style="margin:0px;">#(tile.TileField[row, column].East)</p></td>
</tr>
<tr>
<td style="border-right:1px solid black; transform:rotate(-45deg);"><p style="margin:0px;">#(tile.TileField[row, column].West)</p></td>
<td style="transform:rotate(-45deg);"><p style="margin:0px;">#(tile.TileField[row, column].South)</p></td>
</tr>
</table>
</a>
</td>
}
</tr>
}
</table>
I know the code isn't too clear, quite convoluted and there is probably a better way to do it, I'm just curious as to why this doesn't work. And don't worry about all the CSS properties rammed in there, I'll eventually clean that up.
The problem is that Visual Studio doesn't like that the <td> tag isn't closed inside the if statement and because of that the }else{ statement gets grayed out and ignored. Why is that?
Is there a simple way to remove or make invisible two characters from the beginning of a string using just html and css? You can keep for yourself the downvotes to the questions... I know it's a hack.
I'm using mailchimp to send abandoned cart reminder mails. The price of a product is displayed as
zl123
but I need to display it as
123 zl
I tried to change the settings of the money format, but I haven't found a solution, so I'll try to hack it in some other way. Mailchimp replaces automatically a placeholder so I have to process what they put instead of the price placeholder, I have no control on that.
I have an html mail template and I can use css with it but no javascript. If you know how to solve the format problem in the mailchimp settings directly it will also work of course. Any help is very appreciated.
This is the product list code and the tag is *|PRODUCT:PRICE|*:
*|ABANDONED_CART:[$total=3]|*
<table>
<tbody>
<tr>
<td rowspan="3" style="vertical-align:top" valign="top" width="80"><img src="*|PRODUCT:IMAGE_URL|*" /> </td>
<td style="padding: 10px 30px"><a class="ab-cart__name" href="*|CART:URL|*" target="_blank">*|PRODUCT:TITLE|*:</a></td>
</tr>
<tr>
<td style="padding: 10px 30px"><a class="ab-cart__price" href="*|CART:URL|*" target="_blank">*|PRODUCT:PRICE|*</a></td>
</tr>
<tr>
<td style="padding: 10px 30px">
<table cellpadding="0" cellspacing="0" style="background:#bed22c;">
<tbody>
<tr>
<td align="center" style="padding:9px 20px; padding-right:5px" valign="middle"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank"><img class="ab-cart__icon" data-file-id="1415814" height="13" src="https://gallery.mailchimp.com/6b8c9d4b13e018d718abc0a65/images/2226adf6-5cc3-4f24-aa98-39825c247c2c.png" width="14" /> </a></td>
<td style="padding:9px 0; padding-right:10px"><a class="ab-cart__button" href="*|CART:URL|*" target="_blank">Zobacz w koszyku </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
*|END:ABANDONED_CART|*
A hacky way will be fixing and repeating the word twice!
p {
font-size: 20px;
}
.hide-first-two {
text-indent: -0.75em;
overflow: hidden;
display: inline-block;
}
.show-first-two {
width: 0.75em;
overflow: hidden;
display: inline-block;
}
<p>
<span class="hide-first-two">zl123</span>
<span class="show-first-two">zl123</span>
</p>
Or using inline style:
<p style="font-size: 20px;">
<span style="text-indent: -0.75em; overflow: hidden; display: inline-block;">zl123</span>
<span style="width: 0.75em; overflow: hidden; display: inline-block;">zl123</span>
</p>
Considering your text lz123 comming form server and appened in
<p>lz123</p>
You can add text in this <p> by using ::after and ::before css selectors
But if is not possible to remove or manipulate that text in <p> using css
For string manipulation i suggest to use Javascript or Jquery
I am trying to keep a line of text in a cell from moving down to the next line, but when using white-space: nowrap; the image background that previously covered 100% of the screen is cutoff, as seen in this screenshot:
before and after:
This is the code for the background:
div.transbox {
margin: 0px;
width: 100%;
height: 100px;
background-image: url('http://almosthome2016.org/images/header_trans_bg.png');
}
and the html for the table:
<div class="transbox"><table width="100%" border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="3%" align="left" valign="bottom"></td>
<td align="left" valign="bottom" class="style74"><span class="style8">ALMOST HOME</span> <span class="style75">THE CAMPAIGN FOR THE NEW IRISH ARTS CENTER</span></td>
<td align="left" valign="bottom" class="style75"> </td>
</tr>
</table>
</div>
This was my way of getting the opaque background as the back of the table. I'm open to other suggestions if that is what is causing the issue with the nowrap.
Thank you!
Try adding:
background-size:cover;
To your CSS for div.transbox
My website has borders on many objects using border= activeborder 1px solid and it was working fine till last week on all the browsers. Now it has stopped working just on Chrome (Works on all other browsers). I haven't changed anything in the style sheet and have checked many times but it still does not work for some reason. Here's a sample of the code. If I change activeborder to gray 1px solid it works. Why so ? some kind of google update ?
<html>
<head></head>
<body>
<form id="form1">
<div>
<table style="width: 90px; margin-top: 27px;" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 30px;">
Latest News
</td>
</tr>
<tr>
<td style="border: activeborder 1px solid; padding: 10px" align="left">
<a style="color: #666666;" href="" target="_blank">one</a>
<br />
<a style="color: #666666;" href="" target="_blank">two</a>
<br />
<a style="color: #666666;" href="" target="_blank">three</a>
<br />
<a style="color: #666666;" href="" target="_blank">four</a>
<br />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
activeborder is not a standard css colour name. Using a standard name e.g. gray, or #666 or rgb(50,50,50) should work.
They were included as CSS2 system colours, but are now deprecated (an apparently now don't work). My testing shows that:
background-color: ActiveBorder;
... does work in IE11 and FireFox26 but not in Chrome32. Try seeing if it works in Quirks mode.
Find and Replace is your friend if you want to use css3 standard colors ;)
And ... ahem ... you should be defining your css in a stylesheet, not inline rough idea:
table.grid {width: 90px; margin-top: 27px;}
.grid td {border: 1px solid #999; padding: 5px 10px; text-align: left;}
.grid a {color: #666}
but I'm sure you knew that and were only doing inline for the example ;)