This is email code, hence using tables instead of using lists.
If I change the width of the promo_1-3 to be a fixed number (say 300px) I can get them to align left and right (like the original code at the desktop size) but I can't get them to ignore the originally specified left or right alignment and be centered
#media only screen and ( max-width: 660px) {
table.container { width: 100% !important; }
td.logo img { width:100% !important; }
td.headerimg img{ width: 100% !important; padding: 5px 30px 40px 30px;}
td.promos table.promo_1 { width: 100% !important; }
td.promos table.promo_1 td { padding: 20px 20px 40px 30px; }
td.promos table.promo_2 { width: 100% !important; }
td.promos table.promo_2 td { padding: 20px 0px 40px 30px; }
td.promos table.promo_3 { width: 100% !important; border-top: 1px solid #CAC5C5; }
td.promos table.promo_3 td { padding: 20px 0px 40px 30px; }
Here's the HTML:
<!-- Start story 1 -->
<tr>
<td valign="top" bgcolor="#fff" class="promos" style="padding: 10px 10px 20px 20px; background-color: #fff; font-family: Arial, Helvetica, sans-serif;">
<table class="promo_3" width="300" align="left">
<tr>
<td>
<a target="_blank" href="http://trailrunnermag.com/training/training-plans/1860-what-your-weekly-training-plan-should-look-like">
<img class="promo" alt="Promo image 1" src= "http://media.campaigner.com/media/47/474810/063016ID3.jpg"></a>
<h3 style="font-size:16px;">Promo heading here</h3>
<br><br>
Learn more
</td>
</tr>
</table>
If i understand your question correctly here is the fix:
in your HTML change the line:
<table class="promo_3" width="300" align="left">
to
<table width="300" class="promo_3" align="left">
so it applys the class specified atributes after you set the width.
This makes you table then be 100% wide on a smaller screen.
Then change your css line like this:
td.promos table.promo_3 { width: 100% !important; border-top: 1px solid #CAC5C5; }
to
td.promos table.promo_3 { width: 100% !important; text-align: center; border-top: 1px solid #CAC5C5; }
to align the Content in your table to the center.
Also, if you are using this for an Email, I'd recomend you to not use the H3 because it always gives trouble, since every client interprets it a littble bit different. Instead use a span and apply styles to it.
Related
I am sending emails through a java program using velocity template.
When I open my email in Papercut, the render is looking good but when I open the same email with Outlook, I have a lot of unwanted line breaks.
I have modified the CSS in many ways like adding a specific width for table tag etc, I can see my modifications applied in Papercut but nothing in Outlook in terms of width.
PapercutRender1
OutlookRender1
Here the Html template:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My text </title>
<style>
/* -------------------------------------
GLOBAL RESETS
------------------------------------- */
img {
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%;
}
body {
background-color: #f6f6f6;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 14px;
line-height: 1.4;
margin: 0;
padding: 0;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: separate;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
width: 100%;
}
table td {
font-family: sans-serif;
font-size: 14px;
vertical-align: top;
}
/* -------------------------------------
BODY & CONTAINER
------------------------------------- */
.body {
background-color: #f6f6f6;
width: 100%;
}
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: auto !important;
width: 580px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
box-sizing: border-box;
display: block;
Margin: 0 auto;
max-width: 580px;
padding: 10px;
}
/* -------------------------------------
HEADER, FOOTER, MAIN
------------------------------------- */
.main {
background: #fff;
border-radius: 3px;
width: 100%;
}
.wrapper {
box-sizing: border-box;
padding: 20px;
}
.footer {
clear: both;
padding-top: 10px;
text-align: center;
width: 100%;
}
.footer td,
.footer p,
.footer span,
.footer a {
color: #999999;
font-size: 12px;
text-align: center;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,
h2,
h3,
h4 {
color: #000000;
font-family: sans-serif;
font-weight: 400;
line-height: 1.4;
margin: 0;
Margin-bottom: 30px;
}
h1 {
font-size: 35px;
font-weight: 300;
text-align: center;
text-transform: capitalize;
}
p,
ul,
ol {
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
margin: 0;
Margin-bottom: 15px;
}
p li,
ul li,
ol li {
list-style-position: inside;
margin-left: 5px;
}
a {
color: #3498db;
text-decoration: underline;
}
/* -------------------------------------
BUTTONS
------------------------------------- */
.btn {
box-sizing: border-box;
width: 100%;
}
.btn > tbody > tr > td {
padding-bottom: 15px;
}
.btn table {
width: auto;
}
.btn table td {
background-color: #ffffff;
border-radius: 5px;
text-align: center;
}
.btn a {
background-color: #ffffff;
border: solid 1px #3498db;
border-radius: 5px;
box-sizing: border-box;
color: #3498db;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 25px;
text-decoration: none;
text-transform: capitalize;
}
.btn-primary table td {
background-color: #3498db;
}
.btn-primary a {
background-color: #3498db;
border-color: #3498db;
color: #ffffff;
}
/* -------------------------------------
OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.clear {
clear: both;
}
.mt0 {
margin-top: 0;
}
.mb0 {
margin-bottom: 0;
}
.preheader {
color: transparent;
display: none;
height: 0;
max-height: 0;
max-width: 0;
opacity: 0;
overflow: hidden;
mso-hide: all;
visibility: hidden;
width: 0;
}
.powered-by a {
text-decoration: none;
}
hr {
border: 0;
border-bottom: 1px solid #f6f6f6;
Margin: 20px 0;
}
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
#media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="">
<table style="width:560px;" border="0" cellpadding="0" cellspacing="0" class="body">
<tr>
<td> </td>
<td class="container">
<div class="content">
<!-- START CENTERED WHITE CONTAINER -->
<table style="width:560px;" class="main">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper">
<table style="width:560px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--<img src="http://localhost:8080/wmm-admin/icons/spidex-wmm_original.png" style="width:65%" /> -->
<br/>
<br/>
<p><b>Webb, however, is 100 times more powerful than astronomy's godfather of space telescopes and can peer much deeper into space.
Hubble studies the universe predominantly at ultraviolet and optical, or visible, wavelengths, which is the same type of light we detect with our eyes.
Webb, on the other hand, is set up to specifically look in the infrared, which is invisible to our eyes but allows it to identify the glow from the most distant objects in the universe.
It works in much the same way night vision goggles use thermal imaging technology to capture infrared light.
Because the universe is expanding, just about all of the galaxies that we see from Earth are moving away from us. This means that to us, their light appears to have a longer wavelength, or a redshift.
For very distant objects, this red shift is so large that they can only be observed in the infrared spectrum, which is where Webb comes in, while Hubble focuses on ultraviolet light.
For this reason, the two will work in tandem for a while so that scientists can analyse the data provided by both to help advance our knowledge of the cosmos and how humans first came to be.
Webb began development in 1996 and was originally envisaged to launch in 2007, but a major redesign in 2005 put this back and a series of further delays led to it eventually making it to orbit at the end of last year.
THE JAMES WEBB TELESCOPE
The James Webb telescope has been described as a 'time machine' that could help unravel the secrets of our universe.
The telescope will be used to look back to the first galaxies born in the early universe more than 13.5 billion years ago, and observe the sources of stars, exoplanets, and even the moons and planets of our solar system.
Webb, however, is 100 times more powerful than astronomy's godfather of space telescopes and can peer much deeper into space.
Hubble studies the universe predominantly at ultraviolet and optical, or visible, wavelengths, which is the same type of light we detect with our eyes.
Webb, on the other hand, is set up to specifically look in the infrared, which is invisible to our eyes but allows it to identify the glow from the most distant objects in the universe.
It works in much the same way night vision goggles use thermal imaging technology to capture infrared light.
Because the universe is expanding, just about all of the galaxies that we see from Earth are moving away from us. This means that to us, their light appears to have a longer wavelength, or a redshift.
For very distant objects, this red shift is so large that they can only be observed in the infrared spectrum, which is where Webb comes in, while Hubble focuses on ultraviolet light.
For this reason, the two will work in tandem for a while so that scientists can analyse the data provided by both to help advance our knowledge of the cosmos and how humans first came to be.
Webb began development in 1996 and was originally envisaged to launch in 2007, but a major redesign in 2005 put this back and a series of further delays led to it eventually making it to orbit at the end of last year.
THE JAMES WEBB TELESCOPE
The James Webb telescope has been described as a 'time machine' that could help unravel the secrets of our universe.
The telescope will be used to look back to the first galaxies born in the early universe more than 13.5 billion years ago, and observe the sources of stars, exoplanets, and even the moons and planets of our solar system.
End test:</b> <i>The identified trigger result is higher than the set value.</i> </p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block"></td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
On the other hand, If I put this text instead, I have no unwanted line break neither in Papercut nor in Outlook:
PapercutRender2
Outlook2
Do you have any idea of how I can get a correct render in Outlook ?
I found out the origin of the problem. I removed the "width: auto !important;" line from the .container class settings:
Before
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: auto !important;
width: 580px;
}
And after correction:
.container {
display: block;
Margin: 0 auto !important;
/* makes it centered */
max-width: 580px;
padding: 10px;
width: 580px;
}
Then it worked.
There is only one button in the card and I want it to be exactly at the centre from vertical and centre from horizontal.
Actually having no content in my card is making it shrink
.card{height:200px;width:200px}
.card-body {
padding: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border:1px solid #ccc
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
<div class="card shadow">
<div class="card-body">
<div class="text-center">
Center align
</div>
</div>
</div>
<div>
<button>Submit</button>
</div>
So, suppose this Div is the card and inside it button is the chlid. for making the button horizontally and vertically center just apply display Property Flex, justify-content property Center and align-items property to Center.
And the second issue "having no content in my card is making it shrink", it is because, having no content inside the card means there is no way that it could take some place in the browser as there is no child inside the card. but if you define a height and width to the card you will see that the card is not shirking.
Header not showing up for blackberry work ios and the wrapper isn't being respected for blackberry email. Padding is also not respected in blackberry email for buttons.
I've tried border, align, adding a wrapper div for the weird space after that appears around images. I've given up on responsiveness for those clients but I would like to just look cohesive.
html,
body {
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border: 0;
border-spacing: 0;
border-collapse: collapse
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
a {
text-decoration: none;
}
/* What it does: A work-around for email clients automatically linking certain text strings. */
/* iOS */
a[x-apple-data-detectors],
.unstyle-auto-detected-links a,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u + #body a, /* Gmail */
#MessageViewBody a /* Samsung Mail */
{
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* What it does: Prevents Gmail from changing the text color in conversation threads. */
.im {
color: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Removes right gutter in Gmail iOS app. */
/* Create one of these media queries for each additional viewport size you'd like to fix */
.email-container {
width: 100% !important;
}
/* iPhone 4, 4S, 5, 5S, 5C, and 5SE */
#media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
u ~ div .email-container {
min-width: 320px !important;
}
}
/* iPhone 6, 6S, 7, 8, and X */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
u ~ div .email-container {
min-width: 375px !important;
}
}
/* iPhone 6+, 7+, and 8+ */
#media only screen and (min-device-width: 414px) {
u ~ div .email-container {
min-width: 414px !important;
}
}
</style>
<!-- What it does: Helps DPI scaling in Outlook 2007-2013 -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- CSS Reset : END -->
<!-- Progressive Enhancements : BEGIN -->
<style>
/* What it does: Hover styles for buttons and tags */
.s-btn__primary:hover {
background: #0077CC !important;
border-color: #0077CC !important;
}
.s-btn__white:hover {
background: #EFF0F1 !important;
border-color: #EFF0F1 !important;
}
.s-btn__outlined:hover {
background: rgba(0,119,204,.05) !important;
color: #005999 !important;
}
.s-tag:hover,
.post-tag:hover {
border-color: #cee0ed !important;
background: #cee0ed !important;
}
/* What it does: Styles markdown links that we can't write inline CSS for. */
.has-markdown a,
.has-markdown a:visited {
color: #0077CC !important;
text-decoration: none !important;
}
/* What it does: Styles markdown code blocks that we can't write inline CSS for. */
code {
padding: 1px 5px;
background-color: #EFF0F1;
color: #242729;
font-size: 13px;
line-height: inherit;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif;
}
pre {
margin: 0 0 15px;
line-height: 17px;
background-color: #EFF0F1;
padding: 4px 8px;
border-radius: 3px;
overflow-x: auto;
}
pre code {
margin: 0 0 15px;
padding: 0;
line-height: 17px;
background-color: none;
}
/* What it does: Styles markdown blockquotes that we can't write inline CSS for. */
blockquote {
margin: 0 0 15px;
padding: 4px 10px;
background-color: #FFF8DC;
border-left: 2px solid #ffeb8e;
}
blockquote p {
padding: 4px 0;
margin: 0;
overflow-wrap: break-word;
}
/* What it does: Rounds corners in email clients that support it */
.bar {
border-radius: 5px;
}
.btr {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.bbr {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#media screen and (max-width: 680px) {
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* Hides things in small viewports. */
.hide-on-mobile {
display: none !important;
max-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* What it does: Utility classes to reduce spacing for smaller viewports. */
.sm-p-none {padding: 0 !important;}
.sm-pt-none {padding-top: 0 !important;}
.sm-pb-none {padding-bottom: 0 !important;}
.sm-pr-none {padding-right: 0 !important;}
.sm-pl-none {padding-left: 0 !important;}
.sm-px-none {padding-left: 0 !important; padding-right: 0 !important;}
.sm-py-none {padding-top: 0 !important; padding-bottom: 0 !important;}
.sm-p {padding: 20px !important;}
.sm-pt {padding-top: 20px !important;}
.sm-pb {padding-bottom: 20px !important;}
.sm-pr {padding-right: 20px !important;}
.sm-pl {padding-left: 20px !important;}
.sm-px {padding-left: 20px !important; padding-right: 20px !important;}
.sm-py {padding-top: 20px !important; padding-bottom: 20px !important;}
.sm-mb {margin-bottom: 20px !important;}
/* What it does: Utility classes to kill border radius for smaller viewports. Used mainly on the email's main container(s). */
.bar,
.btr,
.bbr {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
}
</style>
<!-- Progressive Enhancements : END -->
</head>
<!--
The email background color is defined in three places, just below. If you change one, remember to change the others.
1. body tag: for most email clients
2. center tag: for Gmail and Inbox mobile apps and web versions of Gmail, GSuite, Inbox, Yahoo, AOL, Libero, Comcast, freenet, Mail.ru, Orange.fr
3. mso conditional: For Windows 10 Mail
-->
<body width="100%" style="margin: 0; padding: 0 !important; background: #f3f3f5; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #f3f3f5;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f3f3f5;">
<tr>
<td>
<![endif]-->
<!-- Visually Hidden Preview Text : BEGIN -->
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;">
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our
</div>
<!-- Visually Hidden Preview Text : END -->
<div class="email-container" style="max-width: 680px; margin: 0 auto;">
<!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<table aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 680px;">
<!-----------------------------
EMAIL BODY : BEGIN
------------------------------>
<!-- Primary Email Body : BEGIN -->
<tr>
<td style="padding: 30px; background-color: #ffffff;" class="sm-p btr">
<div dir="rtl" style="display: table; width: 100%; margin: 0 auto; text-align: center; font-size: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="620">
<tr>
<td align="left" valign="top" width="128">
<![endif]-->
<div style="display: inline-block; margin: 0 -1px; max-width: 680px; min-width:100px; vertical-align: top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<!-- White text : BEGIN -->
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #fff; text-align: left; padding-right: 0px;">
<p>
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our clients every day. Last week, we announced that we have reached an agreement to acquire Cleary Gull<br><br>
</p>
</td>
</tr>
<!-- White text : END -->
<!-- View in Browser : BEGIN -->
<tr>
<td style="padding-bottom: 10px; font-size: 12px; line-height: 15px; font-family: arial, sans-serif; color: #9199A1; text-align: left;">
<a style="color: #9199A1; text-decoration: underline;" href="http://++ViewHTMLCustom++ ">View in browser</a>
</td>
</tr>
<!-- View in Browser : END -->
<!-- Hero Image : BEGIN -->
<tr>
<td>
<a href="https://us.cibc.com/en/commercial.html">
<img src="https://sf-asset-manager.s3.amazonaws.com/96926/7/1524.png" alt="CIBC Connections" border="0" height="" width="100%" style="display: block; font-family: arial, sans-serif; font-size: 15px; line-height: 15px; color: #3C3F44;">
</a>
</td>
</tr>
<!-- Hero Image : END -->
<br>
<tr>
<td dir="ltr" style="font-family: arial, sans-serif; font-size: 15px; line-height: 140%; color: #3C3F44; text-align: left; padding-right: 0px;">
<p style="margin: 0;" class="has-markdown">
<br>
<br>
++FirstName++,<br><br>
We are committed to being the leading commercial and wealth bank for the private economy in the U.S., working hard every day to help your realize your ambitions. Enhancing our capital markets capabilities for commercial and wealth clients is an important part of being able to deliver excellence for our clients every day. Last week, we announced that we have reached an agreement to acquire Cleary Gull, a Milwaukee-based boutique investment banking firm specializing in middle market mergers and acquisitions, private capital placement and debt advisory.
<br>
<br>
Cleary Gull is a well-recognized middle market investment bank. The team has advised on over 200 transactions for clients like you and has expertise in manufacturing, business services, consumer/retail and technology.
<br>
<br>
We expect the transaction to close in the fall. Your relationship manager can answer any questions you have about Cleary Gull or our Capital Markets services for you in the meantime.
<br><br>
</p>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</td>
</tr>
<!-- PRIMARY BODY : END -->
<!-- Clear Spacer : BEGIN -->
<tr>
<td aria-hidden="true" height="10" style="font-size: 0px; line-height: 0px;">
The HTML code is:
<html>
<head>
<title>test</title>
<style type="text/css">
table {
border-collapse: collapse;
}
table tr td {
border: 2px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
</tr>
</table>
</body>
</html>
But in the output PDF file, the inner borders are doubled width.
I'm using the latest iTextSharp 5.5.6 & XML Worker 5.5.6.
Anyone has any idea why?
Thanks!
Leo
border-collapse: collapse; appears to not actually collapse the borders, but just move them really close to each other, if you look carefully you can see a fine line in the middle of the fat border. I could only see it when my pdf is opened in Chrome, not in my pdf-reader.. Here is a screenshot showing what i mean:
So I ended up setting the top and left borders of the table, and the right and bottom borders of the cells in the table, which gave me the desired thin line of only 1px instead of 2px, (AKA: only one line, instead of two lines)
.tableborder {
border-collapse: collapse;
border-spacing: 0;
border-top-color: black;
border-top-width: 1px;
border-top-style: solid;
border-left-color: black;
border-left-width: 1px;
border-left-style: solid;
}
.tableborder th, .tableborder td {
border-collapse: collapse;
border-spacing: 0;
border-right-color: black;
border-right-width: 1px;
border-right-style: solid;
border-bottom-color: black;
border-bottom-width: 1px;
border-bottom-style: solid;
}
Not pretty but it does the job ;-)
Before:
After:
#user538220, you mentioned a simple workaround in your comment, was it something like this, or was it a better solution?
below code worked for me.
table th,td {
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
}
I have seen same kind of issues in stack overflow itself. Still asking it because I am facing the following issue.
I have a textbox which has a clear icon on the right side.
And in the textbox there is a smartfill (autofilling data).
Need this to work fine in desktop browser / iphone browser / or in any mobile browser. !
HTML
<div class="outerWrapper">
<div id="mainContainer">
<label>Smartfill box
<span class="ui-icon-delete"></span>
<input type="text" placeholder="" onkeydown="smartfill()" autocomplete="off" />
<div id="smartFill1" class="smartFillBox">
<li><div>first</div>starts here</li>
<li><div>Second</div>Goes here</li>
<li><div>Third</div>Goes here</li>
<li><div>Fourth</div>Goes here</li>
</div>
</label>
</div>
</div>
CSS
/* Main css --------------------*/
.outerWrapper label input[type="text"], .outerWrapper label input[type="url"], .outerWrapper label input[type="email"], .outerWrapper label input[type="password"], .outerWrapper label input[type="tel"] {
margin-top: 0.3em;
padding: 0;
}
input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"] {
-moz-appearance: none;
border: 1px solid #CECECE;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 4px 8px #E1E1E1 inset;
display: block;
font-size: 20px;
margin: 0;
min-height: 40px;
width: 98%;
}
.outerWrapper label {
display: block;
font-size: 16px;
padding-bottom: 7px;
}
#mainContainer {
font-size: 14px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
}
/* site css --------------------*/
.ui-icon-delete {
background-attachment: scroll;
background-image: url("http://www.autoweek.com/assets/losangeles/closeButton.png");
background-origin: padding-box;
background-position: 0 50%;
background-repeat: no-repeat;
cursor: pointer;
display: none;
float: right;
height: 29px;
margin: 0 3px;
padding: 0;
position: relative;
right: 0.3%;
top: 36px;
width: 4%;
display: inline;
}
.smartFillBox {
height: 50px;
margin: -1px 0 0;
width: 98%;
display: block;
}
.smartFillBox li {
border-bottom: 1px solid #CECECE;
border-left: 1px solid #CECECE;
border-right: 1px solid #CECECE;
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
JsFiddle link for my issue is here : http://jsfiddle.net/smilyface/ze3sA/
Here is a related link: http://jsfiddle.net/PJZmv/801/
I have 3 elements. 1)input-text-box 2)clear-icon 3)smartfill-div. I am not able to relate these three accordingly! I tried jsfiddle-related-link(given above) still I am getting the same issue. Not able to align correctly.