I am adding some styling to what ultimately ends up being printed as a footer section of a PDF. All I'm trying to do is align the page number display to the right of the page - currently it's displaying on the left:
<table style="margin: 0 30px; position: absolute; float: right">
<tr style="font-size: 10px; color: #333; font-family: 'Helvetica Neue', 'Helvetica'; line-height: normal; width: 500px">
<td style="width: 2px">Page</td>
<td style="width: 2px" class='pageNumber'></td>
<td style="width: 2px">of</td>
<td style="width: 2px" class='totalPages'><td>
</tr>
</table>
I also tried this (with 100% not in quotes):
<table style="margin: 0 30px; position: absolute; float: right; width: 100%;">
And this with it in quotes:
<table style="margin: 0 30px; position: absolute; float: right; width: '100%';">
But none of the above work. The page number display is still on the far left.
What do I need to adjust to get this to float to the far right of the page?
Check this solution. I have removed the position, flex and the margin attribute.
<table style="width: 100%;">
<tr
style="font-size: 10px; color: #333; font-family: 'Helvetica Neue', 'Helvetica'; line-height: normal; width: 500px">
<td></td>
<td style="width: 2px">Page</td>
<td style="width: 2px" class='pageNumber'>5</td>
<td style="width: 2px">of</td>
<td style="width: 2px" class='totalPages'>10
</tr>
</tr>
</table>
There is no need to add the width aswell if you wish. Just add margin-left: auto to the table.
<table style="margin-left: auto;">
<tr
style="font-size: 10px; color: #333; font-family: 'Helvetica Neue', 'Helvetica'; line-height: normal; width: 500px">
<td style="width: 2px">Page</td>
<td style="width: 2px" class='pageNumber'>5</td>
<td style="width: 2px">of</td>
<td style="width: 2px" class='totalPages'>10
</tr>
</tr>
</table>
Please try below updated code.
<table style="margin: 0 30px; float: right">
<tr style="font-size: 10px; color: #333; font-family: 'Helvetica Neue', 'Helvetica'; line-height: normal; width: 500px">
<td style="width: 2px">Page</td>
<td style="width: 2px" class='pageNumber'></td>
<td style="width: 2px">of</td>
<td style="width: 2px" class='totalPages'><td>
</tr>
</table>
Related
List element is not aligning center in Internet explorer. But in Chrome the element is centered. Attached is the sample code. I am using Bootstrap CSS Framework for all the classes.
Here is the JSfiddle
https://jsfiddle.net/8cunpsvy/
HTML:
<div class="card-body">
<table class="table-sm table-hover">
<thead>
<tr class="text-center">
<th class="w-25" scope="col"></th>
<th style="width: 54%" scope="col"></th>
<th style="width: 10%" scope="col">Actual</th>
<th style="width: 1%;" scope="col">Status</th>
<th style="width: 10%" scope="col">Expected</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td class="text-center">2/13/2019</td>
<td class="text-center">
<ul class="status-circle"><li></li></ul>
</td>
<td class="text-center"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.status-circle {
list-style: none;
margin: 0;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
border-spacing: 0px;
line-height: 0;
}
.status-circle li {
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
background: #737373;
}
I have change the element inside into div and transferred all the styles from the li element also adding content.
HTML:
<div class="card-body">
<table class="table-sm table-hover">
<thead>
<tr class="text-center">
<th class="w-25" scope="col"></th>
<th style="width: 54%" scope="col"></th>
<th style="width: 10%" scope="col">Actual</th>
<th style="width: 1%;" scope="col">Status</th>
<th style="width: 10%" scope="col">Expected</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td class="text-center">2/13/2019</td>
<td class="text-center">
<div class="div-status-circle"></div>
</td>
<td class="text-center"></td>
</tr>
</tbody>
</table>
</div>
CSS:
.div-status-circle {
display: inline-block;
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
content: "";
background: #737373;
}
Try this fiddle
Fiddle
.status-circle {
border-radius: 50%;
border: 1px solid #000;
width: 15px;
height: 15px;
background: #737373;
display: block;
margin: auto;
}
instead of using list element for a single item you can achieve this by using a div or span
I'm trying to organize two sets of information in a particular way. I have a very crude mock-up here:
https://imgur.com/a/LrSCg
I have everything working except for the diving line between the two sets of info. I've tried setting up the entire thing as a table and then setting the appropriate border styles, but that didn't work out so well.
Here's what I currently have that gets me everything except the middle dividing line:
<table style="margin: 0 auto; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="300" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td><td><span id="left_name" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;"></span></td>
</tr>
</table>
</div>
<hr>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold"></span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="300" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
This is just experimental code, it hasn't been cleaned up yet, so please ignore all the in-line styling.
Here's a sloppy example I threw together: https://jsfiddle.net/33pc23w0/2/
I would like to make the line in code and not use any images since I'd like the elements to be flexible in size. Any suggestions on the middle lines?
Here's a quick solution. I set the main container to relative position and added two absolute position divs with appropriate borders and dimensions to handle the dividers.
.main-container {
width: 800px;
position: relative;
}
.divider-top {
position: absolute;
width: 150px;
height: 150px;
left: 300px;
border: 2px solid black;
border-left: 0px;
border-top: 0px;
}
.divider-bottom {
position: absolute;
width: 150px;
height: 167px;
top: 150px;
left: 300px;
border: 0px;
border-left: 2px solid black;
}
.details_images {
display: block;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 10px;
}
.btn4 {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
width: 150px;
height: 50px;
}
.btn4.focus,
.btn4:focus,
.btn4:hover {
color: #333;
text-decoration: none;
}
.btn4-confirm {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn4-confirm:active {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
<div class="main-container">
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<table style="width: 100%; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="left_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;">Blah</span></td>
</tr>
</table>
</div>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold">Blah</span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
</div>
I am developing an HTMl email for a client. Seems standard and straightforward, and nowhere near complicated. I used nested tables and all of (what I think) are the correct CSS rules and perameters. However, when the email is sent to someone who has Outlook 2009 - 2013 a strange thing happens to the second row of nested tables (see image).
Outlook nested table error
If I switch the blocks from row 1 to row 2 and so on, the error still occurs. I have thrown hard heights into every <td> and all of the necessary inlines, yet I cannot fix the error. It seems no matter what I do that second row breaks.
Does anyone see perhaps something that I do not in my code?
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing: antialiased;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
td{
border-collapse: separate !important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
a {
text-decoration:none !important;
}
img{
display:block;
outline:none;
text-decoration:none;
border:none !important;
-ms-interpolation-mode: bicubic;
}
table, table td{
border-spacing:0;
border-collapse: separate;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
padding: 0;
margin: 0;
}
table[class=full] {
width: 100%;
clear: both;
}
div {
padding: 0;
margin: 0;
}
p{
margin:0;
padding:0;
margin-bottom: 0;
line-height:1.4em;
font-size:100%;
font-family: Helvetica, Arial, sans-serif;
}
h1{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
#wrappertable{
margin:0;
padding:0;
width:100% !important;
line-height:100% !important;
}
br[class=show]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
#media screen and (max-width:600px){
table{
width:100% !important;
}
table[class=content]{
width:95% !important;
}
td[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
td[class=fullwidth]{
width:100% !important;
float:left !important;
}
/*replace image with mobile version*/
td#pic1 img{
content:url("http://www.immediatefill.com/SendyImages/AP/S9496ROW/images/header-mobile.jpg") !important;
}
div[class=height]{
height: auto !important;
}
/*repeat ID as necessary*/
img[class=fullwidth]{
width:100% !important;
height:auto !important;
}
img[class=threequarters]{
float: none !important;
width: 75% !important;
height: auto !important;
margin: auto !important;
}
img[class=twothirds]{
float: none !important;
width: 66.6666% !important;
height: auto !important;
margin: auto !important;
}
img[class=halfwidth]{
float: none !important;
width: 50% !important;
height: auto !important;
margin: auto !important;
}
img[class=onethird]{
width: 33.3333% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=quarterwidth]{
width: 25% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
div[class=fullwidth]{
max-width: 95% !important;
}
p,h1,h2[class=centered]{
text-align: center !important;
}
br[class=show]{
display: inline !important;
}
br[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
span[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
<tr>
<td width="718" align="center">
<!--THIS IS THE CONTENT TABLE-->
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="THIS IS YOUR IMAGE PATH" color="#FFFFFF"/>
</v:background>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="700">
<tr>
<td align="center"><img src="http://www.immediatefill.com/SendyImages/AP/S9496ROW/images/AP_LPG_BANNER_ENG.png" width="700" height="102" alt="Lowest Price Guarantee" class="fullwidth"/>
</td>
</tr>
<tr>
<td align="center" bgcolor="#1e8de6" style="background-color: #1e8de6">
<table cellpadding="0" cellspacing="0" border="0" class="content" width="95%" height="70">
<tr><td colspan="2" height="14" style="line-height: 14px"></td></tr>
<tr>
<td class="fullwidth">
<img src="http://www.immediatefill.com/SendyImages/AP/S9496ROW/images/AP-Logo_clear.png" width="250" height="42" alt="Advantage Program" class="twothirds" vspace="10"/>
</td>
<td class="fullwidth">
<p style="font-size: 21px; text-align: right; color: #FFFFFF; line-height: 32px;" class="centered"><strong>FEATURED</strong> <span style="font-weight: lighter !important">LOCATIONS</span></p>
</td>
</tr>
<tr><td colspan="2" height="14" style="line-height: 14px"></td></tr>
</table>
</td>
</tr>
<tr>
<td align="center" id="pic1">
<img src="http://www.immediatefill.com/SendyImages/AP/S9496ROW/images/header.jpg" width="700" height="470" alt="" class="fullwidth"/>
</td>
</tr>
<tr>
<td align="center"><br />
<p style="text-align: center; color: #1e8de6; font-size: 26px; font-weight: light"><font style="color: #1e8de6; text-align: center; font-size: 26px; font-weight: light"><strong>Find your favorite Wyndham and book today!</strong></font></p>
<br />
</td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" width="640">
<tr>
<td class="fullwidth" align="center">
<table cellpadding="0" cellspacing="0" border="0" width="320">
<tr><td style="height: 10px; line-height: 10px;" height="10" colspan="3"></td></tr>
<tr>
<td width="10" style="width: 10px !important;" align="center"> </td>
<td align="center" width="300" valign="top">
<!--property table-->
<table cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; border: solid 1px #1e8de6; border-radius: 5px;" >
<tr>
<td style="border-top-left-radius: 5px; border-top-right-radius: 5px; border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt; line-height: 168px;" class="fullwidth" align="center">
<img src="http://www.immediatefill.com/SendyImages/HLL/testing/Property3.jpg" width="300" height="168" alt="" class="fullwidth" style="display: block !important;"/>
</td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10"></td></tr>
<tr>
<td align="center" height="60" style="line-height: 60px; border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt;">
<p style="color: #1e8de6; font-size: 19px; font-weight: lighter; line-height: 24px;">Wyndham Ocean Boulevard</p>
<p style="color: #1e8de6; font-size: 15px; font-weight: bolder; line-height: 19px;">Myrtle Beach, SC</p>
</td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10"></td></tr>
<tr>
<td align="center" class="fullwidth">
<table cellpadding="0" cellspacing="0" border="0" width="300" class="content">
<tr>
<td width="10" style="width: 10px !important;"></td>
<td align="center" valign="top" height="260" style="line-height: 260px !important; height: 260px !important; width: 280px !important; border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt;" width="280" class="fullwidth">
<p style="color: #666666; font-size: 13px; line-height: 21px !important; font-family: Arial, 'sans-serif'; mso-line-height-rule: exactly;" >A stay at the stylish Wyndham Ocean Boulevard will certainly be one to remember. Enjoy award-winning accommodations and amenities surrounded by gentle waves of North Myrtle Beach. This spectacular high-rise, beachfront property is where retro-flavor meets a stylish, contemporary finish. You will certainly love returning to these one and two private bedroom vacation condos complete with full kitchen, washer and dryer and spacious living areas.</p></td>
<td width="10" style="width: 10px !important;"></td>
</tr>
</table>
</td>
</tr>
<tr><td style="height: 20px; line-height: 20px;" height="20"></td></tr>
<tr>
<td align="center" height="42" style="line-height: 42px;">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.advantageprogram.net" style="height:40px;v-text-anchor:middle;width:180px;" arcsize="10%" stroke="f" fillcolor="#1e8de6">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.advantageprogram.net"
style="background-color:#1e8de6;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:18px;font-weight:lighter;line-height:40px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;">Book Now!</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
<tr><td style="height: 20px; line-height: 20px;" height="20"></td></tr>
</table>
</td>
<td width="10" style="width: 10px !important;" align="center"> </td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10" colspan="3"></td></tr>
</table>
</td>
<td class="fullwidth" align="center">
<table cellpadding="0" cellspacing="0" border="0" width="320">
<tr><td style="height: 10px; line-height: 10px;" height="10" colspan="3"></td></tr>
<tr>
<td width="10" style="width: 10px !important;" align="center"> </td>
<td align="center" width="300" valign="top">
<!--property table-->
<table cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; border: solid 1px #1e8de6; border-radius: 5px;" >
<tr>
<td style="border-top-left-radius: 5px; border-top-right-radius: 5px; border-collapse: collapse; line-height: 168px; mso-table-lspace:0pt;mso-table-rspace:0pt;" class="fullwidth" align="center">
<img src="http://www.immediatefill.com/SendyImages/HLL/testing/Property4.jpg" width="300" height="168" alt="" class="fullwidth" style="display: block !important;"/>
</td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10"></td></tr>
<tr>
<td align="center" height="60" style="line-height: 60px; border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt;">
<p style="color: #1e8de6; font-size: 19px; font-weight: lighter; line-height: 24px;">Wyndham Resort at Avon</p>
<p style="color: #1e8de6; font-size: 15px; font-weight: bolder; line-height: 19px;">Avon, Colorado</p>
</td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10"></td></tr>
<tr>
<td align="center" class="fullwidth">
<table cellpadding="0" cellspacing="0" border="0" width="300" class="content">
<tr>
<td width="10" style="width: 10px !important;"></td>
<td align="center" valign="top" height="260" style="line-height: 260px !important; height: 260px !important; width: 280px !important; border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt;" width="280" class="fullwidth">
<p style="color: #666666; font-size: 13px; line-height: 21px !important; font-family: Arial, 'sans-serif'; mso-line-height-rule: exactly;" >Right in the heart of Rocky Mountain ski country, friendly alpine villages welcome visitors from around the world. Tucked across the Eagle River from Beaver Creek's famous slopes, this resort houses an array of apartment-style suites for up to 10 guests. Each features a full kitchen, fireplace, and private balcony. It's a dreamy place to call home, no matter the time of year.</p></td>
<td width="10" style="width: 10px !important;"></td>
</tr>
</table>
</td>
</tr>
<tr><td style="height: 20px; line-height: 20px;" height="20"></td></tr>
<tr>
<td align="center" height="42" style="line-height: 42px;">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.advantageprogram.net" style="height:40px;v-text-anchor:middle;width:180px;" arcsize="10%" stroke="f" fillcolor="#1e8de6">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.advantageprogram.net"
style="background-color:#1e8de6;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:18px;font-weight:lighter;line-height:40px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;">Book Now!</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
<tr><td style="height: 20px; line-height: 20px;" height="20"></td></tr>
</table>
</td>
<td width="10" style="width: 10px !important;" align="center"> </td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10" colspan="3"></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="718" align="center">
<!--THIS IS THE CONTENT TABLE-->
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="THIS IS YOUR IMAGE PATH" color="#FFFFFF"/>
</v:background>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="700">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" width="640">
<tr>
<td class="fullwidth" align="center" height="570" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="320">
<tr><td style="height: 10px; line-height: 10px;" height="10" colspan="3"></td></tr>
<tr>
<td width="10" style="width: 10px !important;" align="center"> </td>
<td align="center" width="300" valign="top">
<!--property table-->
<table cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; border: solid 1px #1e8de6; border-radius: 5px;" >
<tr>
<td style="border-top-left-radius: 5px; border-top-right-radius: 5px; border-collapse: collapse; line-height: 168px;" class="fullwidth" align="center" height="168">
<img src="http://www.immediatefill.com/SendyImages/HLL/testing/Property1.jpg" width="300" height="168" alt="" class="fullwidth" style="display: block !important;"/>
</td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10"></td></tr>
<tr>
<td align="center" height="60" style="line-height: 60px;">
<p style="color: #1e8de6; font-size: 19px; font-weight: lighter; line-height: 24px;">Wyndham at Waikiki Beach Walk</p>
<p style="color: #1e8de6; font-size: 15px; font-weight: bolder; line-height: 19px;">Waikiki Beach, Hawaii</p>
</td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10"></td></tr>
<tr>
<td align="center" class="fullwidth">
<table cellpadding="0" cellspacing="0" border="0" width="300" class="content">
<tr>
<td width="10" style="width: 10px !important; height: 400px;" height="400"> </td>
<td align="center" valign="top" height="400" style="line-height: 400px !important; height: 400px !important; width: 280px !important; border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt;" width="280" class="fullwidth">
<p style="color: #666666; font-size: 13px; line-height: 21px !important; font-family: Arial, 'sans-serif'; mso-line-height-rule: exactly;" >Wyndham at Waikiki Beach Walk offers a premium location just one block from Oahu's famous Waikiki Beach. Guests have easy access to shopping, dining, and live entertainment. The resort offers guests planned activities, classes, and games for adults, children and families. You will find yourself in a paradise where you can relax on a sandy beach, enjoy swimming in the Pacific Ocean, or find excitement just steps away!</p>
</td>
<td width="10" style="width: 10px !important; height:400px;" height="400"> </td>
</tr>
</table>
</td>
</tr>
<tr><td style="height: 20px; line-height: 20px;" height="20"></td></tr>
<tr>
<td align="center" height="42" style="line-height: 42px;">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.advantageprogram.net" style="height:40px;v-text-anchor:middle;width:180px;" arcsize="10%" stroke="f" fillcolor="#1e8de6">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.advantageprogram.net"
style="background-color:#1e8de6;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:18px;font-weight:lighter;line-height:40px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;">Book Now!</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
<tr><td style="height: 20px; line-height: 20px;" height="20"></td></tr>
</table>
</td>
<td width="10" style="width: 10px !important;" align="center"> </td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10" colspan="3"></td></tr>
</table>
</td>
<td class="fullwidth" align="center" height="570" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="320">
<tr><td style="height: 10px; line-height: 10px;" height="10" colspan="3"></td></tr>
<tr>
<td width="10" style="width: 10px !important;" align="center"> </td>
<td align="center" width="300" valign="top">
<!--property table-->
<table cellpadding="0" cellspacing="0" border="0" width="300" style="width: 300px; border: solid 1px #1e8de6; border-radius: 5px;" >
<tr>
<td style="border-top-left-radius: 5px; border-top-right-radius: 5px; border-collapse: collapse" class="fullwidth" align="center">
<img src="http://www.immediatefill.com/SendyImages/HLL/testing/Property2.jpg" width="300" height="168" alt="" class="fullwidth" style="display: block !important;"/>
</td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10"></td></tr>
<tr>
<td align="center" height="60" style="line-height: 60px;">
<p style="color: #1e8de6; font-size: 19px; font-weight: lighter; line-height: 24px;">Wyndham Bonnet Creek Resort</p>
<p style="color: #1e8de6; font-size: 15px; font-weight: bolder; line-height: 19px;">Orlando, Florida</p>
</td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10"></td></tr>
<tr>
<td align="center" class="fullwidth">
<table cellpadding="0" cellspacing="0" border="0" width="300" class="content">
<tr>
<td width="10" style="width: 10px !important; height:400px;" height="400"> </td>
<td align="center" valign="top" height="400" style="line-height: 400px !important; height: 400px !important; width: 280px !important; border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt;" width="280" class="fullwidth">
<p style="color: #666666; font-size: 13px; line-height: 21px !important; font-family: Arial, 'sans-serif'; mso-line-height-rule: exactly;" >Located adjacent to Walt Disney World Resort, Wyndham Bonnet Creek Resort is the perfect home base in Lake Buena Vista for all kinds of Orlando adventures, and is just a few minutes' drive to Universal Orlando Resort and Wet 'n Wild. Guests have a blast with all the fun and exciting activities available at Wyndham Bonnet Creek Resort, designed to enhance family vacations with unexpected pleasures.</p></td>
<td width="10" style="width: 10px !important;"></td>
</tr>
</table>
</td>
</tr>
<tr><td style="height: 20px; line-height: 20px;" height="20"></td></tr>
<tr>
<td align="center" height="42" style="line-height: 42px;">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.advantageprogram.net" style="height:40px;v-text-anchor:middle;width:180px;" arcsize="10%" stroke="f" fillcolor="#1e8de6">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://www.advantageprogram.net"
style="background-color:#1e8de6;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:18px;font-weight:lighter;line-height:40px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;">Book Now!</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
</tr>
<tr><td style="height: 20px; line-height: 20px;" height="20"></td></tr>
</table>
</td>
<td width="10" style="width: 10px !important;" align="center"> </td>
</tr>
<tr><td style="height: 10px; line-height: 10px;" height="10" colspan="3"></td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="718" align="center">
<table cellpadding="0" cellspacing="0" border="0" width="700">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td height="25" style="line-height: 25px;"></td></tr>
<tr>
<td align="center">
<p style="font-size: 28px; text-align: center; color: #666666;">Promo Code: <span style="color: #1e8de6; font-size: 40px; font-weight: bold">S9496ROW</span></p>
</td>
</tr>
<tr><td height="25" style="line-height: 25px;"></td></tr>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#1e8de6" style="background-color: #1e8de6">
<img src="http://www.immediatefill.com/SendyImages/AP/S9496ROW/images/numbers.png" width="550" height="118" alt="" class="fullwidth"/></td>
</tr>
<tr>
<td align="center" bgcolor="#1e8de6" style="background-color: #1e8de6">
<img src="http://www.immediatefill.com/SendyImages/AP/S9496ROW/images/email.png" width="350" height="45" alt="email: Service#Advantageprogram.net" class="fullwidth"/></td>
</tr>
<tr><td height="10" style="line-height: 10px;"></td></tr>
<tr>
<td align="center" >
<p style="font-size:11px; color:#626262; line-height: 22px;">Advantage Program • P.O. Box 35076 • Las Vegas, NV 89133-5076 • USA</p>
<p>Unsubscribe from this list</p>
</td>
</tr>
</table>
</td>
</tr>
I am able to show it ok in IE9, but in Chrome the number goes down. Trying to fix this for Chrome:
http://jsfiddle.net/we17rtoc/
<table class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th></th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
<th>AAAA</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" style="padding-top: 5px; width: 25px;"><span class="label label-success" style="margin-bottom: 3px; display: inline-block; width: 100%; height: 22px; padding-top: 2px;"><i class='fa fa-check' style="font-size: 18px;"></i></span><span style='position: relative; top: -15px; right: 0px; left: 21px;'><span style='text-align: center; float: left; width: 22px; height: 22px; border: 2px solid #5cb85c; border-radius: 100%; background-color: #f0ad4e; color: white;'>6</span></td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
Thanks for any info.
Remove the float and set display: inline-block to the span containing a number.
DEMO: https://jsfiddle.net/lmgonzalves/we17rtoc/4/
I'm running into an issue when using HTML5 form input types (number, date, email, etc) with the CSS float property. I'm trying to float these to the right, but they are not honoring that setting.
Here's a snippit where I put the CSS inline during testing:
<div class="center" style="width: 100%">
...
<div style="width: 90%" class="textfont">
...
<table style="width:100%;">
<thead>
<tr class="tableHeading">
<td style="width: 50%; text-align: center;">
Unit Types
</td>
<td style="text-align: center;">
Number of Units
</td>
</tr>
</thead>
<tbody>
<tr>
<td style="border-right: 1px;">
Single-Family Detached
</td>
<td>
<input type="number" name="txtDetached" style="width:25%; float:right" />
</td>
</tr>
<tr>
<td style="height: 32px">
Townhouse, Row, or Cluster
</td>
<td style="height: 32px">
<input type="number" name="txtCuster" style="width:25%; float:right" />
</td>
</tr>
<tr>
<td>
Garden
</td>
<td>
<input type="number" name="txtGarden" style="width:25%; float:right" />
</td>
</tr>
<tr>
<td style="height: 43px">
Mid-rise (3-5)
</td>
<td style="height: 43px">
<input type="number" name="txtMidrise" style="width:25%; float:right" />
</td>
</tr>
<tr>
<td>
High-rise (6+)
</td>
<td>
<input type="number" name="txtHighRide" style="width:25%; float: right" />
</td>
</tr>
<tr>
<td>
Other
</td>
<td>
<input type="text" name="txtOther" style="width: 80%; float: right;" />
</td>
</tr>
</tbody>
</table>
...
</div>
...
</div>
Yes, I know tables are frowned upon...
Here's the overall CSS:
.Header
{
font-size: 30px;
font-family: Cambria;
color: White;
background: #254117;
text-align: center;
font-weight: bold;
width: 90%;
}
.subHeading
{
font-family: Arial;
font-size: 11px;
text-align: left;
}
.container
{
display: table;
width: 90%;
border-collapse: collapse;
}
.heading
{
font-weight: bold;
display: table-row;
background-color: #C91622;
text-align: center;
line-height: 25px;
font-size: 14px;
font-family: georgia;
color: #fff;
}
.table-row
{
display: table-row;
text-align: center;
}
.col
{
display: table-cell;
border: 1px solid #CCC;
}
.tableHeading
{
font-family: Arial;
background: #99C68E;
font-size: 18px;
text-align: left;
}
.textfont
{
font-size: 15px;
font-family: Arial;
text-align: left;
}
input[type=text]
{
width: 100%;
height: 22px;
}
textarea
{
width: 98%;
}
table
{
border-collapse: collapse;
border: 1px solid black;
border-spacing: 10px;
}
tr
{
border-collapse: collapse;
border: 1px solid black;
}
td, th
{
padding: 5px;
}
.center
{
margin-left: auto;
margin-right: auto;
}
Here's what this displays:
As you can see the input element with type="text" works without an issue, however when type="number" it remains at the default, left justified.
This behavior exists in IE 10, FireFox, and Chrome.
I discovered the workaround is to wrap the HTML5 input types in a div and then set the CSS to float the div right, and then this works without issue. I had issues finding information for this on the net, but is this a known issue? Is the workaround actually the proper way of handling this?
EDIT: Added full CSS (minus stuff I moved inline for testing). Added entire table and the div's they are wrapped in. If I copy all of this to jsFiddle it works properly, so I'm obviously doing something wrong here...
OK, the problem related to floating elements inside <td>, use text-align can fix it.
<td style="text-align:right;">
...
</td>
More can be read here DIV in <td> float right