Ok, so I have several problems with this table. I need it to look like as lose as possible to this:
However, when I try to achieve this, there ends up being a ton of space between the table cells that contain the text and for some reason valign="top" is not working nor is vertical-align:middle for the text portions so they don't line up with the top of the image. This is what it looks like right now: http://imgur.com/KKIGrhQ
Not sure how to fix any of this or get it to look like the original. :( Please help! Thanks in advance!!!
<table width="570" align="center" style="padding-top:10px; background-color:#FFF; border-top:dotted 1px #000;">
<tr>
<td width="190" valign="top">
<img src="images/plant.jpg" />
</td>
<td width="199" valign="top" style="vertical-align:top;">
<p style="font-size:14px; color:#646f9a; line-height:15px;">DEFYING THE RECESSION<br>
<span style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;"><strong>Sarah Walker</strong>, CNNMoney.com staff writer</span></p>
<p style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;">When metal worker Ken Kash was laid off in July from his job at a theatre set company, he decided not to look for another full-time position. Instead, he's pursing a <span style="text-decoration:underline;">longtime dream</span>: launching his own company.</p>
<p style="font-size:11px; color:#646f9a;">STRATEGIC <strong>INVESTMENT</strong> <span style="color:#c0d84d;">•</span></p>
</td>
<td width="121" valign="top" rowspan="1" style="background-color:#eff2d9; border-bottom:solid #c0d84d 8px; padding-left:10px; padding-right:10px; padding-top:2px;">
<p style="font-size:14px; color:#646f9a; line-height:15px;">ASK AN EXPERT</p>
<p style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;"><strong>Q: Is there anything in this massive federal economic stimulus plan for small business? <br>
— Rick<br><br>
A: Yes, lots.</strong><br><br>
There is going to be a lot of federal, state and local money available. Get ready to take advantage of it. <span style="text-decoration:underline;">Read more...</span></p>
<p style="font-size:11px; color:#646f9a;">ASK THE <strong>EXPERT</strong> <span style="color:#c0d84d;">•</span></p>
</td>
</tr>
<tr>
<td valign="top" style="vertical-align:top;"><img src="images/video.jpg" />
</td>
<td valign="top" style="vertical-align:top;">
<p style="font-size:14px; color:#646f9a; line-height:15px;">DEFYING THE RECESSION<br>
<span style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;"><strong>Sarah Walker</strong>, CNNMoney.com staff writer</span></p>
<p style="font-size:11px; color:#707764; line-height:12px; letter-spacing:0.2pt;">When metal worker Ken Kash was laid off in July from his job at a theatre set company, he decided not to look for another full-time position. Instead, he's pursing a <span style="text-decoration:underline;">longtime dream</span>: launching his own company.</p>
<p style="font-size:11px; color:#646f9a;">STRATEGIC <strong>INVESTMENT</strong> <span style="color:#c0d84d;">•</span></p>
</td>
<td rowspan="2"> </td>
</tr>
</table>
You shouldnt be using tables for that. Try twitter bootstrap or 960 Gs or sny other css grid system.
Related
I am making a new signature for my email. Here is the code:
<style>
#import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
</style>
<table cellspacing="0" width="500" cellpadding="0" border="0" style="padding:20px 0 20px 0;">
<tr>
<td style="padding:0 9px 0 0;vertical-align: middle;" width="100" valign="top"> <img alt="Logo" width="100" style="width:100px;moz-border-radius:15%;khtml-border-radius:15%;o-border-radius:15%;webkit-border-radius:15%;ms-border-radius:15%;border-radius:15%;" src="https://i.ibb.co/FzTmBN9/testlogo.png" /> </td>
<td style="border-left:0px solid;vertical-align: top;border-color:#acacac;padding:0 0 0 0px;" valign="middle">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.6;font-family:'Open Sans','Verdana','Geneva',sans-serif;font-size:12px;color: #000000;letter-spacing:.8px;">
<tr>
<td> <span style="font: 12px 'Open Sans','Verdana','Geneva',sans-serif;color:#000000;">My Name</span> <span style="font-family:'Open Sans','Verdana','Geneva',sans-serif;color: #000000;"> </span> </td>
</tr>
<tr>
<td style="padding: 5px 0;">
<div style="font-family: 'Lato','Verdana','Geneva',sans-serif;font-size:11px;color: #000000;letter-spacing:1.2px;">My Company</div>
</td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">line 1: </span> <span><a style="text-decoration:none;font-family:'Open Sans','Verdana','Geneva',sans-serif;color:#000000;" href="tel:+">123 456 7890</a></span> </td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">line 2: </span> <span><a style="text-decoration:none;font-family:'Open Sans','Verdana','Geneva',sans-serif;color:#000000;" href="tel:+">123 456 7891</a></span> </td>
</tr>
<tr>
<td> <span style="font-family:'Lato','Verdana','Geneva', sans-serif;color:#acacac;">https:// </span> <span style="font-family:'Open Sans','Verdana','Geneva',sans-serif;">website.com</span> </td>
</tr>
</table>
</td>
</tr>
</table>
<span style="font-family:'Open Sans','Helvetica','Arial', sans-serif;color:#acacac;font-size: 10px;">This communication (including any attachments) is intended only for the recipient(s) identified in the message, and may contain information that is business proprietary/confidential, privileged, or otherwise protected by law. If you are not the intended recipient, please disregard this communication and notify the sender. Any disclosure, copying, or distribution of this message, or the taking of any action based on it, without the express permission of the originator, is strictly prohibited.</span>
When I send myself a test email on my iPhone XS Max running iOS 13.5.1 it works well and displays like this:
But then if I rotate the phone horizontally it then does this:
And then when I turn it back to portrait mode it does this:
I am pretty sure this is a bug with the iOS mail app and not my code, however I want my signature to display well on any ordination. Why is this occurring? How can I fix this? I've tried adding in some breakes (<br>) and padding with no luck.
It's quite possible you need to put the span element within a table too. Alternatively, an easier option would be to use a paragraph tag instead of a span (make it a block element, not inline, in other words).
i.e.:
<p style="font-family:'Open Sans','Helvetica','Arial', sans-serif;color:#acacac;font-size: 10px;">This communication (including any attachments) is intended only for the recipient(s) identified in the message, and may contain information that is business proprietary/confidential, privileged, or otherwise protected by law. If you are not the intended recipient, please disregard this communication and notify the sender. Any disclosure, copying, or distribution of this message, or the taking of any action based on it, without the express permission of the originator, is strictly prohibited.</p>
This is the first html email signature I''ve created and I've now discovered why I dont do them - what a pain!
It seems no matter what I do, it's not displaying correctly in one client or another.
The code I used below is displaying correctly in Android and Mac Outlook clients, however when I first upload it to outlook there is a table wrap error that I corrected by changing the table in outlook to nowrap. But now when this email signature is sent from outlook, it breaks when you look at it on ios.
I know my code probably isnt very good as it's my first time doing these. Could anybody please give me a hand to fix it??
Help me StackOverflow, you're my only hope!
Here is my code:
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<STYLE>
<!--
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
-->
<!--
<style>
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
</STYLE>
<tr>
<td width="0" bgcolor="#f3f3f1">
</td>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</a>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
<a href="tel:000000000" style="text-decoration: none;color:#000000">Call the office.
<a href="tel:000000000" style="text-decoration: none; color: #000000">Call Me.
<a href="mailto:email#domain.com.au" style="text-decoration: none;color: #000000;font-size: 9px; white-space: nowrap">Email me.
<br />
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
</a>
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif; class="gold">
villagerproperty.com.au
</a>
</p>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png">
<br> <p bgcolour= "ffffff">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p> <br>
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="width: 100% !important;">
<tr>
<td align="left" valign="top" width="600px" height="1" style="background-color: #f0f0f0; border-collapse:collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; mso-line-height-rule: exactly; line-height: 1px;"><!--[if gte mso 15]> <![endif]--></td>
</tr>
</table>
</td>
</tr>
</table>
Thankyou #Nathan for all of your help!
Your fix worked great, however when viewing on iOswrapping error
Is this because I have the table width set at a % instead of a fixed px?
I aplogise for all the questions - I'm very new to html signatures and I seem to be having a lot of trouble!
A couple of helpful's for future:
Run your HTML through a w3c HTML validation check (and CSS, but that's less useful). There were quite a few tiny but significant errors: not closing </a> in the right place (it's inline, so close it before a block element like <p> or <br>), or not closing stuff, or forgetting quotes.
If you use https://validator.w3.org/#validate_by_input ignore all the obsolete messages (message filtering button can turn them off) - email is too old school for it!
And seriously, that was all, apart from removing a couple of redundant/empty td's/tables.
There is a possibility Outlook from Windows was messing with your code, it does that. But Outlook from Mac should be no problem.
Here is working code:
<br>
<table width="30%" align="left" cellspacing="0" cellpadding="0">
<style>
a:hover {
color : #282931;
text-decoration : none;
a.gold:link, a:visited {
color : #282931;
text-decoration : none;
}
a.gold:hover {
color : #282931;
text-decoration : none;
}
#import url('https://fonts.googleapis.com/css2?family=Spartan:wght#300;700&display=swap');
</style>
<tr>
<td bgcolor="#f3f3f1" width="400">
<p style="font-size:18px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;;margin-bottom:30px;margin-right: 0px; margin-left:15px; margin-top:30px; font-weight:300; letter-spacing: 1px;">
Ben Tindall
<br>
<span style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif; font-weight:300;letter-spacing:0;">
Managing Director + Licensee
</span>
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:20px; margin-left:15px; margin-top:30px; line-height: 1.5; font-weight:300;">
179 Darby Street Cooks Hill
<br />
NSW 2300
</p>
<p style="font-size:9px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:15px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700; white-space: nowrap;">
Call the office.
Call Me.
Email me.
</p>
<p style="font-size:16px;color:#000000;font-family:'Spartan',Century Gothic, sans-serif;margin-bottom:10px; margin-left:15px; margin-top:0px; line-height: 1.5; font-weight:700;">
<a href="https://www.villagerproperty.com.au" style="text-decoration: none;color: #000000;font-size: 16px;color:#000000;font-weight: 700;font-family: 'Spartan',Century Gothic, sans-serif;" class="gold">
villagerproperty.com.au
</a>
</p>
<p style="margin-bottom:0px; margin-left:15px; margin-top:0px;">
<a href="https://www.facebook.com/villagerproperty" target="_blank">
<img id="FB" src="https://villagerproperty.com.au/wp-content/uploads/facebook.png" alt="facebook" border="0" align="top"/></a>
<a href="https://www.instagram.com/villagerproperty/" target="_blank">
<img id="insta" src="https://villagerproperty.com.au/wp-content/uploads/instagram.png" alt="instagram" border="0" align="top"/></a>
<a href="https://www.linkedin.com/in/ben-tindall-a8458799/ " target="_blank">
<img id="li" src="https://villagerproperty.com.au/wp-content/uploads/linkedin.png" alt="linkedin" border="0" align="top"/></a>
<a href="https://www.youtube.com/channel/UCKxDK6__4Fka9zj5hZqwOfw" target="_blank">
<img id="yt" src="https://villagerproperty.com.au/wp-content/uploads/youtube.png" alt="youtube" border="0" align="top"/>
</a>
</p>
</td>
<td align="right" valign="top" bgcolor="#f3f3f1">
<p style="margin-right:0px; margin-top:0px; margin-left: 10px">
<img src="https://villagerproperty.com.au/wp-content/uploads/BenTindall-e1588743697391.png" alt="" role="presentation">
</p>
</td>
</tr>
<tr>
<td colspan="4">
<p style="font-size: 9px;font-family:'Spartan',Century Gothic, sans-serif;color: #000000; margin-bottom:0; margin-top:15px;">
This email message is for the exclusive use of the intended recipient(s) and may contain confidential, privileged and non-disclosable information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply email immediately and destroy any and all copies of the message.
</p>
<p style="font-size:9px; font-family:'Spartan',Century Gothic, sans-serif; color:#000000; margin-top:10px;">
Please consider the environment before printing this email.
</p>
</td>
</tr>
</table>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
This is the what the codes I already have looks like, but I want to set it to an exact width so everything looks neat:
I'm not very good with HTML and was hoping someone could tell me what to put where. Here's the code I have:
<p align="center">
<span style="color:#000080;"><span style="font-size:48px;"><span style="font-family:times new roman,times,serif;">Product Information</span></span>
</span>
</p>
<div>
<h2>
<span style="color:#000080;"><big><u><span style="background-color:#66ccff;">Description </span></u>
</big>
</span>
</h2>
</div>
<ul>
<li>
<span style="font-size:18px;">This is a 2016 Peyton Manning #18 Jersey.</span></li>
<li>
<span style="font-size:18px;">Team: Denver Broncos</span></li>
<li>
<span style="font-size:18px;">Player: Peyton Manning</span></li>
<li>
<span style="font-size:18px;">Color: Orange</span></li>
<li>
<span style="font-size:18px;">Brand: Nike</span></li>
<li>
<span style="font-size:18px;">This is a used item that has <u>NO</u> defects. No rips, tears, or stains.</span></li>
</ul>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Size </span></u>
</big>
</span>
</h2>
</div>
<ul>
<li>
This is a Large/44 Jersey. These are the measurements:</li>
</ul>
</div>
<p align="center">
<img height="230" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg" width="219"><img height="225" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="225"></p>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:276px;" width="276">
<tbody>
<tr>
<td colspan="4" nowrap="nowrap" style="width:276px;height:20px;">
<p align="center">
Measurement Chart</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Country</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
Length</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
Width</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
Sleeves</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>U.S.</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Europe</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
</tbody>
</table>
<div style="clear:both;">
</div>
<p>
</p>
<p align="center">
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">If you want further details on the sizing, please feel free to message us!</span></span>
</p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Shipping </span></u>
</big>
</span>
</h2>
</div>
<ul>
</ul>
<p>
<span style="font-size:18px;">This item is shipped using USPS Priority Mail. It is shipped out of St. Paul, MN 55014.</span></p>
</div>
<div>
<br>
<span style="font-size:18px;">We try to ship this package within 24 hour of the time you pay for the item.<br>
We ship Internationally.</span></div>
<p>
<span style="font-size:18px;"><img src="http://thebuttonpost.com/wp-content/uploads/2014/07/priority-mail.png" style="margin-left: 12px; margin-right: 12px; float: right; width: 220px; height: 131px;"></span></p>
<div>
</div>
<p>
<span style="font-size:18px;"><u>The following is included in this shipment:</u></span></p>
<div>
<p>
<span style="font-size:18px;">1. 2-4 Day Shipping in the US</span></p>
<div>
<p>
<span style="font-size:18px;">2. Free Tracking</span></p>
<p>
<span style="font-size:18px;">3. Insurance for your package up to $50.00</span></p>
<div>
</div>
<p>
<span style="font-size:18px;">Please insure that your address is correct. If you are worried your package could be stolen please contact your Post Office with the tracking number and have them hold it there for you. Unfortunately once the tracking shows the package has been delivered to the address it is your responsibility and refunds cannot be accepted.</span></p>
<p>
<span style="font-size:18px;">If your package was damaged by USPS, please contact us ASAP with photos showing the extent of the damage. You will be refunded and we will take care of making an insurance claim with USPS since packaging was our responsibility.</span></p>
<p>
</p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Return Policy </span></u>
</big>
</span>
</h2>
</div>
<p>
<span style="font-size:18px;">We try to make the description of the item you’re buying as detailed as possible to avoid the need for returns. If your item contains a defect that was not listed in the description we will accept a return with photos of the defect. If the item’s defect is clearly not in the photos we posted, or seem to be manufactured, your return will not be accepted.</span></p>
</div>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Payment </span></u>
</big>
</span>
</h2>
</div>
<p>
<span style="font-size:18px;">We accept PayPal and Credit/Debit cards. After you click “Purchase Item” you are not done checking out! Click on <u>PAY NOW</u>. Your package will not be shipped until you pay for your item, and it will be cancelled if you do not pay within 2 Business Days.</span></p>
</div>
<p align="center">
</p>
<p align="center">
</p>
<p style="text-align: center;">
<img alt="" src="http://www.bceldercare.ca/images/paypal-verified.png" style="width: 500px; height: 146px;"></p>
<p align="center">
</p>
</div>
</div>
<p>
</p>
I wouldn't recommend a fixed width. On mobile devices your template wont show very well. I would recommend you look a simple responsive grid css layout like skeleton - it will resize it all to the width of the browser, works fine in eBay!
How about putting your entire page in a container, giving that container a width of how big you want it to be and centering it. In my snippet, I gave the container a width of 50vw (Which equals to 50% of the current viewport width)
#container{
width:50vw;
display:block;
margin:0 auto;
}
<div id="container">
<p align="center">
<span style="color:#000080;"><span style="font-size:48px;"><span style="font-family:times new roman,times,serif;">Product Information</span></span></span></p>
<div>
<h2>
<span style="color:#000080;"><big><u><span style="background-color:#66ccff;">Description </span></u></big></span></h2>
</div>
<ul>
<li>
<span style="font-size:18px;">This is a 2016 Peyton Manning #18 Jersey.</span></li>
<li>
<span style="font-size:18px;">Team: Denver Broncos</span></li>
<li>
<span style="font-size:18px;">Player: Peyton Manning</span></li>
<li>
<span style="font-size:18px;">Color: Orange</span></li>
<li>
<span style="font-size:18px;">Brand: Nike</span></li>
<li>
<span style="font-size:18px;">This is a used item that has <u>NO</u> defects. No rips, tears, or stains.</span></li>
</ul>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Size </span></u></big></span></h2>
</div>
<ul>
<li>
This is a Large/44 Jersey. These are the measurements:</li>
</ul>
</div>
<p align="center">
<img height="230" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image001.jpg" width="219"><img height="225" src="file:///C:/Users/JONATH~1.TOW/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" width="225"></p>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:276px;" width="276">
<tbody>
<tr>
<td colspan="4" nowrap="nowrap" style="width:276px;height:20px;">
<p align="center">
Measurement Chart</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Country</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
Length</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
Width</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
Sleeves</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>U.S.</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
<tr>
<td nowrap="nowrap" style="width:63px;height:20px;">
<p>
<strong>Europe</strong></p>
</td>
<td nowrap="nowrap" style="width:75px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:66px;height:20px;">
<p>
</p>
</td>
<td nowrap="nowrap" style="width:72px;height:20px;">
<p>
</p>
</td>
</tr>
</tbody>
</table>
<div style="clear:both;">
</div>
<p>
</p>
<p align="center">
<span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">If you want further details on the sizing, please feel free to message us!</span></span></p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Shipping </span></u></big></span></h2>
</div>
<ul>
</ul>
<p>
<span style="font-size:18px;">This item is shipped using USPS Priority Mail. It is shipped out of St. Paul, MN 55014.</span></p>
</div>
<div>
<br>
<span style="font-size:18px;">We try to ship this package within 24 hour of the time you pay for the item.<br>
We ship Internationally.</span></div>
<p>
<span style="font-size:18px;"><img src="http://thebuttonpost.com/wp-content/uploads/2014/07/priority-mail.png" style="margin-left: 12px; margin-right: 12px; float: right; width: 220px; height: 131px;"></span></p>
<div>
</div>
<p>
<span style="font-size:18px;"><u>The following is included in this shipment:</u></span></p>
<div>
<p>
<span style="font-size:18px;">1. 2-4 Day Shipping in the US</span></p>
<div>
<p>
<span style="font-size:18px;">2. Free Tracking</span></p>
<p>
<span style="font-size:18px;">3. Insurance for your package up to $50.00</span></p>
<div>
</div>
<p>
<span style="font-size:18px;">Please insure that your address is correct. If you are worried your package could be stolen please contact your Post Office with the tracking number and have them hold it there for you. Unfortunately once the tracking shows the package has been delivered to the address it is your responsibility and refunds cannot be accepted.</span></p>
<p>
<span style="font-size:18px;">If your package was damaged by USPS, please contact us ASAP with photos showing the extent of the damage. You will be refunded and we will take care of making an insurance claim with USPS since packaging was our responsibility.</span></p>
<p>
</p>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Return Policy </span></u></big></span></h2>
</div>
<p>
<span style="font-size:18px;">We try to make the description of the item you’re buying as detailed as possible to avoid the need for returns. If your item contains a defect that was not listed in the description we will accept a return with photos of the defect. If the item’s defect is clearly not in the photos we posted, or seem to be manufactured, your return will not be accepted.</span></p>
</div>
<div>
<div>
<h2>
<span style="color: rgb(0, 0, 128);"><big><u><span style="background-color: rgb(102, 204, 255);">Payment </span></u></big></span></h2>
</div>
<p>
<span style="font-size:18px;">We accept PayPal and Credit/Debit cards. After you click “Purchase Item” you are not done checking out! Click on <u>PAY NOW</u>. Your package will not be shipped until you pay for your item, and it will be cancelled if you do not pay within 2 Business Days.</span></p>
</div>
<p align="center">
</p>
<p align="center">
</p>
<p style="text-align: center;">
<img alt="" src="http://www.bceldercare.ca/images/paypal-verified.png" style="width: 500px; height: 146px;"></p>
<p align="center">
</p>
</div>
</div>
<p>
</p>
</div>
I am trying to create a button that looks like with text font-size:14px sitting centered middle with a special character (›) font-size:40px;
Getting the right arrow ( › ) to sit appropriately vertically aligned for email is seemingly impossible.
Currently I am using:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#b8237" background="" height="42" width="196" style="color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;font-size:14px;" align="center" valign="middle">
<a href="" alt="Get Your $1.50 Coupon" title="Get Your $1.50 Coupon" target="_blank" style="text-decoration:none;color:inherit;">
Get Your $1.50 Coupon
<span style="font-size:40px;">›</span>
</a>
</td>
</tr>
</table>
Any assistance would be much appreciated. This needs to be bulletproof for emails. I have researched and tried multiple different ways, but have come up empty-handed.
Also, no generator allows for aligning varying font-size text.
Thanks,
Given that you want this to be bulletproof, my recommendation for something like this would be to use an image for the text and arrow, and just wrap an anchor around it. Otherwise it would be a nightmare trying to get each email client to play ball.
If this needs to remain as text, then I'd suggest you create separate cells for the text and arrow and setting them to vertical-align: middle, but you will inevitably get annoyingly varied results across clients.
Here is the updated code:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#b8237" background="" height="42" width="196" style="color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;font-size:14px;" align="center" valign="middle">
<a href="" alt="Get Your $1.50 Coupon" title="Get Your $1.50 Coupon" target="_blank" style="text-decoration:none;color:inherit;">
<span>Get Your $1.50 Coupon </span>
<span style="font-size:40px;">›</span>
</a>
</td>
</tr>
All I did, I added "Get Your $1.50 Coupon " also in <span> tag
And I gave CSS: td span{ display:inline-block; vertical-align:middle;}
Here is the Fiddle: http://jsfiddle.net/c237t/
And If you cannot give separate CSS then here is the other way around:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#b8237" background="" height="42" width="196" style="color:#FFFFFF; font-family:Arial, Helvetica, sans-serif;font-size:14px;" align="center" valign="middle">
<a href="" alt="Get Your $1.50 Coupon" title="Get Your $1.50 Coupon" target="_blank" style="text-decoration:none;color:inherit;">
<span style="vertical-align:middle;">Get Your $1.50 Coupon </span>
<span style="vertical-align:middle; font-size:40px;">›</span>
</a>
</td>
</tr>
Here is the Fiddle: http://jsfiddle.net/2X9kS/
I've the below HTML Code.
<div class="main">
<div class="para">
<a name="I1-87A"></a><span class="phrase">I1/87A</span> <span class="font-style-bold">Punitive costs</span>—Proceedings which are an abuse of process in that they
are scandalous or vexacious or have been initiated maliciously or for an ulterior
motive may not only be struck out, the petitioner may also face an order to pay
costs on an indemnity basis (<span class="font-style-italic">Re Tang Hong Yuen, ex p.
Leung Yee Cheung</span> [2004] H.K.E.C. 972 <span class="font-style-italic">Bank of
China (Hong Kong) Ltd v. Lee Lin Heung</span> [2002] 1 H.K.L.R.D. A3 and
<span class="font-style-italic">Choy Yee Chun v. Bond Star Development Ltd</span>
[1997] H.K.L.R.D. 1327). This provides a salutory reminder to practitioners that
the bankruptcy jurisdiction should not be lightly invoked nor looked to for the
determination of disputes between parties.
</div>
<table class="frame-all" colsep="1" rowsep="1" align="left" cols="3">
<colgroup>
<col class="colname-c1 colwidth-8.80%"></col>
<col class="colname-c2 colwidth-12.68%"></col>
<col class="colname-c3 colwidth-59.33%"></col>
<col class="colname-c3 colwidth-19.19%"></col>
</colgroup>
<tbody>
<tr>
<td class="null"><div class="para"><a name="I1-89"></a>
<span class="phrase">I1/89</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Stages of a voluntary arrangement</span>
</div>
</td>
<td rowspan="align-center">
<div class="para">
<span class="font-style-bold">Procedures</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">of the Bankruptcy Ordinance (BO)/Rule of the Bankruptcy Rules (BR)/Form in the Bankruptcy (Forms) Rules (BFR)</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"><a name="I1-89A"></a>
<span class="phrase">I1/89A</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Debtor prepares proposal</span>
</div>
</td>
<td>
<div class="para">The proposal should include:</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">BR 122B and C</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"><a name="I1-89B"></a>
<span class="phrase">I1/89B</span>
</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">Notice to intended nominee</span>
</div>
</td>
<td>
<div class="para">Written notice of the debtor’s proposal and a copy of the proposal is passed to the intended nominee or a person authorised to take delivery on his behalf (BR 122D (1) and (2)). If the nominee agrees to act, he shall cause a copy of the notice to be endorsed to the effect that it has been received by him on a specified date (BR 122D(3)). The copy of the notice shall be returned by the intended nominee to the debtor (BR 122D(4)).</div>
</td>
<td>
<div class="para">
<span class="font-style-bold">BR 122D BFR 167 </span>
<span class="font-style-italic">[Notice to Intended Nominee]</span>
</div>
</td>
</tr>
<tr>
<td class="auto-style1">
<div class="para">
<a name="I1-89C"></a>
<span class="phrase">I1/89C</span>
</div>
</td>
<td class="auto-style1">
<div class="para">
<span class="font-style-bold">Application for an interim order</span>
</div>
</td>
<td class="auto-style1">
<div class="para">An application for an interim order may be made when the debtor intends to make a proposal and the proposal must provide for a nominee to act in relation to the voluntary arrangement for the purposes of supervising its implementation (BO 20A). Two or more persons can be appointed as joint nominees in a voluntary arrangement. The court normally will not object to any proposal to appoint solicitors and certified public accountants provided such persons are able to demonstrate sufficient experience and knowledge in dealing with insolvency matters. For persons not coming from these two professions, a more cautious approach will be taken (see <span class="font-style-italic">Re Ng Hing Kwong</span> [2003] 3 H.K.L.R.D. 230).</div>
</td>
<td class="auto-style1">
<div class="para">
<span class="font-style-bold">BO 20A BFR 165 </span>
<span class="font-style-italic">[Application for Interim Order]</span>
</div>
</td>
</tr>
<tr>
<td class="null"><div class="para"></div>
</td>
<td class="null"><div class="para"></div>
</td>
<td>
<div class="para">An application for an interim order may be made by:</div>
</td>
<td class="null"><div class="para"></div>
</td>
</tr>
</tbody>
</table>
</div>
here, i want to hide the first cell by using a css attribute and set the number in table first cell equal to the number in the para above. please refer the below screenshot.
There is a gap between the number start and also there is an extra cell(for which i gave class as 'null'), it should be hidden please refer to my second screen shot. please let me know how i can do this.
JsFiddle is here
you can modifie your css like this :
.main{
margin-left: 5.0em;
margin-right: 0.2em;
}
table.frame-all{
width: 97%;
border-collapse: collapse;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
padding: 10px 10px 10px 10px;
}
.frame-all td {
border: 0.080em solid;
padding-right: 0.4em;
padding: 7px 7px 7px 7px;
}
td.null {
border:none; !important
}
.para span.phrase {
text-indent: 0em;
font-weight: bold;
}
you may need some "adjustment", but it seems to be what you need.
Padding properties caused the gap between first row, and dates, also, i used "border : none;" on this first column to hide the border around the date. (it exist but you don't see it)
I Hope it may help you,
Best regards