I'm trying to setup a new email template in the Marketo editor (v.2) and make modules.
However, when I go to save my template in the editor it tells me that my modules are invalid and doesn't save. Even when I scale the template down to basically nothing, once I add any content inside the container module, it doesn't work.
Here's my code — can anyone tell me how to set the container module properly and why it's throwing an error when I try to save? I've followed the documentation (even though it's not well done) and everything seems like it should be fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%;">
<head>
<!-- Marketo Variable Definitions -->
<meta class="mktoColor" id="spacerBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoNumber" id="spacerSpacer" mktoname="Height" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="freeImageBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoColor" id="freeTextBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoNumber" id="freeTextSpacer" mktoname="Space Before Text" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="freeTextSpacer2" mktoname="Space After Text" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="footerBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoNumber" id="footerSpacer" mktoname="Space Before Text" default="10" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="footerSpacer2" mktoname="Space After Text" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoColor" id="ctaBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoColor" id="ctaButtonBackgroundColor" mktoname="Button Background Color" default="#333333" />
<meta class="mktoColor" id="ctaBorderColor" mktoname="Button Border Color" default="#333" />
<meta class="mktoNumber" id="ctaBorderSize" mktoname="Button Border Size" default="1" min="0" max="20" units="px" step="1" />
<meta class="mktoNumber" id="ctaSpacer" mktoname="Space Before Button" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="ctaSpacer2" mktoname="Space After Button" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoString" id="ctaLink" mktoname="Button Link" default="#" />
<meta class="mktoString" id="ctaLinkText" mktoname="Button Label" default="CALL TO ACTION" />
<meta class="mktoColor" id="hrBackgroundColor" mktoname="Background" default="#ffffff" />
<meta class="mktoColor" id="hrBorderColor" mktoname="Border Color" default="" />
<meta class="mktoNumber" id="hrBorderSize" mktoname="Border Size" default="1" min="0" max="20" units="px" step="1" />
<meta class="mktoColor" id="twoArticlesBackgroundColor" mktoname="Background Color" default="#ffffff" />
<meta class="mktoColor" id="twoArticlesButtonBackgroundColor" mktoname="Left Column Button Background Color" default="#333" />
<meta class="mktoColor" id="twoArticlesButtonBackgroundColor2" mktoname="Right Column Button Background Color" default="#333" />
<meta class="mktoColor" id="twoArticlesBorderColor" mktoname="Left Column Button Border Color" default="#333" />
<meta class="mktoNumber" id="twoArticlesBorderSize" mktoname="Left Column Button Border Size" default="1" min="0" max="20" units="px" step="1" />
<meta class="mktoColor" id="twoArticlesBorderColor2" mktoname="Right Column Button Border Color" default="#333" />
<meta class="mktoNumber" id="twoArticlesBorderSize2" mktoname="Right Column Button Border Size" default="1" min="0" max="20" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer" mktoname="Space Over Columns" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer2" mktoname="Left Column Space Below Image" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer3" mktoname="Left Column Space Below Title" default="15" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer4" mktoname="Left Column Space Below Text" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer5" mktoname="Right Column Space Below Image" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer6" mktoname="Right Column Space Below Title" default="15" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer7" mktoname="Right Column Space Below Text" default="20" min="1" max="300" units="px" step="1" />
<meta class="mktoNumber" id="twoArticlesSpacer8" mktoname="Space Below Columns" default="40" min="1" max="300" units="px" step="1" />
<meta class="mktoString" id="twoArticlesLink" mktoname="Left Button Link" default="#" />
<meta class="mktoString" id="twoArticlesLinkText" mktoname="Left Button Label" default="CALL TO ACTION" />
<meta class="mktoString" id="twoArticlesLink2" mktoname="Right Button Link" default="#" />
<meta class="mktoString" id="twoArticlesLinkText2" mktoname="Right Button Label" default="CALL TO ACTION" />
<!-- Other Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css" />
<!--[if mso]>
<style type='text/css'>
.primary-font {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]-->
<!--[if mso]>
<style type='text/css'>
.secondary-font {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]-->
<style>
/*startcommon*/
#media only screen and (max-width: 800px) {
table#boxing{
width: 100% !important;
}
}
/*endcommon*/
</style>
<!--[if gte mso 9]>
<style type="text/css">
#hero .table3-3{
width: 100% !important;
}
</style>
<![endif]-->
<style media="all">
/* CLIENT-SPECIFIC STYLES */
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
/* iOS BLUE LINKS */
.appleBody a {
color: #000;
text-decoration: none;
}
.appleFooter a {
color: #000;
text-decoration: none;
}
#-ms-viewport {
width: device-width;
}
</style>
<style media="all">
#media only screen and (max-width: 640px) {
/*starttablet*/
.m_video .mktoVideo tr:first-child img{
width: 100% !important;
height: auto!important;
max-height:auto!important;
min-height:auto!important;
}
body {
width: auto !important;
}
table[class="table600"] {
width: 450px !important;
}
table[class="table-inner"] {
width: 86% !important;
}
table[class="table1-2"] {
width: 47% !important;
clear: both;
}
table[class="table1-3"] {
width: 29.4% !important;
}
table[class="table1-4"] {
width: 100% !important;
text-align: left !important;
}
table[class="table2-3"] {
width: 64% !important;
text-align: center !important;
}
table[class="table3-3"] {
width: 100% !important;
text-align: center !important;
clear: both;
}
table[class="footer-logo"] {
width: 10% !important;
text-align: right !important;
}
td[class="outer"] {
min-width: 0 !important;
}
td[class="stack"] {
padding-bottom: 40px !important;
}
.stack-tablet {
padding-bottom: 20px !important;
overflow: visible !important;
float: none !important;
mso-hide: none !important;
display: block !important;
}
img[class="mobile-img"] {
width: 100% !important;
height: auto !important;
}
td[class="center-tablet"] {
text-align: center !important;
}
td[class="hide-tablet"] {
display: none !important;
}
table[class="footer-column"] {
width: 47% !important;
text-align: left !important;
}
.m_two-articles .table1-2 {
width: 100% !important;
}
.m_two-articles .photo img {
width: 100% !important;
}
.m_two-articles .stack-tablet td {
height: 60px !important;
}
.m_free-image img {
width: 450px !important;
}
/*endtablet*/
}
#media only screen and (max-width: 479px) {
/*startmobile*/
body {
width: auto !important;
}
table[class="table600"] {
width: 290px !important;
}
table[class="table-inner"] {
width: 80% !important;
float: none !important;
}
table[class="table1-2"] {
width: 100% !important;
clear: both;
}
table[class="table1-3"] {
width: 100% !important;
clear: both;
}
table[class="table1-4"] {
width: 100% !important;
text-align: center !important;
}
table[class="table2-3"] {
width: 100% !important;
text-align: center !important;
}
table[class="table3-3"] {
width: 100% !important;
text-align: center !important;
clear: both;
}
table[class="footer-logo"] {
width: 60% !important;
text-align: center !important;
}
td[class="outer"] {
min-width: 0 !important;
}
td[class="td3-1"] {
width: 60% !important;
text-align: center !important;
}
.stack-smartphone {
padding-bottom: 20px !important;
overflow: visible !important;
float: none !important;
display: block !important;
mso-hide: none !important;
}
td[class="center-smartphone"] {
text-align: center !important;
}
img[class="mobile-img"] {
width: 100% !important;
}
td[class="center-tablet"] {
text-align: center !important;
}
td[class="hide-smartphone"] {
display: none !important;
}
table[class="footer-column"] {
width: 100% !important;
text-align: center !important;
}
.m_free-image img {
width: 290px !important;
}
.m_hr .table-inner {
width: 100% !important;
}
/*endmobile*/
}
</style>
</head>
<body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; min-width: 100%; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;">
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">
</div>
<!-- Outer table START -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="outer" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; min-width: 600px; border-collapse: collapse; background-color: #eeeeee;">
<table width="800" align="center" id="boxing" border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="mktoContainer" id="template-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table width="630" border="0" cellpadding="0" cellspacing="0" align="center" class="main-nav-breakpoints" style="margin:0 auto;">
<tr>
<td width="100%" bgcolor="#F2F8FB">
<!-- Nav -->
<table border="0" height="100" cellpadding="0" cellspacing="0" class="main-nav-breakpoints">
<tr>
<td style="margin:0; padding:0px 0px 0px 20px;">
<img src="images/logo#2x.png" width="164" height="54" alt="" border="0" align="left" class="logo" style="margin:0; padding:0;"/>
</td>
<td align="right" style="width: 75%; padding: 0; font-size: 13px; color: #ffffff; font-weight: normal; text-align: right; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: bottom; font-style:normal;padding:0px 20px 24px 0px;">
one
two
three
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Outer Table END -->
</body>
</html>
I don't see any modules defined the code you provided. Which sections do you want to be modules?
If your container is a td then all the tables within that TD should be your modules. And ALL your tables(modules) within that container td need to be marked as a module table by adding class="mktoModule"
According to Marketo's documentation, the type of element's that can have the class "mktoContainer" is a table, tbody, thead, tfoot, or td, and only modules can be inside those elements. If there's anything else present, the container will be considered invalid.
In your HTML, you've defined a td element as the container, but you haven't defined any actual modules within that container. To the table immediately inside your container, you should add the class "mktoModule", a unique id, and the mktoName attribute with a value. Example of changes are below, specifically noting the changes on line 2:
<td class="mktoContainer" id="template-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table id="module_navigation" mktoName="Navigation" width="630" border="0" cellpadding="0" cellspacing="0" align="center" class="main-nav-breakpoints mktoModule" style="margin:0 auto;">
<tr>
<td width="100%" bgcolor="#F2F8FB">
<!-- Nav -->
<table border="0" height="100" cellpadding="0" cellspacing="0" class="main-nav-breakpoints">
<tr>
<td style="margin:0; padding:0px 0px 0px 20px;">
<img src="images/logo#2x.png" width="164" height="54" alt="" border="0" align="left" class="logo" style="margin:0; padding:0;"/>
</td>
<td align="right" style="width: 75%; padding: 0; font-size: 13px; color: #ffffff; font-weight: normal; text-align: right; font-family: Georgia, Times, serif; line-height: 20px; vertical-align: bottom; font-style:normal;padding:0px 20px 24px 0px;">
one
two
three
</td>
</tr>
</table><!-- End Nav -->
</td>
</tr>
</table><!-- End Header -->
</td>
Optionally, you can include the mktoActive and mktoAddByDefault attributes with boolean values to your module.
Related
Specific posts on my Tumblr page keep bleeding into to the theme background. It is only happening with posts that include both images and text, however not with each one of them. I've tried everything I could to fix it but it has only made it worse.
I have also tried changing my overflow tag to hidden from visible but all it does is cut off the overflowed part instead of stopping the overflow.
This is what it looks like:
text overflowing
image overflowing
Here are the codes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- Theme by conkersradfurday, massively edited from destroyer's theme
-->
<html>
<head>
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#e5e5e5"/>
<meta name="color:center background" content="#ffffff"/>
<meta name="color:post" content="#f9d6b6"/>
<meta name="color:sidebar" content="#ffffff"/>
<meta name="color:interests title" content="#ffffff"/>
<meta name="color:sidebox" content="#ffffff"/>
<meta name="color:sidebox border" content="#6699cc"/>
<meta name="color:sidebox left" content="#B0CFF0"/>
<meta name="color:sidebox right" content="#D3E7FB"/>
<meta name="color:sidebox bold:" content="#39658c"/>
<meta name="color:Orange Text" content="#ff6600"/>
<meta name="color:Orange Background" content="#ffcc99"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:text headers" content="#000000"/>
<meta name="color:bold text" content="#000000"/>
<meta name="color:label background" content="#f4f4f4"/>
<meta name="color:link" content="#003399"/>
<meta name="color:link hover" content="#cc0000"/>
<meta name="color:notes" content="#464646"/>
<meta name="color:notes hover" content="#949494"/>
<meta name="color:nav link" content="#ffffff"/>
<meta name="color:nav link hover" content="#000000"/>
<meta name="color:nav background" content="#6697cf"/>
<meta name="color:header background" content="#003399"/>
<meta name="color:asker background" content="#FF9933"/>
<meta name="text:Sex" content="Female"/>
<meta name="text:Age" content="15 Years Old"/>
<meta name="text:City" content="Hollywood"/>
<meta name="text:Country" content="California"/>
<meta name="text:Music" content=""/>
<meta name="text:Movies" content=""/>
<meta name="text:Tv" content=""/>
<meta name="text:Books" content=""/>
<meta name="text:Heroes" content=""/>
<meta name="text:Headline" content="I'm back<br>on MySpace!"/>
<meta name="text:Background Size" content="25%" />
<meta name="text:Profile Song" content="http://mp3.qqkjkl.com/mp3/18/30336027.mp3" />
<meta name="text:Mood" content="Nostalgic" />
<meta name="text:Status" content="Single"/>
<meta name="text:Orientation" content="Bisexual"/>
<meta name="text:Ethnicity" content="r"/>
<meta name="text:Religion" content=""/>
<meta name="text:Occupation" content=""/>
<meta name="image:Portrait" content=""/>
<meta name="image:Background" content=""/>
<meta name="if:Show Infinite Scroll" content="1" />
<meta name="if:Show Photo Caption" content="1" />
<meta name="font:Header Title" content="'Verdana', Impact, Gadget, sans-serif, Arial, Trebuchet MS, Helvetica, Tahoma, sans-serif" />
<meta name="font:Body" content="'verdana', arial, Trebuchet MS, Helvetica, Tahoma, sans-serif" />
<meta name="text:Custom Link One" content="" />
<meta name="text:Custom Link One Title" content="" />
<meta name="text:Custom Link Two" content="" />
<meta name="text:Custom Link Two Title" content="" />
<meta name="text:Custom Link Three" content="" />
<meta name="text:Custom Link Three Title" content="" />
<meta name="text:Custom Link Four" content="" />
<meta name="text:Custom Link Four Title" content="" />
<title>{Title}</title>
<link rel="stylesheet" href="http://static.tumblr.com/usaykzx/o8Bku9w35/reset.css" type="text/css" />
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
{block:IfShowInfiniteScroll}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:IfShowInfiniteScroll}
<style type="text/css">
body{
margin-top:0px;
text-align:justify;
color: {color:Text};
font-family: {font:Body};
font-size: 11px;
line-height: 12px;
background-color:{color:Background};
background-image:url({image:Background});
background-attachment: repeat;
background-position:top left;
background-repeat: repeat;
background-size:{text:Background Size};{text:Background Size}
}
a, a:link, a:visited, a:active{color: {color:link}; text-decoration:none;
font-family: {font:Body};
font-size: 11px; line-height:12px; }
a:hover{color: {color:link hover}; line-height:12px;}
#tumblr_controls{
position:fixed!important;}
b, strong{color: {color:bold text};
font-family: {font:Body};
font-size: 11px; line-height:12px;}
#wtf {
background-color:{color:center background};
margin-top:0px;
width:750px;
overflow: visible;
margin-left: -375px;
left:50%;
position: absolute;
padding-top:10px;
color: {color:Text};
font-family: {font:Body};
font-size: 11px;
line-height: 12px;}
#entry {
background-color: {color:post};
border: 0px solid {color:post};
z-index:6;
float:right;
overflow:visible;
width:400px;
height: auto;
padding: 6px;
margin:0px 10px 6px 0px;}
#sidebar {
position: absolute;
overflow:hidden;
margin-top: 0px;
margin-left:-364px;
left: 50%;
background-color:{color:sidebar};
width: 304px;
height: auto;
padding: 0px;}
#sidebox {
border-top:20px solid {color:sidebox border};
border-left:2px solid {color:sidebox border};
border-right:2px solid {color:sidebox border};
border-bottom:2px solid {color:sidebox border};
overflow:hidden;
margin-top: 0px;
background-color:{color:sidebox};
width: 300px;
height: auto;
padding: 0px;}
#sidebox b {color:{color:sidebox bold};}
#info {
background-color: {color:post};
border: 0px solid {color:post};
z-index:6;
float:right;
overflow:visible;
width:400px;
height: auto;
padding: 6px;
margin:0px 10px 6px 0px;}
#notes {
background-color: {color:post};
border: 0px solid {color:post};
z-index:6;
float:right;
overflow:visible;
width:400px;
height: auto;
padding: 6px;
margin:0px 10px 6px 0px;}
#entry img { max-width:400px;}
p{
margin-top:0px;
margin-bottom:0px;}
#question{
overflow:SHOW;
padding-bottom:3px;
margin-bottom:3px;}
#askr{
display:block;
float:left;
width:33px;
overflow:hidden;
margin-right:3px;}
ul {
list-style: disc;
padding: 4px 0px 6px 20px;}
blockquote{padding:0px; padding-left:5px; margin:5px; border-left:2px solid {color:label background};}
blockquote img{display:block; width:100%;}
blockquote p{padding:0px; margin:0px;}
blockquote blockquote{position:relative; left:6px; margin-top:0px; margin-right:0px; padding-right:0px;}
#bottominfo{
padding:2px 0px 0px 0px;
display:block;}
.answer p{margin:0px;}
.notes img{
width:10px;
position:relative;
top:1px;}
ol.notes, .notes li{
list-style:none;
margin:0px;
padding:0px;}
small {font-size:8px; line-height:8px; letter-spacing:0px;}
big {font-family:arial black; color:{color:text}; font-size:14px;}
.audio {width:100%; background:black; border:0px dotted #D6D6D6;}
a img{border:none;}
.label {
color: {color:bold text};font-weight: bold; line-height:12px;}
.odd {
background-color:{color:label background};}
h1 {
font-size: 12px;
line-height: 12px;
font-family: verdana;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
color:{color:text headers};
text-align: left;
margin:0px;
padding-bottom:1px;}
h2 {
font-size: 16px;
line-height: 16px;
font-family: impact;
font-weight:normal;
text-transform: uppercase;
letter-spacing: -1px;
color:{color:text headers};
text-align:left;}
h3 {
font-size: 18px;
line-height: 20px;
font-family: {font:Header Title};
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
color:{color:text headers};
text-align: left;
margin:0px;
padding-bottom:4px;}
h4 {
font-size: 12px;
line-height: 12px;
font-family: {font:Header Title};
font-weight: bold;
text-transform: capitalize;
letter-spacing: -1px;
color: {color:Orange Text};
text-align: left;
margin:0px;
padding-bottom:4px;}
h5 {
font-size: 12px;
line-height: 12px;
font-family: {font:Header Title};
font-weight: bold;
text-transform: capitalize;
letter-spacing: -1px;
color: {color:interests title};
text-align: left;
margin:0px;}
a.links1 {
text-align:center;
margin-top:6px;
margin-bottom:8px;
color: {color:nav link};
display: inline-block;
text-transform: capitalize;
font-family:arial;
font-weight:normal;
font-size:12px;
padding: 2px;}
a.links1:hover {
color: {color:nav link hover};}
#ask {
font-size:12px;
line-height:12px;
padding:4px;
margin-bottom:4px;}
img.middle {
vertical-align:middle;
margin-bottom:3px;}
#notez {
margin-top: 0px; margin-bottom:4px; width:400px;}
#notez a {
font-family: arial;
font-size: 9px;
line-height: 10px;
letter-spacing:1px;
text-transform: normal;}
table {
border-collapse: separate;
border-spacing: 3px;}
#header1 {
padding:4px;
margin-left:328px;
margin-bottom:6px;
width:404px;
height: 12px;
background-color:{color:Orange Background};}
#header2 {
padding:4px;
margin-left:328px;
margin-bottom:6px;
width:404px;}
#header3 {
padding:4px;
margin-left:328px;
margin-bottom:6px;
width:404px;
border-style: solid;
border-width: 2px;
border-color:#000;}
#myspaceheader {
width:750px;
height:81px;
background-color:{color:header background};
margin-left: auto;
margin-right: auto;}
{CustomCSS}
#navigation {
width:750px;
height:30px;
background-color:{color:nav background};
margin-left: auto;
margin-right: auto;}
{CustomCSS}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/3ikgvxs/0TGl4zgpu/jquery.min.js"></script>
</head>
<body>
<div id="myspaceheader">
<div align=right><font color="white">Sign Up</font></div>
<div align=center><form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form></div>
<div align=left><img src="http://i.imgur.com/MKqRxyf.png" title="Join the MySpace rebirth!" /></div>
</div>
<div id="navigation">
<center>
Home |
{block:AskEnabled}Ask{/block:AskEnabled} |
Archive|
{block:SubmissionsEnabled}Submit{/block:SubmissionsEnabled}|
{block:HasPages}
{block:Pages}
{Label}
{/block:Pages}
{/block:HasPages}
{block:ifCustomLinkOneTitle}{text:Custom Link One Title}{/block:ifCustomLinkOneTitle} |
{block:ifCustomLinkTwoTitle}{text:Custom Link Two Title}{/block:ifCustomLinkTwoTitle} |
{block:ifCustomLinkThreeTitle}{text:Custom Link Three Title}{/block:ifCustomLinkThreeTitle} |
{block:ifCustomLinkFourTitle}{text:Custom Link Four Title}{/block:ifCustomLinkFourTitle}
</center>
</div>
<div id="wtf">
<div id="sidebar">
<h3>{Title}</h3>
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div style="clear:both;">
<div style="float:left;">
{block:IfPortraitImage}
<img src="{image:Portrait}" width="200">
{/block:IfPortraitImage}
</div>
<div style="float:right;">
<div style="margin-left:8px;">
"{text:Headline}" <br> <br>
{text:Sex} <br>
{text:Age} <br>
{text:City} <br>
{text:Country} <br><br>
<img src="http://media.tumblr.com/tumblr_m2lh9lgwvA1qaxq5z.gif">
</div>
</div>
</div>
</td>
</tr>
</table><br>
Last Login: <script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)
//-->
</script>
<br><br>
<b><color="{color:post}">Mood:</color></b> {text:mood}</a>
<br>
View My: <b>Pics</b> | <b>Archive</b>
<br>
<br>
<div id="sidebox">
<div style="position:absolute; margin-top:-16px; "><h5>Contact {title}</h5></div>
<table width="300" border="0" cellspacing="6" cellpadding="0">
<tr>
<td width="150" align="left"><img src="http://i.imgur.com/J4RAuTM.gif" /></td>
<td width="150"><img src="http://i.imgur.com/UCOmMMp.gif"></a></td>
</tr>
<tr>
<td width="150" align="left"><img src="http://i.imgur.com/dtwze3M.gif" /></td>
<td width="150"><img src="http://i.imgur.com/QYs8aR4.gif"></a></td>
</tr>
</table>
</div><br>
<br>
<br>
<div style="border:1px solid {color:sidebox border}; width:302px;">
<h1>MySpace URL:</h1>
http://{name}.tumblr.com
</div><br>
<br>
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="295" height="51">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="mp3={text:Profile Song}&width=295&height=51&buttonwidth=54&sliderwidth=40&skin=http%3A//i.imgur.com/uh9op43.jpg&sliderovercolor=310057&buttoncolor=140014&buttonovercolor=fcfcfc" />
</object>
<config>
<param name="mp3" value="{text:Profile Song}"/>
<param name="width" value="295"/>
<param name="height" value="51"/>
<param name="buttonwidth" value="54"/>
<param name="sliderwidth" value="40"/>
<param name="skin" value="http%3A//i.imgur.com/uh9op43.jpg"/>
<param name="sliderovercolor" value="310057"/>
<param name="buttoncolor" value="140014"/>
<param name="buttonovercolor" value="fcfcfc"/>
</config>
<br><br>
<div id="sidebox">
<div style="position:absolute; margin-top:-16px; "><h5>{title}'s interests</h5></div>
<table width="300" border="0" cellspacing="6" cellpadding="0">
<tr>
<td width="100" align="left" bgcolor="{color:sidebox left}"><b>Music:</b></td>
<td width="188" bgcolor="{color:sidebox right}">{text:Music}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Movies:</b></td>
<td bgcolor="{color:sidebox right}">{text:Movies}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Television:</b></td>
<td bgcolor="{color:sidebox right}">{text:TV}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Books:</b></td>
<td bgcolor="{color:sidebox right}">{text:Books}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Heroes:</b></td>
<td bgcolor="{color:sidebox right}">{text:Heroes}</td>
</tr>
</table>
</div><br>
<div id="sidebox">
<div style="position:absolute; margin-top:-16px; "><h5>{title}'s Details</h5></div>
<table width="300" border="0" cellspacing="6" cellpadding="0">
<tr>
<td width="100" align="left" bgcolor="{color:sidebox left}"><b>Status:</b></td>
<td width="188" bgcolor="{color:sidebox right}">{text:Status}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Orientation:</b></td>
<td bgcolor="{color:sidebox right}">{text:Orientation}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Ethnicity:</b></td>
<td bgcolor="{color:sidebox right}">{text:Ethnicity}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Religion:</b></td>
<td bgcolor="{color:sidebox right}">{text:Religion}</td>
</tr>
<tr>
<td align="left" bgcolor="{color:sidebox left}"><b>Occupation:</b></td>
<td bgcolor="{color:sidebox right}">{text:Occupation}</td>
</tr>
</table>
</div>
</div>
<div id="header3"><br><br><center><b><color="{color:post}"></color><font style="font-size:16px!important;">{title} is in your extended network.</b></center><br><br></font></div>
<div id="header1"><h4>{title}'s Blurbs</h4></div>
<div id="header2">
{block:Description}<h4>About Me:</h4> {Description}<br><br>{/block:Description}
</div>
<div id="header1"><h4>{title}'s Posts</h4></div>
<div class="autopagerize_page_element">
{block:Posts}
<div id="entry">
{block:IndexPage}
<div id="notez">
<h1>{ShortMonth} {DayOfMonth} {Year} {12Hour}:{Minutes} {AmPm}</h1>
{NoteCount} Notes - View Post - Reblog
</div>
{/block:IndexPage}
{block:Text}<h2>{Title}</h2>{Body}{/block:Text}
{block:Photo}
{block:IndexPage}
<center><img src="{PhotoURL-500}" width="400" border="0"></center>
{block:IfShowPhotoCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowPhotoCaption}
{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" width="400" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}{/block:Photo}
{block:Photoset}<center>{block:IndexPage}{Photoset-400}{/block:IndexPage}{block:PermalinkPage}{Photoset-400}{/block:PermalinkPage}</center>{block:PermalinkPage}{/block:PermalinkPage}
{block:IfShowPhotoCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfShowPhotoCaption}
{/block:Photoset}
{block:Quote}<h2>"{Quote}"</h2>{block:Source}{Source}{/block:Source}{/block:Quote}
{block:Link}<a href="{URL}" class="link" {Target}><h2>{Name}</h2></a>{block:Description}{Description}{/block:Description}{/block:Link}
{block:Chat}
{block:Title}{Title}{/block:Title}
{block:Lines}
{block:Label}
<div class="{Alt}"><span class="label"><strong>{Label}</strong></span>
<span class="line">{Line}</span></div>
{/block:Label}
{/block:Lines}
{/block:Chat}
{block:Video}<center>{block:IndexPage}<div id="video">{Video-400}</div>{block:IfNotHidePhotoCaption}{block:Caption}{Caption}{/block:Caption}{/block:IfNotHidePhotoCaption}{/block:IndexPage}<img src="http://i.imgur.com/hR6o8o2.png"/>
{block:PermalinkPage}<div id="video">{Video-400}</div>{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}</center>
{/block:Video}
{block:Audio}
<center><div class="audio">{AudioPlayerBlack}</div></center>
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}
{block:Answer}
<table style="border-bottom:1px solid #a0a0a0;padding-bottom:5px;margin-bottom:5px;">
<tr>
<td style="vertical-align:top;padding-right:30px;padding-left:30px;padding-top:10px;padding-bottom:30px" bgcolor={color:asker background}><b>{Asker}</b><br><br><img src="{AskerPortraitURL-96}"></td>
<td style="vertical-align:top;"><strong></strong><br>{Question}</td>
</tr>
</table>
{Answer}
{/block:Answer}
</div>
{block:PermalinkPage}
{block:Date}
<div id="info"><div id="bottominfo">
Posted: {ShortDayOfWeek} {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes}{AmPm}{block:RebloggedFrom}<br>Originally posted by {ReblogRootName}.{/block:RebloggedFrom}
{block:Photo}{block:HighRes}<br>HighRes: view{/block:HighRes}{/block:Photo}
{block:Answer}<BR>Ask: {AskLabel}{/block:Answer}
{block:Audio}<BR>Plays: {FormattedPlayCount}{block:ExternalAudio}<BR>Download: here.{/block:ExternalAudio}{/block:Audio}
{block:HasTags}<BR>Tagged: {block:Tags}{Tag} {/block:Tags}{/block:HasTags}{block:NoteCount}<BR>Notes: {NoteCount}{/block:NoteCount}
</div></div>
{/block:Date}
{/block:PermalinkPage}
{block:PostNotes}
<div id="notes">{PostNotes}</div>
{/block:PostNotes}
{/block:Posts}
</div> </*Infinite Scroll*/>
{block:Pagination}
<div id="entry">
<center> <table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200">
{block:PreviousPage}<div align="left">◄ Previous</div>{/block:PreviousPage}
</td>
<td width="200">{block:NextPage}<div align="right">Next ►</div>{/block:NextPage}
</td>
</tr>
</table></center>
</div>
{/block:Pagination}
<center><img src="http://media.tumblr.com/tumblr_m2lokcAnTG1qaxq5z.png" width="750" height="2"><br></center>
<center><small>©2003-<script type="text/javascript">
<!--
var year = currentTime.getFullYear()
document.write(year)
//-->
</script> MySpace.com. Theme by conkersradfurday. All Rights Reserved. </small></center>
<style type="text/css">
ul#likes {
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
li.like_post {
/* Should match the width specified in the Likes tag */
width: 150px;
padding: 0 40px 0 0;
float: left;
}
li.like_post img {
max-width: 100%;
}
li.like_post blockquote {
margin: 0;
padding: 0 0 0 10px;
border-left: 1px solid #eee;
}
li.like_post ol,
li.like_post ul {
margin: 0 0 0 15px;
padding: 0;
}
li.like_post .like_link a {
font-weight: bold;
}
li.like_post .like_title {
font-weight: bold;
}
li.like_post .post_info_bottom {
margin: 10px 0 0 0;
display: block !important;
}
</style>
</head>
</html>
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 6 years ago.
Below is the code I made for a simple html table. My goal is to center the entire table vertically in the center of the page based on the users height of the device. I tried to make a div with the height as 100% and width as 100% and placing the table 50% from top and left and no luck. Any ideas?
body {
background-color: #a00000;
}
table {
margin: 50px auto 25px auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
}
td {
background-color: #fff;
padding: 10px;
background-color: #fff;
border-radius: 10px;
}
img {
max-width: 120px;
max-height: 120px;
border: solid 5px #a00000;
border-radius: 5px;
background-color: #a00000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bobcat Menu</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<table align="center">
<tr>
<td>
<a href="mobincube://action/section/DropDay">
<img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/Schedule">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="mobincube://action/section/Calculators">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/News">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
</a>
</td>
</tr>
</table>
</body>
</html>
You can use flexbox to achieve the result you're looking for.
Set both the body & html to height: 100%;
Wrap the table with a wrapper div and use:
.wrapper {
display: flex;
height: 100%;
}
set the table margins to margin: auto;
This will ensure your table is always perfectly centered.
body, html {
height: 100%;
}
body {
background-color: #a00000;
margin: 0; /* remove default margins added by browsers */
}
.wrapper {
display: flex;
height: 100%;
}
table {
margin: auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
}
td {
background-color: #fff;
padding: 10px;
background-color: #fff;
border-radius: 10px;
}
img {
max-width: 120px;
max-height: 120px;
border: solid 5px #a00000;
border-radius: 5px;
background-color: #a00000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bobcat Menu</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<table align="center">
<tr>
<td>
<a href="mobincube://action/section/DropDay">
<img src="
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/Schedule">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="mobincube://action/section/Calculators">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" />
</a>
</td>
<td>
<a href="mobincube://action/section/News">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" />
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Try adding the following CSS rules to the table element:
table{
/* ... */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
display: table-cell; Add this on the parent div and then use vrtical-align on the table itself.
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#parent {display: table}
#child {
display: table-cell;
vertical-align: middle;
}
I believe you can do something like this to get yourself vertically centered on any given browser.
table {
margin: 50px auto 25px auto;
padding: 0px;
background-color: #fff;
border-radius: 10px;
position: relative;
top: 50%;
transform: translateY(50%);
}
https://jsfiddle.net/rodhartzell/s6x5toj9/
I am having trouble getting Google fonts to display in my email. It displays on locally through my browser but when I send tests to Gmail, MSO, etc., it is not working. I am able to get MSO fallback to be Arial, but I don't understand how I am not getting it to display even on Gmail.
Here is what I have in the </head> and immediately after the <body>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta property="og:title" content="*|MC:SUBJECT|*">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet' type='text/css'>
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ MAIL CLIENT & BROWSER-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
body,
table,
td,
p,
a,
li,
blockquote {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* /\/\/\/\/\/\/\/\/ MAIL CLIENT-SPECIFIC STYLES /\/\/\/\/\/\/\/\/ */
/* /\/\/\/\/\/\/\/\/ CLASSES /\/\/\/\/\/\/\/\/ */
body {
width: 100% !important;
}
body {
-webkit-text-size-adjust: none;
}
body {
margin: 0;
padding: 0;
}
img {
border: none;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
text-transform: capitalize;
}
#backgroundTable {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
table {
border-collapse: collapse !important;
}
body,
.backgroundTable {
background-color: #ffffff;
}
#templateContainer {
border: 0px;
}
/* /\/\/\/\/\/\/\/\/ PREHEADER /\/\/\/\/\/\/\/\/ */
#templatePreheader {
background-color: #ffffff;
}
.preheaderContent div {
color: #bbbbbb;
font-family: Arial;
font-size: 10px;
line-height: 100%;
text-align: center;
}
.preheaderContent div a:link,
.preheaderContent div a:visited {
color: #8fa7d1;
font-weight: normal;
text-decoration: underline;
}
.preheaderContent div img {
height: auto;
max-width: 800px;
}
/* /\/\/\/\/\/\/\/\/ PREHEADER /\/\/\/\/\/\/\/\/ */
</style>
</head>
<body>
<!--[if mso]>
<style type="text/css">body, table, td {font-family: Arial, Helvetica, sans-serif !important;}</style><![endif]-->
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
<!--[if gte mso 15]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<!--[if (gte mso 9)|(IE)]><table width="800" align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border: 0px; "><tr><td><![endif]-->
Gmail doesn't support #font-face(which is inside of a google-font link) yet.
Take a look at the support here at Campaign Monitor for web fonts
From litmus
Web Fonts in Gmail
Finally, despite have a wildly popular web fonts service, Gmail does
not support the use of the #font-face property. Designers that use web
fonts in emails should carefully consider their font-stack, as their
backup fonts will be rendered in Gmail.
NOTE: However, you can make gmail render webfonts if you use a service like campaign monitor, since they use some special feature to treat this.
I am trying out a guide from YouTube, but I can't get the right_aside and left_aside elements to show on my screen. I have been looking for hours now, and I can't find the problem. Did I miss something?
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>my websitebeta</title>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="indexStyle.css" />
</head>
<body>
<header id="main_header">
<div id="second_header"></div>
</header>
<menu id="main_menu"></menu>
<div id="main_wrapper">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" width="180">
<aside id="left_aside"></aside>
</td>
<td>
<section id="main_content"></section>
</td>
<td valign="top" width="180">
<aside id="right_aside"></aside>
</td>
</tr>
</table>
</div>
<footer id="main_footer"></footer>
</body>
</html>
This is my CSS:
*{
padding: 0px;
margin: 0px;
}
body{
color:#000;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
background: #FFF;
}
#main_header{
width:100%;
height:100px;
background: #F90;
}
#second_header{
min-width:960px;
height:60px;
padding:20px;
margin:0px auto 0px;
}
#main_menu{
width: 100%;
height: 40px;
background: #09F;
}
#main_wrapper{
min-width:1000px;
margin-top: 0px;
margin-bottom: 0px;
}
#left_aside{
width: 180px;
min-height:700;
background: #9f0;
}
#main_content{
margin:0px 20px 0px;
min-height:700;
}
#right_aside{
width: 180px;
min-height:700;
background: #f00;
}
#main_footer{
width: 100%;
height: 50px;
background: #09F;
margin: 0px;
}
It looks like you've forgotten the px after your min-height in both the left and right asides.
It should look like: min-height:700px;
Good luck!
I'm trying to implement a search bar
But i was not able to display the search icon on the search bar.
Here is the code (jsfiddle).
I found the default style overrides my custom style.
HTML
<div id="search_controls">
<input type="text" class="search-box" placeholder="e.g. restaurant name, cuisine" />
</div>
input.ui-input-text, textarea.ui-input-text {
background-image: none;
padding: .4em;
margin: .5em 0;
line-height: 1.4;
font-size: 16px;
display: block;
width: 100%;
outline: 0;
}
CUSTOM STYLE
#search_controls + input.ui-input-text{
background: url('../img/search_icon.png') 98% center no-repeat!important;
height: 26px;
padding: .4em;
margin: .5em;
font-size: 15px;
display: block;
width: 99%!important;
outline: 0;
}
How to address this issue?
probably I know now what you mean...
just remove the + sign in your custom CSS and it works ;-)...
example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
#search_controls input.ui-input-text{
background: url('taifun.png') 98% center no-repeat!important;
height: 26px;
padding: .4em;
margin: .5em;
font-size: 15px;
display: block;
width: 99%!important;
outline: 0;
}
</style>
</head>
<body>
<div data-role="page">
<div id="search_controls">
<input type="text" class="search-box" placeholder="e.g. restaurant name, cuisine" />
</div>
</div><!-- /page -->
</body>
</html>
Use this
<input type="text" class="ui-input-text ui-body-a" name="" id="searchinput1" placeholder=" Search..." value="" data-type="search">