4 Replies Latest reply on Jul 14, 2014 2:46 PM by 48605

    Can anyone troubleshoot Design Studio Landing Page code?

      I've modified a Marketo template and cannot get it to work in the editor -- it doesn't allow me to drag and drop elements into it. Below is the code. Can anybody advise what the problem might be?


            
           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-200000126/DTD/xhtml1-transitional.dtd">
           <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
           <head>
           <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
           <!-- SYSTEM CSS - DO NOT EDIT -->
           <link rel="stylesheet" type="text/css" media="screen" href="/css/mktLPSupport.css" />
           <script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
            
           <style type="text/css">
            
           #bodyId {
           background:url("/rs/axiomepm/images/header-lp-blue-2.png") repeat-x center top #fff;
           font-family: Arial, sans-serif;
           font-size: 16px;
           text-align: center;
           margin: 0px;
           padding: 0px;
           }
            
           div#outerWrapDiv {
           position: relative;
           height: 100%;
           width: 100%;
           }
            
           div#innerWrapDiv {
           position: relative;
           padding: 0px;
           margin-left: auto;
           margin-right: auto;
           margin-top: 0px;
           margin-bottom: 0px;
           text-align: left;
           }
            
           </style>
            
           <!-- START TEMPLATE CSS - EDIT THIS SECTION -->
            
           <style>
           /* Note: You can also change these in the specific Landing Pages*/
            
           /* Width of Full Page */
            
           div#innerWrapDiv {
             width: 1090px;
           }
            
           a:link {
           color:#ffa200;
           text-decoration:none;
            
           }
            
           a:visited {
           color:#ffa200;
           text-decoration:none;
            
           }
            
           a:active {
           color:#ffa200;
           text-decoration:none;
            
           }
            
           a:hover {
           color:#ffa200;
           text-decoration:none;
            
           }
            
           img {
           border:none;
           }
            
           /* Main Header Area  */
           div#headerWrap {
           background: transparent;
           width:100%;
           }
            
           div#mktHeader {
           border-bottom:1px solid #80b6c9;
           height: 60px;
           margin: 0 auto;
           position:relative;
           width:1090px;  
           }
            
           #logo {
           border: 0 none;
           left: 0px;
           position: absolute;
           top: 6px;
           }
            
           /* Main Content Area - Controls height of page */
           div#mktContent {
           background: transparent;
           height: 550px;
           position: relative;
           }
             
           #graycontent {
           background:#eaeaea;
           height:86px;
           width:100%;
           position:relative;
           }
            
           /* Footer Area */
           div#footerWrap {
            
           width:100%;
           }
           div#mktFooter {
           background: #fff;
           color:#000;
           font-size:12px; 
           height: 50px;
           margin: 0 auto;
           position: relative;
           width:1090px;
           }
            
           /* Footer links and Copyright */
            
           .copyright{
           color:#000;
           font-size:12px; 
           left: 65px;
           position: absolute;
           top: 20px;
           }
            
           .footerlinks {
           right: 0px;
           position: absolute;
           top: 20px;
           }
            
           .footerlinks a {
           color:#000000;
           text-decoration:none;
           }
            
           .footerlinks a:hover {
           color:#000000;
           text-decoration:underline;
           }
            
            
           /* Required Fields Stars Fix Commented Out On Client Request ONLY */
           form.lpeRegForm li.mktFormReq label {
           background-image:url("/rs/marketoreferencelibrary/images/star.png")!important;
           }
            
            
           /*** CSS3 PIE GRADIENT BUTTON 
              Directions: Delete Fancy Button CSS and Fancy Button JS 
              optional: Obtain gradient code from: http://css3pie.com/
           ***/
           button, input {
           behavior: url("/rs/marketoreferencelibrary/images/PIE.htc");
           }
            
           .button, button, input[type="reset"], input[type="submit"], input[type="button"] {
           background: #ffa200;
            
           border:7px solid #f9bd4f;
            
           -webkit-border-radius: 40px;
           -khtml-border-radius: 40px;
           -moz-border-radius: 40px;
           -ms-border-radius: 40px;
           -o-border-radius: 40px;
           border-radius: 40px;
            
           color:#FFFFFF !important;
           cursor:pointer;
           display:inline;
           font-size:16px !important;
           font-weight:bold;
           left:0px;
           padding:12px 20px !important;
           position:relative;
           text-shadow:1px 1px 1px #888;
           text-transform:uppercase;
           top:10px;
           }
            
           button:hover, input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:hover {
            
           }
            
           #mktFrmButtons {
           margin:0 auto;
           text-align:center;
           }
            
           form.lpeRegForm label {
           font-family: 'Open Sans', sans-serif !important;
           }
            
           form.lpeRegForm ul.mktLblAbove label {
           padding-left:0 !important;
           }
            
           form.lpeRegForm ul.mktLblAbove li.mktFormReq label {
           padding-left:10px !important;
           }
            
           form.lpeRegForm input[type="text"], form.lpeRegForm select, form.lpeRegForm  textarea {
           border: 1px solid #D9D8D9;
           border-radius: 3px 3px 3px 3px;
           color: #000000;
           font-family: 'Open Sans', sans-serif !important;
           font-size: 12px;
           padding: 5px;
           width:95% !important;
           }
            
           </style>
            
           <!-- END TEMPLATE CSS -->
            
             <!--[if lt IE 7]>
            
           <style>
           img.png { behavior: url(/js/public/iepngfix.htc) }
           </style>
            
             <![endif]-->
             
           <!-- SYSTEM JAVASCRIPT - DO NOT EDIT -->
              <script>
               // to make fancy buttons.  Uses noConflict just in case
                var $jQ = jQuery.noConflict();
            
                // Use jQuery via $j(...)
                $jQ(document).ready(function(){
            
                  /*$jQ('input[id=mktFrmSubmit]').wrap("<div class='buttonSubmit'></div>");
                  $jQ(".buttonSubmit").prepend("<span></span>");*/
            
                });
              </script>
            
           <!-- SYSTEM INCLUDES - DO NOT EDIT -->
           <link rel="stylesheet" type="text/css" media="screen" href="/css/mktLPSupport.css" />
           <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
           <link rel="icon" href="/favicon.ico" type="image/x-icon" />
           <style type="text/css">
           DIV#mktContent{height: 750px; }
           DIV#mktHeader{height: 60px; }</style><meta name="robots" content="index, nofollow" />
           <style type="text/css"> div#lpeCDiv_3490 {position: absolute; left: 609px; top: 311px; width: 365px; z-index: 15; }
              div#lpeCDiv_3490 span.lpContentsItem { }
            
            div#lpeCDiv_3491 {position: absolute; height: 1px; left: 577px; top: 226px; width: 424px; z-index: 10; }
              div#lpeCDiv_3491 div.lpContentsItem { height: 1px; width: 424px; background-color: #0e5466; border-style: solid; border-width: 0; border-color: forestgreen; }
            
            div#lpeCDiv_3492 {position: absolute; left: 533px; top: 165px; width: 513px; z-index: 15; height: 46px; }
              div#lpeCDiv_3492 span.lpContentsItem { }
            
            div#lpeCDiv_3493 {position: absolute; height: 1px; left: 578px; top: 150px; width: 423px; z-index: 10; }
              div#lpeCDiv_3493 div.lpContentsItem { height: 1px; width: 423px; background-color: #0e5466; border-style: forestgreen; border-width: 0; border-color: #0e5466; }
            
            div#lpeCDiv_3494 {position: absolute; left: 596px; top: 16px; width: 381px; z-index: 15; }
              div#lpeCDiv_3494 span.lpContentsItem { }
            
            div#lpeCDiv_3495 {position: absolute; left: 526px; top: 80px; width: 506px; z-index: 15; }
              div#lpeCDiv_3495 span.lpContentsItem { }
            
            div#lpeCDiv_3496 {position: absolute; left: 53px; top: 509px; width: 1005px; z-index: 15; }
              div#lpeCDiv_3496 span.lpContentsItem { }
            
            div#lpeCDiv_3497 {position: absolute; left: 54px; top: 424px; width: 981px; z-index: 15; }
              div#lpeCDiv_3497 span.lpContentsItem { }
            
            div#lpeCDiv_3498 {position: absolute; left: 54px; top: 567px; width: 551px; z-index: 15; }
              div#lpeCDiv_3498 span.lpContentsItem { }
            
            div#lpeCDiv_3499 {position: absolute; left: 618px; top: 566px; width: 526px; z-index: 15; }
              div#lpeCDiv_3499 span.lpContentsItem { }
            
            div#lpeCDiv_3500 {position: absolute; left: 803px; top: -43px; width: 290px; z-index: 15; }
              div#lpeCDiv_3500 span.lpContentsItem { }
            
            div#lpeCDiv_3501 {position: absolute; height: 42px; width: 186px; z-index: 15; left: 0px; top: -55px; }
            div#lpeCDiv_3501 span.lpContentsItem img.lpimg{width:100%; height:100%; }
             div#lpeCDiv_3501 span.lpContentsItem { }
            
            div#lpeCDiv_3502 {position: absolute; height: 397px; width: 461px; z-index: 15; left: 5px; top: 21px; }
            div#lpeCDiv_3502 span.lpContentsItem img.lpimg{width:100%; height:100%; }
             div#lpeCDiv_3502 span.lpContentsItem { }
            
            div#lpeCDiv_3503 {position: absolute; height: 74px; width: 973px; z-index: 15; left: 64px; top: 756px; }
            div#lpeCDiv_3503 span.lpContentsItem img.lpimg{width:100%; height:100%; }
             div#lpeCDiv_3503 span.lpContentsItem { }
            
            div#lpeCDiv_3504 {position: absolute; left: -2px; top: 836px; width: 420px; z-index: 15; height: 28px; }
              div#lpeCDiv_3504 span.lpContentsItem { }
            
            div#lpeCDiv_3505 {position: absolute; height: 27px; width: 30px; z-index: 15; left: 894px; top: 850px; }
            div#lpeCDiv_3505 span.lpContentsItem img.lpimg{width:100%; height:100%; }
             div#lpeCDiv_3505 span.lpContentsItem { }
            
            div#lpeCDiv_3506 {position: absolute; height: 27px; width: 30px; z-index: 15; left: 928px; top: 850px; }
            div#lpeCDiv_3506 span.lpContentsItem img.lpimg{width:100%; height:100%; }
             div#lpeCDiv_3506 span.lpContentsItem { }
            
            div#lpeCDiv_3507 {position: absolute; height: 27px; width: 30px; z-index: 15; left: 962px; top: 850px; }
            div#lpeCDiv_3507 span.lpContentsItem img.lpimg{width:100%; height:100%; }
             div#lpeCDiv_3507 span.lpContentsItem { }
            
            div#lpeCDiv_3508 {position: absolute; height: 27px; width: 30px; z-index: 15; left: 996px; top: 850px; }
            div#lpeCDiv_3508 span.lpContentsItem img.lpimg{width:100%; height:100%; }
             div#lpeCDiv_3508 span.lpContentsItem { }
            
           </style>
           <style type="text/css"> .marketoContent {position: relative;} </style>
            
           </head>
           <body id="bodyId" class="mktEditable" align="center" >
           <div id="outerWrapDiv" class="mktEditable">
           <div id="headerWrap">
           <div id="mktHeader" class="mktEditable">
             <!-- Logo and Header -->
           <div id="logo" class="mktEditable">
           <img src="/rs/axiomepm/images/ax-kauf-orange-white.png" />
             </div>
           </div>
           </div>
            
            
            
            
           <div id="innerWrapDiv" class="mktEditable">
            
           <div id='lpeCDiv_3491' class='lpeCElement Rectangle_1'><div class='lpContentsItem boxSpan'></div></div>
            
           <div id='lpeCDiv_3493' class='lpeCElement Rectangle_2'><div class='lpContentsItem boxSpan'></div></div>
           <div id='lpeCDiv_3505' class='lpeCElement Image_6'><span class='lpContentsItem imageSpan'><img class="lpimg" src="/rs/marketoreferencelibrary/images/c8soc1.jpg" /></span></div>
           <div id='lpeCDiv_3506' class='lpeCElement Image_7'><span class='lpContentsItem imageSpan'><img class="lpimg" src="/rs/marketoreferencelibrary/images/c8soc2.jpg" /></span></div>
           <div id='lpeCDiv_3507' class='lpeCElement Image_8'><span class='lpContentsItem imageSpan'><img class="lpimg" src="/rs/marketoreferencelibrary/images/c8soc3.jpg" /></span></div>
           <div id='lpeCDiv_3508' class='lpeCElement Image_9'><span class='lpContentsItem imageSpan'><img class="lpimg" src="/rs/marketoreferencelibrary/images/c8soc4.jpg" /></span></div>
            
           <!-- START TEMPLATE HTML - EDIT THIS SECTION -->
            
           <div id="mktContent" class="mktEditable">
           <!-- Base of Landing Page Content -->
            
           </div>
            
           <!-- END TEMPLATE HTML -->
            
           <!-- SYSTEM FOOTER - DO NOT EDIT -->
           </div>
           <div id="graycontent" class="mktEditable"></div>
           <div id="footerWrap">
           <div id="mktFooter" class="mktEditable">
            
           <div class="copyright">&copy; Axiom EPM</div>
           <div class="footerlinks">
           </div>
            
           </div>
           </div>
            
           </div>
           <script type="text/javascript" src="//munchkin.marketo.net//munchkin.js"></script><script>Munchkin.init('878-PHB-880', {customName: 'LP_Theory_v1', wsInfo: 'j1RR'});</script>
            
           <!-- GOOGLE ANALYTICS.  ENTER YOUR CODE and UNCOMMENT block -->
            <!--
           <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
           </script>
           <script type="text/javascript">
           _uacct = "YOURCODE";
           urchinTracker();
           </script>
           -->
            
            
           </body>
           </html>