I have an email message that the width of a table is being respected in all email clients except outlook (surprise).
The table should be shrinking everything under the picture header and above the picture footer to 90% like shown in this codepen:
https://codepen.io/jwestqualtrics/pen/dmWPKx
In outlook, it is not being set to 90% as shown in the below picture
Here is the portion of the code is not working.
<table align="center" border="0" cellpadding="0" cellspacing="0" class="deviceWidth" width="90%">
Where the width = 90% is the part that is not working. See the whole code in the codepen. Thanks for your help.
Related
I'm struggling to add a variable to my PayPal payment form I need users to add a ref number so that I can identify the order so for example,
I normally use the email link option rather than the form option
Add Ref No :
Add Personal Message :
any help would so much appreciated
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="HUMXQRA7T9Z3L">
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
You're using a hosted button, so edit the button at www.paypal.com/buttons , view your saved buttons , find your button and edit it using the action menu.
In the Customize Button box, check the option to add a text field, and save your changes. This will generate new code to copy.
The hosted editor will only generate one text field, so if you need a button with more you'll need to create a new button with the first text field, and in step 2 uncheck the option to save the button at PayPal. When the code is created, click to remove the code protection. This will result in an unhosted button. Copy it to a text editor, and you can then extend the single text field to be two text fields, incrementing the ID number from e.g. 0 to 1 as is necessary for the second field.
You can read about HTML variables for PayPal buttons.
I just started using Cypress for test automation to see if I like it but I running into a small problem. I want to assert the content of a cell based on a value in another cell in the same row. In the example below the first row contains a user that has finished registering, the cells are all filled. On the second row a new account is visible which has not yet been completed by the user. Cells such as first name and last name are still empty. Display: -
Now I want to verify that the first cell of the row containing 'usermanagementtest#test.com' in the third column contains '-'. There is no way for me to know on what row this will be displayed.
I start by asserting there is a cell visible containing the given email address:
cy.get('.module-user--list tr').find('td').contains('usermanagementtest#lukkien.com').should('be.visible')
but now I would like to assert the value of the first column on that same row.
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>j.doe#test.com</td>
<td>0321654987</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>usermanagementtest#test.com</td>
<td>-</td>
</tr>
</tbody>
With the help of a colleague I achieved this by:
cy.get('.module-user--list tr').find('td').contains('usermanagementtest#test.com').prev().prev().should('contain', '-')
Another way would be to get the parent element and find your way from there:
cy.get('.module-user--list tr').find('td').contains('usermanagementtest#test.com').parent().as('row')
cy.get('#row').find('td:nth-child(1)').should('contain', 'foo')
For a school assignment I have to revamp a website. I've been trying to make a table to include an image and buttons beside the image. I have the table set so the image (if you think of this an excel spreadsheet) is in A1, and A1 is as tall as B1, B2, and B3. So I want to have the large cell for the image and 3 cells, or rows rather, beside that to use as buttons.
I can't figure out how to do this, is it possible?
If I'm getting right what you are trying to achieve, I guess you should include rowspan attribute in one of the td tags (A1 cell).
<table border="1">
<tr>
<td rowspan="3">Picture Here</td>
<td>Button1</td>
</tr>
<tr>
<td>Button2</td>
</tr>
<tr>
<td>Button3</td>
</tr>
</table>
Looks like you need to read up on the 'rowspan' attribute for <table>
I have several similar tables inside a page, and, using scriptaculous, I would like to drag and drop one row from one table to another. I can already do this with the code:
new Draggable('some-id').
Where 'some-id' is the table row id.
However, there is no visible drag, which is bad for user interaction...
Applying the same code to a simple div works fine, which makes me believe that it is a problem with dragging a table row.
Edit:
For example:
<table>
<tr id="drag_tr"><td>Drag</td></tr>
</table>
<div id="drag_div">some content</div>
<script type="text/javascript">
new Draggable("drag_tr")
new Draggable("drag_div")
</script>
In this code, the div will have a visual drag (i.e. the div will follow the cursor), while the table row won't, even though I know it's being dragged.
So this is a problem with <div>s vs <tr>'s
a <div> can have an absolute position which allows the div to move wherever the mouse is but a tr lives within a table and thus cannot be moved about on the page
here is a jsfiddle to illustrate (tr is green, div is red)
http://jsfiddle.net/PUHPH/
no matter what coordinates you put in for the tr it will not move from the top left corner of the page - but the div will go where ever you put it
I created an HTML for email marketing. I placed a table, and applied a border around it:
<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #982676; margin:0 16px;">
For some reason I am getting 1 pixel extra white space inside when I test it in OUTLOOK 2010. I see it around images that are aligned to the top and to the left, and I see it around other cells that have a solid background color.
See image at this link:screenshot
The top triangle is an image in a cell by itself. The bottom rectangle is a cell with a background color. These were supposes to stick to the border. This is a recurring problem. Has anyone encountered this issue before?
Campaign monitor has a really great solution on how to solve this type of problem. Simple add this style code to your table elements. The code below solved my problem (same as OP) on Outlook 2010
<table align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"> ... </table>
EDIT: Links have been replaced with wayback machine since both are gone. I also included a gif of the Email on acid version.
http://www.campaignmonitor.com/blog/post/3694/removing-spacing-from-around-tables-in-outlook-2007-and-2010
If that doesn't work, try this.
http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
I found this here:
http://www.emailonacid.com/blog/details/C13/7_tips_and_tricks_regarding_margins_and_padding_in_html_emails
" Table element margins and padding in Outlook 2007 and 2010 can cause issues
If you add margin or padding properties to your TABLE element, it will add that same margin and padding to every nested TD in Outlook 2007 and 2010. Cellpadding and cellspacing attributes are safe but it's best to avoid CSS margins and padding within the containing TABLE element."
So I guess your margin on the table could be causing this.I m not sure.
In case you haven't found a solution to this problem yet:
Make sure you set border="0" for those images within the table cells.
Add border-collapse:collapse; to the table style.
I solved this problem going into the table properties section and then clicking on "Options". Once the options box appears, change the default cell margins for Left and Right to 0" and then click OK.
For borders of 1 and 3 pixel width, the right border has a 1 pixel space behind it. One solution for this (weird...) kind of problem is a "ghost table" behind the current table, with the width of the current table minus 1 and border of 1.
For example:
<!--[if mso]><table border="1" width="699">
<tr style="display:none;"><td> </td></tr>
</table><![endif]-->
Good luck...