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;
Related
I'm trying to make a centralize button in HTML e-mail. The tricky part here is my wish the button to be as wide as its content. The following code works perfect except in Outlook.
Here is the HTML:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td style="width:1%;white-space:nowrap">
<a href="#" style="text-decoration:none">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="margin-top:16px;padding:8px 16px 8px 16px;background-color:#5091cd;border-radius:2px">
<a href="#" style="font-size:15px;letter-spacing:.04em;color:#ffffff;text-transform:uppercase;text-decoration:none;display:block;text-align:center;max-width:600px;overflow:hidden;text-overflow:ellipsis">
Go to platform
</a>
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
The expected result is:
The actual visualization:
Increasing the width of the td tag will help you adjust the content in one line.
<style="width:20%;white-space:nowrap">
if you want to take the full width of the container, make td width auto.
currently, td tag width is deciding how the content text will wrap.
I am trying to use the css not selector but not having much success. I am trying to apply attributes to images except for those in a .sponsors class.
img:not(.sponsors) {
width: initial;
max-width: 100%;
height: auto;
}
However it's applying the attributes to all images. The images in a sponsor class are in a table
<table class="sponsors" style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>
Any help would be appreciated
If you are using :
img:not(.sponsors) {
}
The "sponsors" class must be in an img tag.
In your example it should be :
<table style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img class="sponsors" src="image1.jpg" /></td>
<td style="width: 50%;"><img class="sponsors" src="image2.jpg" /></td>
</tr>
</tbody>
</table>
Simple test for that : https://jsfiddle.net/c31nq2dh/
Try to move the class property and observe the result
For simplicity I've changed the CSS rule to border: solid 5px red; just to see where it gets applied.
The CSS :not() selector works on elements which have the class. See only the element which does not have the class sponsors gets the red colored border
img:not(.sponsors) {
border: solid 5px red;
}
<table style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img class="sponsors" src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>
But your HTML has the class sponsors on the parent element. Add whatever rules you need to set or reset on the images like so:
.sponsors img {
border: solid 5px red;
}
<table class="sponsors" style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>
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;
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 want to get the Name and Description in the center of the columns..
I tried a lot but no luck... I know this is silly doubt but I am stuck...
Here is the .aspx code:
<!-- <table cellpadding="3" cellspacing="4" align="center"
style="width: 100%; height: 60%">
<tr>
<td bgcolor="#4F81BD" style="color: #FFFFFF" width="50%" align="center" >
Name</td>
<td bgcolor="#4F81BD" style="color: #FFFFFF" width="50%">
Description</td>
</tr>
as you can see I have also tried align.. it still does not work.
Try using the text-align CSS property:
<table cellpadding="3" cellspacing="4" align="center" style="width: 100%; height: 60%">
<tr>
<td bgcolor="#4F81BD" style="color: #FFFFFF; width:50%; text-align:center">
Name</td>
<td bgcolor="#4F81BD" style="color: #FFFFFF; width:50%; text-align:50%">
Description</td>
</tr>
In what way is it not working?
What you have done should be displaying 'Name' centered, if not then it's possibly being affected by your css and the inline style approach SLaks has shown will fix it.
If your problem is that you want all text in those columns to be centered then try.
<table>
<col align="center" />
<col align="center" />
<tr>