As per new email rules (thanks Microsoft and Google) all margins are stripped from your HTML. So using margin: 0 auto is out for a solution.
The structure is:
<table>
<tr>
<td align="center">
Button
</td>
</tr>
Now I could add yet another table inside the td but it is already like the 2nd nested table and I'm hoping there is a different solution other then nesting another table. The align="center" doesn't work.
Try this code, I'm using this code to send html email and it works fine for gmail, outlook
<table style="width: 100%;">
<tr>
<td style="text-align: center;">
Button
</td>
</tr>
</table>
Also, you can check allow css property for html email here: https://www.campaignmonitor.com/css/
Cuz CSS in email is dangerous... buh BAM. ;D
<table width="100%">
<tr>
<td align="center">
Button
</td>
</tr>
</table>
Old, school, but why not just use blank td's on each side? Ah, it's the 90's again!
<table>
<tr>
<td width="25%"></td>
<td width="50%">
Button
</td>
<td width="25%"></td>
</tr>
</table>
Related
I have created one template. While opening in gmail account some of the text line is coming in center (basically Thank You Part) but when I am opening the same template in Yahoo it (Thank You Part) is properly left aligned. I did some analysis and came to know that it also depends upon the rendering of different mail client. I want to fix this issue. Could anyone please help me with that?
Try something like...
<table cellspacing="0" cellspacing="0" border="0" width="100%" role="presentation">
<tr>
<td style="text-align: left;">
Your Thank You text
</td>
</tr>
</table>
Some mail clients have text:center as default, e.g. Gmail and Outlook 2007,2010,2013. So you need to specify in each <td> the alignment of the text, as well as all other inline styles.
<table cellspacing="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" style="color:#000000">
Lorem ipsum
</td>
</tr>
</table>
I have the following html structure where I am displaying some details inside an html table.
<table cellspacing="15">
<tr>
<td>
<img src="Images/user1.png" />
<label>
User</label>
</td>
<td>
John
</td>
</tr>
<tr>
<td>
<img src="Images/version1.png" />
<label>
Old ID</label>
</td>
<td>
345345
</td>
</tr>
<tr>
<td>
<img src="Images/version3.png" />
<label>
New ID</label>
</td>
<td>
367976
</td>
</tr>
</table>
I want to add margin-top to the image so that the image will be shifted downward by some 3 or 4 pixel but the CSS is not having any effect. Please help.
Also I found that cellspacing is not a valid attribute in HTML5. Any alternate property to achieve the same effect.?
Adding a negative bottom margin to your image
(I generally avoid using negative margins as much as possible, but in this case it's a quick fix and won't effect the text next to it) :
td img {
margin-bottom:-4px;
}
Its working for me.. Anyhow you can try like this LINK, if you want to place img and text in same line
CSS:
td,td img {
line-height:28px;
vertical-align:middle;
}
Alternative for cellspacing is
table {
border-collapse: separate;
border-spacing: 15px;
}
Aligning image:
You can use vertical-align:middle.
See DEMO here.
Margin-top should work correctly, but it probably moves down tha label too.
Possible solution is to use positioning, so:
img {position: relative; top: 4px;}
you can do this.
Just remove <lable> tag & add valign="top" in <td>
<table cellspacing="15">
<tr>
<td valign="top">
<img src="Images/user1.png" />
User
</td>
<td>
John
</td>
</tr>
<tr>
<td valign="top">
<img src="Images/version1.png" />
Old ID
</td>
<td>
345345
</td>
</tr>
<tr>
<td valign="top">
<img src="Images/version3.png" />
New ID
</td>
<td>
367976
</td>
</tr>
</table>
Hotmail does not support margin in HTML emails. Is there an alternative?
I would suggest use tables and play with the width of columns. HTML emails are sometimes better with tables. Also, you can take a look at an email you have in your inbox that does what you want and inspect source code.
As this answer seems a little vague I would also like to point to a very complete answer which covers in more details html emails.
Note:
When it comes to email HTML, note that all best practices from web development goes out the window.
Here is an example using tables,
<table border="0" cellspacing="0" cellpadding="0" align="left" style="width:600px;margin:0 auto;background:#FFF;">
<tr>
<td colspan="5" style="padding:15px 0;">
<h1 style="color:#000;font-size:24px;padding:0 15px;margin:0;">Header</h1>
</td>
</tr>
<tr>
<td style="width:15px;"> </td>
<td style="width:375px;">
Left Column Content
</td>
<td style="width:15px;"> </td>
<td style="width:180px;padding:0 0 0 0;">
Sidebar Content
</td>
<td style="width:15px;"> </td>
</tr>
<tr>
<td colspan="5" style="padding:15px 0;">
<p style="color:#666;font-size:12px;padding:0 15px;margin:0;">Footer</p>
</td>
</tr>
</table>
Live here http://jsfiddle.net/Wr76m/
I was able to get away with transparent horizontal bars, using padding to modify the height. For example:
<hr style="border: transparent; padding: 1px;">
All,
This xpath locator works fine in Firefox:
ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0
This does not work in IE. I have been trying to convert to CSS locator
without success. The item I am trying to select is Seller. Here's the
whole blob:
<div style="width: 168px; overflow: auto; height: 107px; padding-right: 0px;" class="dxlbd" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_D">
<input type="hidden" name="ctl00$ctl00$mainPage$rightColumn$wholeControl$grid$cell2_3$roleX$DDD$L" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_VI" value="0">
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; border-collapse: separate;" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBT">
<tbody>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem dxeListBoxItemSelected" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI0T0">Choose</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI1T0">Buyer</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem dxeListBoxItemHover" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0">Seller</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI3T0">Buyer & Seller</td>
</tr>
<tr class="dxeListBoxItemRow">
<td class="dxeListBoxItem" id="ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI4T0">Observer</td>
</tr>
</tbody>
</table>
</div>
Any ideas greatly appreciated.
Blake
There are a few ways that you could locate the seller cell. To locate it using CSS based on the content of the cell try:
css=td:contains(Seller)
If the id is static then the following should also work, however the id is unusually long, which could conceivably cause issues. I haven't tested this myself.
id=ctl00_ctl00_mainPage_rightColumn_wholeControl_grid_cell2_3_roleX_DDD_L_LBI2T0
I'm having trouble getting this code to show up correctly in WebKit browsers(chrome/safari). It looks fine in IE6, IE7, and FireFox.
<table width="100%">
<tr>
<td rowspan="2" style="vertical-align:middle;">
<img src="/i/thumbnails/acotgc25sm.gif" alt="Gift Certificate"/>
</td>
<td style="vertical-align:middle;">
Wishlist
</td>
<td style="vertical-align:middle;">
Link to Us
</td>
<td style="vertical-align:middle;">
Affiliate Program
</td>
<td style="vertical-align:middle;">
Privacy
</td>
<td style="vertical-align:middle;">
Guarantee
</td>
<td rowspan="2" style="width:160px;">
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
</td>
</tr>
<tr>
<td style="vertical-align:middle;">
About Us
</td>
<td style="vertical-align:middle;">
Shipping
</td>
<td style="vertical-align:middle;">
Why Buy From Us
</td>
<td style="vertical-align:middle;">
Contact Us
</td>
<td style="vertical-align:middle;">
Help
</td>
</tr>
</table>
The problem is that WebKit makes the top row very small and the bottom row fill in the rest of the space instead of each row having an equal height.
Anyone have any ideas of how to make it show up how I want it to in WebKit based browsers?
I have a few recommendations for you but I can't answer your question completely because WebKit seems to render your source fine when I try it.
First, maybe you can change width="100%" to style="width:100%;" Perhaps combined with the other markup, it's putting the browser in quirks mode.
Second, make sure you have the correct doctype on and your code validates or AT LEAST comes close. The doctype I used when copying & pasting your code was XHTML Strict.
Otherwise, please post the source code of the whole page or just link to a live demo. Even a screenshot would help.
I could help more with a live example to test on but you could try adding this to your tr tags.
<tr style="height: 50%;">
Assuming you only need two rows this will bring them to equal height.
a proper example to ensure it is not showing correctly in webkit is the following:
<table width="200" border="1">
<tbody>
<tr>
<td rowspan="2" width="15">
this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
</td>
<td>
this should be big instead
</td>
</tr>
<tr height="20">
<td height="20">
this row fails to size to 20 height on webkit
</td>
</tr>
</tbody>
</table>
as you can see the left part is rendered fine, but the right part should be different, as in the top row should populate the left over space and the bottom row is set to 20 height (as you can see neither the tr height nor the td height is taken into consideration by webkit). this renders fine in all other browsers
EDIT:
after playing around and tinkering about my problem, I came to the below solution.
completely relying on jquery reading the height attribute property from the row you want to change:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pipnorowspan").height(function(){
return $("#rcarowspan").height() - $("#piplowerrow").attr('height') + 2;
});
});
</script>
</head>
<body>
<table width="200" style="border-collapse:collapse; border:1px solid #000;" id="ertable">
<tbody>
<tr style="border:1px solid #000;">
<td rowspan="3" width="15" id="rcarowspan" style="border:1px solid #000;">
this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height
</td>
<td id="pipnorowspan" style="border:1px solid #000;">
this should be big instead
</td>
</tr>
<tr height="20" id="piplowerrow" style="border:1px solid #000;">
<td height="20" style="border:1px solid #000;">
this row fails to size to 20 height on webkit
</td>
</tr>
</tbody>
</table>
</body>
</html>