I can't seem to get media queries to work - at least for the one relevant style which needs to work - padding for the table-wrapper class. The padding set inline always wins.
I believe I need to have !important set for the media query so I do have that.
Media queries are at the top of the html
This is at the top of the html - <meta name="viewport" content="width=device-width">
The rest of the styles are inline / done by an app.
Anyone know what I might be missing?
https://codepen.io/lg00/pen/LvrXVY
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title></title>
<style>
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.header-title h1 {
font-size: 25px !important;
}
}
</style>
<div class="email-wrapper" style="background-color:#F5F6F7">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<!-- PADDING SET HERE -->
<table cellpadding="0" cellspacing="0" class="table-wrapper" style="margin:auto; margin-top:50px; background-color:#fff; padding:64px 100px">
<tbody>
<tr>
<td class="container header" style="background-repeat:no-repeat; border-top-left-radius:6px; border-top-right-radius:6px; text-align:center; color:#000; padding-bottom:32px; display:block !important; margin:0 auto !important; clear:both !important">
<div class="header-title" style="font-weight:bold">Test</div>
</td>
</tr>
<tr>
<td class="content" style="border-bottom-left-radius:6px; border-bottom-right-radius:6px; margin:0 auto !important; clear:both !important">
<div class="header-title" style="color:#000; text-align:center">
<h1 style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom:15px; color:#47505E; margin:0px 0 10px; line-height:1.2; font-weight:200; line-height:45px; font-weight:bold; margin-bottom:30px; font-size:28px; line-height:40px; margin-bottom:32px; font-weight:400; color:#000; padding-top:0px">Test The Length of the Title - Will it Wrap</h1>
</div>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="text-center" style="text-align:center">
Test
</td>
</tr>
</tbody>
</table>
<table class="data-table bordered" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px; border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<tbody>
<tr>
<td class="data-table-title" style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; font-weight:bold; font-size:20px; padding-top:0px">Test</td>
</tr>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
</tr>
<tr class="bordered" style="border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">test</td>
</tr>
</tbody>
</table>
<table class="data-table" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px">
<tbody>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test</span><br>
test<br>
</p>
</td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; width: 20%"></td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test2</span><br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="width:100%; text-align:center; clear:both !important">
<p class="text-center" style="text-align:center; font-size:12px; color:#666">Test</p>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</div>
It is a specificity issue in your media queries. Move .header-title above .table-wrapper since the padding is overriding what is being set in .table-wrapper
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
Change your css to this, I hope it will work.
<style>
//Default styling
.table-wrapper {
width: 50%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
.header {
border-radius: 0px;
}
.header-title {
padding-left: 20px;
padding-right: 20px;
}
.header-title h1 {
font-size: 25px;
}
}
</style>
Please check the CSS specificity, as you said the in-line style is the most specific selector and "wins".
CSS specificity:
Inline Style
ID, Class
Pseudo-class, atributes
Elements, pseudo-element
Related
I am having issues with my CSS for my current design. I have everything pretty much completed. However, in the final product, I am noticing that the "View Participation Button" is not aligned with other "View Participation Buttons." They seem up and down. The should all be aligned. I adjusted the surrounding table/box so that they are aligned by fixing the height to 150px. Can anyone see the error in my code and point out how this one part can be fixed? I have a picture below on what it looks like:
<style type="text/css">
/*<![CDATA[*/
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.em_defaultlink a {
color: inherit !important;
text-decoration: none !important;
}
.em_black a {
text-decoration: none;
color: #000000;
}
.em_white a {
text-decoration: none;
color: #ffffff;
}
.em_blue a {
text-decoration: none;
color: #0a75b1;
}
.em_grey a {
text-decoration: none;
color: #4d4d4d;
}
.em_g_img + div {
display: none;
}
#media only screen and (min-width: 481px) and (max-width: 667px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_wrapper2 {
width: 100% !important;
height: 150px !important
}
.em_hide {
display: none !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_side10 {
width: 10px !important;
}
.em_ptop {
padding-top: 20px !important;
}
/* Padding Left Right Bottom */
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_w300 {
width: 320px !important;
}
.em_w280 {
width: 320px !important;
}
.em_font_18 {
font-size: 27px !important;
line-height: 31px !important;
}
}
#media screen and (max-width: 480px) {
.em_main_table {
width: 100% !important;
}
.em_wrapper {
width: 100% !important;
}
.em_wrapper2 {
width: 100% !important;
}
.em_hide {
display: none !important;
}
.em_full_img {
width: 100% !important;
height: auto !important;
}
.em_full_img img {
width: 100% !important;
height: auto !important;
}
.em_side10 {
width: 10px !important;
}
.em_side_10 {
width: 10px !important;
}
.em_ptop {
padding-top: 20px !important;
}
/* Padding Left Right Bottom */
.em_h20 {
height: 20px !important;
font-size: 1px !important;
line-height: 1px !important;
}
.em_font_18 {
font-size: 18px !important;
line-height: 23px !important;
}
.em_w300 {
width: 300px !important;
}
/* update the N number as per width */
.em_w280 {
width: 300px !important;
}
.em_w146 {
width: 146px !important;
}
.em_aside25 {
padding: 0px 25px !important;
}
u + .em_body .em_full_wrap {
width: 100% !important;
width: 100vw !important;
}
}
A sample of my code is below:
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" class="em_ptop">
<table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tbody>
<tr>
<td align="center" valign="top">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#9E9F9F" style="background-color:#9e9f9f; color:#fff;">
Feature Presenter 3
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table>
</td>
</tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;">
<img src="./TREATMENT OPTIONS FOR ADVANCED BREAST CANCER_files/oshughnessy-joyce-800.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4D4D4D" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;height:150px" class="em_wrapper">
<tbody>
<tr>
<td align="center" valign="top" style="padding:0px 10px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px;">
<span style="font-weight:bold;">Joyce O’Shaughnessy</span><br>
Baylor University Medical Center
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#007F3D" style="border-radius:5px;">
<table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tbody>
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold;">
<a target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3" style="text-decoration:none; color:#ffffff; display:block; line-height:16px;">View
Participation<br>
Options
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
I can add the CSS styling too if needed but I think the inline CSS that I have is what needs to be adjusted/modifyed/added.
I've started by completely throwing out your table based layout, this simplifies the HTML. Then I've taken away the inline styles, which simplifies things further.
So we have a list of things, order doesn't matter so lets use an unordered list (ul).
You have many options on how to lay out the list elements, I've chose display:block for simplicity. You could also look at Flex, CSS Grid, or even CSS Tables.
To align the buttons to the bottom, I've created an element with a fixed height, set that to position:relative. I've then applied position:absolute to the button element and set the position relative to the bottom of the parent element.
.presenters {
list-style: none;
padding: 0;
}
.presenter {
display: inline-block;
margin-right: 10px;
width: 158px;
background-color: #4D4D4D;
color: #FFF;
border-radius: 0 0 5px 5px;
vertical-align: top;
overflow: hidden;
}
.presenter-imgContainer {
background-color: #FFF;
border: solid 2px #9e9f9f;
}
.presenter-img {
display: block;
width: 155px;
}
.presenter-title {
background-color: #9E9F9F;
font-size: 16px;
font-weight: 400;
text-align: center;
width: 155px;
margin: 0;
}
.presenter-content {
/*Set a sensible fixed height*/
height: 80px;
/*Give enough room in the bottom padding
For the action element
*/
padding: 8px 10px 70px;
/*We want to postion the action element
relative to this
*/
position: relative;
font-family: 'Roboto', Arial, sans-serif;
font-size: 14px;
line-height: 17px;
text-align: center;
}
.presenter-name {
font-weight: bold;
}
.presenter-action {
background-color: #007F3D;
display: block;
padding: 10px 5px;
text-decoration: none;
color: white;
border-radius: 5px;
/*Postion the button at the bottom*/
position: absolute;
bottom: 10px;
width: calc(100% - 30px);
}
<ul class="presenters">
<li class="presenter">
<div class="presenter-imgContainer">
<h2 class="presenter-title">Feature Presenter 2</h2>
<img class="presenter-img" src="https://www.fillmurray.com/154/189" />
</div>
<div class="presenter-content">
<div class="presenter-name">Dennis Salmon</div>
<div class="presenter-desc">UCLA Medical Center</div>
<a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
</div>
</li>
<li class="presenter">
<div class="presenter-imgContainer">
<h2 class="presenter-title">Feature Presenter 3</h2>
<img class="presenter-img" src="https://www.fillmurray.com/154/189" />
</div>
<div class="presenter-content">
<div class="presenter-name">Joyce O’Shaughnessy</div>
<div class="presenter-desc">Baylor University Medical Center</div>
<a class="presenter-action" target="_blank" href="http://localhost:8038/single-event/zone-t-minnesota?section=3">View Participation<br>Options</a>
</div>
</li>
</ul>
I'm creating an email templates using Marketo app. Once created, I tried sending a sample mail to myself and it all looks good:
As you can see all the elements [table] shows fine, all together and neat, but when I try forwarding the same email, this happens:
As you can see the header is broken from the body. This also happens for the footer. Why is this happening?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mizona</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
#logo img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: block;
}
td {
word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0;
}
#content-subsection-right-img td, #content-subsection-plain td, #content-subsection-left-img td {
color: #555555;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.no-spacing {
padding:0px;
margin: 0px;
}
.pad-cell5 td{
padding: 5px !important;
}
.mobile-center {
text-align: left !important;
}
#socialicons img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: inline-block !important;
border: none;
}
img {
max-width: 100%;
}
#graphic img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: none !important;
clear: both;
display: inline-block !important;
}
table[class="body"] .columns td.one {
width: 8.333333% !important;
}
table[class="body"] .column td.one {
width: 8.333333% !important;
}
table[class="body"] .columns td.two {
width: 16.666666% !important;
}
table[class="body"] .column td.two {
width: 16.666666% !important;
}
table[class="body"] .columns td.three {
width: 25% !important;
}
table[class="body"] .column td.three {
width: 25% !important;
}
table[class="body"] .columns td.four {
width: 33.333333% !important;
}
table[class="body"] .column td.four {
width: 33.333333% !important;
}
table[class="body"] .columns td.five {
width: 41.666666% !important;
}
table[class="body"] .column td.five {
width: 41.666666% !important;
}
table[class="body"] .columns td.six {
width: 50%;
}
table[class="body"] .column td.six {
width: 50%;
}
table[class="body"] .columns td.seven {
width: 58.333333% !important;
}
table[class="body"] .column td.seven {
width: 58.333333% !important;
}
table[class="body"] .columns td.eight {
width: 66.666666% !important;
}
table[class="body"] .column td.eight {
width: 66.666666% !important;
}
table[class="body"] .columns td.nine {
width: 75% !important;
}
table[class="body"] .column td.nine {
width: 75% !important;
}
table[class="body"] .columns td.ten {
width: 83.333333% !important;
}
table[class="body"] .column td.ten {
width: 83.333333% !important;
}
table[class="body"] .columns td.eleven {
width: 91.666666% !important;
}
table[class="body"] .column td.eleven {
width: 91.666666% !important;
}
table[class="body"] .columns td.twelve {
width: 100% !important;
}
table[class="body"] .column td.twelve {
width: 100% !important;
}
.pad-right-5 {
padding-right: 5px;
}
.pad-right-10 {
padding-right: 10px;
}
.pad-top-10 {
padding-top: 10px;
}
#media only screen and (max-width: 600px) {
.pad-right-10 {
padding-right: 0px;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: block;
}
#logo img {
width: 100% !important;
}
#logo-mobile img {
width: 80% !important;
}
#graphic img {
width: 100% !important;
height: auto !important;
}
*[class].center {
text-align:center !important;
margin:0 auto !important;
}
*[class].bottom-pad{ padding-bottom:35px !important;}
table[class="body"] table.columns td {
width: auto !important;
}
.social-icon td img {
width: 40px !important;
height: 40px !important;
}
}
</style>
</head>
<body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; line-height:19px; font-size:12px; margin:0; padding:0; background:#eeeeee; color: #555555;">
<table class="body" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; ">
<center style="width:100%; min-width:600px; ">
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top" width="600">
<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:600px; padding:0; display:table !important; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<div class="mktEditable" id="logo" style="" mktoname="logo">
<p style="margin:0px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-header-digest-general-v2.1.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" /> </p>
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tr class="mktoModule" id="title-date" mktoname="title/date">
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr bgcolor="#2EA049">
<td style="color:#ffffff; padding: 10px 40px" align="left" valign="middle">
<div class="mktEditable" id="title" style="" mktoname="title-date">
<p style="margin: 0px;">Volume 4 | Issue 11 | 2018</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="content-general" mktoname="general content">
<td style="padding: 20px 40px">
<div class="mktEditable" id="intro" style="margin-top: 20px;" mktoname="intro">
<h3 style="color: #88c34d; text-align: center;">Trust the Asset. Trust the Transaction.™</h3>
<p>More and more players across industries are realizing the advantages of digital transformation, making it a competitive necessity for companies to harness digital solutions. Our own rapid growth mirrors this trend, with eOriginal recently being named one of the fastest growing companies in the country.</p>
<p>Entering into 2019, eOriginal knows becoming part of the auto finance digital ecosystem is essential to achieving your business goals. To take full advantage of this continued growth, please join our upcoming webinar which is focus on the auto finance industry. Learn more about digital best practices and how originators and lenders can prioritize tech stack building and expansion.</p>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-title" mktoname="subsection-title">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsection" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>eOriginal Named to Deloitte's Technology Fast 500™ </b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-left-imgf16aafbb-fc4e-4e27-b799-256623b49daa" mktoname="mod-subsection-left-img-1">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-left-imgf16aafbb-fc4e-4e27-b799-256623b49daa" mktoname="content-subsection-left-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing"><img src="https://www.eoriginal.com/wp-content/uploads/2017/07/Random-image-_0005_iStock-511197926-1024x683.jpg" width="100%" /></p> </td>
<td width="260"> <p class="no-spacing">For the second consecutive year, eOriginal was named to Deloitte’s Technology Fast 500™, a ranking of the 500 fastest growing technology, media, telecommunications, life sciences and energy tech companies in North America. eOriginal's growth of 266 percent reaffirms its status as a leader in digital lending transformation and management.</p> <p class="no-spacing"><b>Read more</b></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-titlef7e9c286-1eb5-44f6-9d0b-5b28ac2afd8d" mktoname="subsection-title-1">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsectionf7e9c286-1eb5-44f6-9d0b-5b28ac2afd8d" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>Live Webinar: Building an End-to-End eContracting Experience in Auto Finance</b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-right-img21690d4b-48d7-4fae-a245-7fbbe7765aba" mktoname="mod-subsection-right-img-1">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-right-img21690d4b-48d7-4fae-a245-7fbbe7765aba" mktoname="content-subsection-right-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing">Whether you provide direct or indirect lending, meeting the demands of today’s auto finance market means going digital is no longer a matter of ‘if’ but ‘when’. Join defi SOLUTIONS Chief Operating Officer Lana Johnson and eOriginal's Director of FinTech Strategies John Jacobs for insights on end-to-end digital auto financing processes, from origination to asset monetization through warehouse financing or securitization. </p> <p class="no-spacing"><b>Register Now</b></p> </td>
<td width="260"> <p class="no-spacing"><br /></p> <p class="no-spacing"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Cover Defi Solutions.jpg" height="151" width="269" /></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-title3ccba291-3d31-4b47-8f3e-4c143fa31497" mktoname="subsection-title-clone">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsection3ccba291-3d31-4b47-8f3e-4c143fa31497" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>Case Study: MotoLease Selects eOriginal to Digitally Transform Powersports Financing</b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-left-img" mktoname="mod-subsection-left-img">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-left-img" mktoname="content-subsection-left-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/eO_Job-327_CS_MotoLease_COVER_01112018.png" width="178" height="252" style="display: block; margin-left: auto; margin-right: auto;" /></p> </td>
<td width="260"> <p class="no-spacing">Driven by a vision to disrupt the powersports leasing segment, MotoLease turned to eOriginal to adopt best practices in eSignature and digital asset management. This case study highlights how transformative digital lending technology drove the company's dramatic growth to corner 75 percent of the powersports leasing market. <b>Read more</b></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
</table>
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr bgcolor="#2EA049">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"> eOriginal.com </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" width="50"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr bgcolor="#353937">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2018 eOriginal, Inc. All rights reserved.</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
</tbody>
</table>
</center></td>
</tr>
</tbody>
</table>
</body>
</html>
There isn't really anything you can do to prevent this. It's well known across email development that forwarding trashes any and all email layouts in any number of ways depending on the client being used.
Best bet is to try and avoid suggesting users forward the email on and provide a 'send to a friend' landing page instead. Also informing colleagues/clients of the same and making sure they don't forward between each other. Alternatives for them are to send any tests on as attachments OR sending tests directly from your ESP.
Useful Litmus blog post going into the issue a bit more here
I'm trying to create an HTML Email with a table, and from what I've been reading, my TD, TR, and TABLEs need to be display:block in order to work, be responsive etc. However, when I put the cells in the document they stack instead of appearing linearly.
Sorry, it's so long. I've been playing with different solutions to try to get this "responsive" thing to work for this email, but i'm a bit stumped.
/* Basics */
body {
Margin: 0 !important;
padding: 0;
background-color: #ffffff;
}
table {
border-spacing: 0;
}
td {
padding: 0;
}
img {
border: 0;
}
div[style*="margin: 16px 0"] {
Margin:0 !important;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
Margin: 0 auto;
}
table[class="magic"],
table[class="magic"] tbody,
table[class="magic"] tr,
table[class="magic"] td {
display: block !important;
width: 100%;
}
/* Y! and Outlook bg image fix */
tr[class=GradeHead] {
width: 100% !important;
height: 198px;
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/5827ac1b-050b-4752-9f9f-728e05e3170b.png');
background-repeat: no-repeat !important;
background-position: 0px 6px !important;
background-size:cover;
}
tr .g-row{
width: 100% !important;
height: auto;
background-repeat: no-repeat !important;
background-size:cover;
background-position: -2px center !important;
display:table-row;
}
tr .g-row-2{
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/535bc2e7-194c-4484-b47e-d8ecd81659a1.png');
}
tr .g-row-3{
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/573b935e-64d4-43d4-b29c-aa3cc0661dbf.png');
}
tr .g-row-4{
background-image:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/535bc2e7-194c-4484-b47e-d8ecd81659a1.png');
}
td[class=option] {
width: 300px !important;
height: auto !important;
display: table-cell;
}
td[class=cover] {
background-repeat: no-repeat !important;
background-position: center !important;
width: 100% !important;
height: auto;
}
td .boys {
background-image: url('img/row-1-bubbles.png') !important;
}
td .ship {
background-image: url('img/row-2-ship.png') !important;
}
td .resort {
background-image: url('img/row-3-resort.png') !important;
}
/* iphone X Media call */
#media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3)
and (device-pixel-ratio : 3) { }
/* iphone 7,8 Media call */
#media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2)
and (device-pixel-ratio : 2) { }
/* iphone 6 Plus, 6S Plus, 7 Plus, 8 Plus Media call */
#media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3)
and (device-pixel-ratio : 3) { }
body{
background-color:#fff;
}
*{
font-family:Futura,Helvetica,Arial,sans-serif;
}
p{
color:#929292;
font-size:18px;
}
.plus{
font-size:2em;
padding:20px 10px;
border-radius:30px;
}
a{
text-decoration:none;
color:inherit;
}
#footer a{
text-decoration:underline;
}
#footer p{
color:#c5b9ac;
font-size:12px;
}
.btn-pink{
color:#fff;
background-color:#fa0375;
display:block;
padding:15px 5px;
border-radius:30px;
font-size:22px;
text-align:center;
}
.btn-white{
color:#fff;
border:2px solid #fff;
font-size:18px;
display:block;
margin:10px 25px;
padding:10px 15px;
text-align:center;
text-transform:uppercase;
border-radius:30px;
}
.btn-purp{
color:#fff;
background-color:#69034c;
display:block;
padding:15px 5px;
border-radius:30px;
font-size:20px;
text-align:center;
margin:25px 70px;
}
h3{
color:#fff;
font-size:21px;
font-weight:normal;
}
table,tr,td{
border:none;
border-collapse:collapse;
padding:0;
border-color:rgba(0,0,0,0);
border-style:none;
overflow:hidden;
}
td h3,td p{
margin:10px;
}
<table style="width:600px;height:1726px;table-layout:fixed;display:block;border:none;clear:both;" class="magic" width="600">
<tr class="GradeHead" style="height:198px;background:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/5827ac1b-050b-4752-9f9f-728e05e3170b.png') no-repeat 0px 6px;">
<td colspan="4" style="height:198px; width:600px;">
<h2 style="display:none;">You're always up to speed</h2>
</td>
</tr>
<tr style="" class="g-row g-row-2">
<td class="option" colspan="2" width="300" style="width:300px;text-align:center;" >
<h3>HEADLINE </h3>
<p>COPY</p>
Explore
</td>
<td colspan="2" class="cover boys" width="300" style="width:300px;height:300px;background:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/8d7b0292-bd08-4b33-87aa-0f56c86b24e3.png') no-repeat;">
</td>
</tr>
<tr style="" class="g-row g-row-3">
<td colspan="2" width="300" class="cover ship" style="width:300px;height:300px;) no-repeat;">
</td>
<td class="option" colspan="2" width="300" style="width:300px;text-align:center;">
<h3>HEADLINE </h3>
<p>COPY</p>
Explore
</td>
</tr>
<tr style="" class="g-row g-row-4">
<td class="option" colspan="2" width="300" style="width:300px;text-align:center;">
<h3>HEADLINE </h3>
<p>COPY</p>
Explore
</td>
<td class="cover resort" colspan="2" width="300" style="width:300px;height:300px;background:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/ecd8b1b9-fed4-42f8-a262-1f769323d7da.png') no-repeat;">
</td>
</tr>
<tr style="height:180px;">
<td colspan="4" style="background:url('https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/d176648a-185c-415d-986e-545b427b1812.png') no-repeat 0px -1px;">
<h2 style="display:none;">Connect with us: #myvacaya</h2>
</td>
</tr>
<tr>
<td>
<img src="https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/43334793-5066-4ead-accb-a1bfcf81e6b1.png" alt="A well dressed man celebrating">
</td> <td>
<img src="https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/eaea60f1-f4ba-44f2-9175-789386790126.png" alt="A group of partygoers in the sun" style="margin-bottom: 24px;">
</td>
<td>
<img src="https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/08329669-dc4e-423d-8769-acb741cf5824.png" alt="A group of mixed race friends at the beach" style="margin-bottom: 24px;">
</td>
<td>
<img src="https://gallery.mailchimp.com/88f8ea77021bbc9d2f53d5229/images/3dd02748-8597-42df-8bb4-6817f959337c.png" alt="A woman in a sun hat drinking from a straw" style="margin-bottom: 24px;">
</td>
</tr>
<tr>
<td colspan="4">
Qs? WE'VE GOT As
LET'S DO THIS
</td>
</tr>
</table>
I am making a table in CSS that will have some interesting animations on it. When clicking on the text field, it should expand, but in addition to this, it should make the button to the side of it move as well. Can anyone see an easy way of doing this? I've included the code here:
<html> <head> <title></title>
<style>
.input1 {
width: 30%;
padding: 5px 5px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 4px;
border: 2px solid #4CAF50;
-webkit-transition: width 0.35s ease-in-out;
transition: width 0.35s ease-in-out;
}
input[type=text]:focus {
background-color: #E8E8E8;
width: 45%;
button.width:50%;
}
.button {
background-color: #34B0D9;
radius: 12px;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
font-family: calibri;
font-size: 85%;
}
</style>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<table id="scoreboard" width="1000" style="border:1px solid #000000; z-index:5; position:absolute; left:250px; background-color: white;">
<tr>
<td style="font-size:180%; font-family:calibri black; padding-left:15px; padding-top:30px; padding-bottom:30px">Scoreboard</h1></td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy boats found:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy tiles checked:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Boats lost:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Time taken:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Result:</td>
</tr>
<tr>
<td style="padding-left:18px; padding-top:30px;"><input type="text" class="input1" placeholder="Enter name here..."></input></td>
</tr>
<tr>
<td style="padding-left:330px; padding-top:20px; padding-bottom:10px"><button class="button" style="padding: 8px">Submit score</button></td>
</tr>
</table>
</body>
</html>
If you can make the button go after the input (so that they are both siblings) you can use the general sibling selector: ~. The part you'd be interested in is:
input[type="text"]:focus ~ .button {
/* Your styles here */
}
This effectively selects: a .button that comes after a text field which is focused, and works as long as they're siblings (i.e. they are contained within the same element). So you can't have them wrapped in separate <td> tags.
This is of course, a pure CSS solution, so if they do have to be wrapped in separate tags, you'll need to use JS.
.input1 {
width: 30%;
padding: 5px 5px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 4px;
border: 2px solid #4CAF50;
-webkit-transition: width 0.35s ease-in-out;
transition: width 0.35s ease-in-out;
display: block;
}
input[type=text]:focus {
background-color: #E8E8E8;
width: 45%;
}
input[type=text]:focus + .button {
/* Whatever you want the button to do when the preceding input is focused */
min-width: 50%;
/* Note: we use min-width rather than width, as you can't transition `width:auto` */
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.button {
background-color: #34B0D9;
radius: 12px;
color: white;
padding: 12px;
border: none;
border-radius: 5px;
font-family: calibri;
font-size: 85%;
min-width: 0;
/* Note: we use min-width rather than width, as you can't transition `width:auto` */
}
<html>
<head>
<title></title>
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<table id="scoreboard" width="1000" style="border:1px solid #000000; z-index:5; position:absolute; left:250px; background-color: white;">
<tr>
<td style="font-size:180%; font-family:calibri black; padding-left:15px; padding-top:30px; padding-bottom:30px">Scoreboard</h1>
</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy boats found:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Enemy tiles checked:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Boats lost:</td>
</tr>
<tr>
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Time taken:</td>
</tr>
<tr style="background-color:#E8E8E8">
<td style="padding-left:20px; padding-top:25px; padding-bottom:25px">Result:</td>
</tr>
<tr>
<td style="padding-left:18px; padding-top:30px; display:block">
<input type="text" class="input1" placeholder="Enter name here..."></input>
<button class="button">Submit score</button>
</td>
</tr>
</table>
</body>
</html>
I would like my "feild labels" to be aligned in the center of their corresponding text fields. I have tried many different ways, and to get it centered on the page, I used tables. I am currently using "display: inline-block;" and "vertical-align: middle;" with no success.
Image Link
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>DNA Translator</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<script></script>
</head>
<body>
<div>
<form>
<table valign="center" id="table1">
<tr>
<td class="labels">DNA:</td>
<td class="spacer"></td>
<td><input type="text" name="dna" placeholder="DNA"></td>
</tr>
<tr>
<td class="labels">mRNA:</td>
<td class="spacer"></td>
<td><input type="text" name="mrna" placeholder="mRNA"></td>
</tr>
<tr>
<td class="labels">tRNA:</td>
<td class="spacer"></td>
<td><input type="text" name="trna" placeholder="tRNA"></td>
</tr>
<tr>
<td class="labels">Amino Acids:</td>
<td class="spacer"></td>
<td><input type="text" name="aminoAcids" placeholder="Amino Acids"></td>
</tr>
<tr>
<td></td>
<td class="spacer"></td>
<td class="button"><button id="button_translate" type="button">Tanslate</button>
<button id="button_clear" type="button">Clear</button></td>
</tr>
</table>
<!--<div id="text">
<p>DNA: </p><input type="text" name="dna" placeholder="DNA"><br>
<p>mRNA: </p><input type="text" name="mrna" placeholder="mRNA"><br>
<p>tRNA: </p><input type="text" name="trna" placeholder="tRNA"><br>
<p>Amino Acids: </p><input type="text" name="aminoAcids" placeholder="Amino Acids"><br>
</div>
<div>
<button id="button_translate" type="button">Tanslate</button>
<button id="button_clear" type="button">Clear</button>
</div>-->
</form>
</div>
</body>
</html>
My CSS (as you can see I've tried a lot of things):
div.container {
width:98%;
margin:1%;
}
table#table1 {
margin-left:auto;
margin-right:auto;
/*width:530px;*/
}
td {
height:20px;
}
td.button {
height:40px;
}
td.labels {
width:89px;
display: inline-block;
text-align:right;
vertical-align: middle;
}
td.spacer {
width:15px;
}
#button_translate
{
opacity: 0.7;
display: inline-block;
height:35px;
width:200px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 15px auto;
}
#button_clear
{
opacity: 0.7;
display: inline-block;
height:35px;
width:200px;
background-color:#293FE3;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
/*display: block;*/
margin: 15px auto;
}
input[type="text"]
{
width: 390px;
display:/*block;*/ inline-block;
vertical-align:middle;
height:20px;
padding:4px 6px;
margin-bottom:20px;
font-size:14px;
line-height:20px;
color:#555;
vertical-align:middle;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px
background-color:#fff;
border:1px solid #ccc;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}
#text
{
width: 450px ;
margin-top; 800px;
margin-left: auto ;
margin-right: auto ;
}
You can add padding to your .labels css property, in your case, around 6px should do it!
td.labels {
width: 89px;
display: inline-block;
text-align: right;
padding-top: 6px;
vertical-align: middle;
}
Also, you have way too many elements for something that could be so simple:
DEMO: http://jsfiddle.net/shannonhochkins/d4rLD/2/