article CSS not compatible with template?

GK User
Wed Mar 14, 2012 2:25 pm
we are creating 'microsite' pages on our website where vendors basically send us formatted content that we paste into articles. In the admin side of our site, the content displays correctly, but on the front end it look incorrect. I have turned off the filtering for html tags which made it better, but it is still wrong.

Link to the page is here.
http://www.bpm.com/cordys-the-business- ... tform.html

I have posted the original HTML below. Any help greatly appreciated.

Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
   <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   <title>Cordys</title>
   <meta name="keywords" content="" />
   <meta name="description" content="" />
   <style type="text/css">
   html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
:focus {
   outline: 0;
}
ins {
   text-decoration: none;
}
del {
   text-decoration: line-through;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
header, nav, section, article, aside, footer {
   display: block;
}
body {
   font: 12px/18px Helvetica, Arial, Tahoma, Verdana, sans-serif;
   width: 100%;
   color:#464646;
}
a {
   color: #125880;
   outline: none;
}
a:hover {
   text-decoration: none;
}
p {
   margin: 0 0 10px
}
img {
   border: none;
}
.center{text-align: center;}
input {
   vertical-align: middle;
}
#wrapper {
   width: 918px;
   margin: 0 auto;
}

/* Header
-----------------------------------------------------------------------------*/
#logo{
   height:82px;
   background:url(http://www.cordys.com/cordyscms_com/images/logobg.png) repeat-x;
}
#hero {height: 263px;}

/* Middle
-----------------------------------------------------------------------------*/
#content {
}
table{width:918px;height:470px;}
tr#heading th.webinar{height:43px;width:205px;background:url(http://www.cordys.com/cordyscms_com/images/tableheaders.png) no-repeat 0 0;}
tr#heading th.report{height:43px;width:226px;background:url(http://www.cordys.com/cordyscms_com/images/tableheader-bg.png) repeat-x;}
tr#heading th.case-studies{height:43px;width:240px;background:url(http://www.cordys.com/cordyscms_com/images/tableheaders.png) no-repeat -430px 0;}
tr#heading th.solutions{height:43px;background:url(http://www.cordys.com/cordyscms_com/images/tableheaders.png) no-repeat -671px 0;}
tr#heading th{vertical-align:bottom; text-align: left;color:#fff;font-size:1.2em;}
tr#heading th span{line-height: 30px;margin-left:20px;}

tr#body{background:url(http://www.cordys.com/cordyscms_com/images/tablebg.png) repeat-x;}
   td{padding:20px;background:url(http://www.cordys.com/cordyscms_com/images/table-separator.png) no-repeat right top;vertical-align: top;}
   td.last{background:none;}

div.date{height:27px;line-height:27px;background:url(http://www.cordys.com/cordyscms_com/images/date-bg.png);width:160px;padding-left:20px;margin-left:-20px;}   

a.button{height:42px;width:165px;background:url(http://www.cordys.com/cordyscms_com/images/button.png) no-repeat;display:block;line-height:42px; text-align:center;text-decoration: none;font-size:1.3em;font-weight:600;letter-spacing: 1px;margin-top:20px;}
   a.button:hover, a.button:focus{background:url(http://www.cordys.com/cordyscms_com/images/button-hover.png) no-repeat;}
ul.biz-list li{padding-left:30px;background:url(http://www.cordys.com/cordyscms_com/images/check.png) no-repeat left center;line-height:40px;border-bottom:1px solid #ccc;}
   ul.biz-list li.last{border-bottom:none;}


/* Footer
-----------------------------------------------------------------------------*/
#footer {}
</style>
</head>

<body>

<div id="wrapper">
   <header id="logo">
      <img src="http://www.cordys.com/cordyscms_com/images/logo_alt.jpg" alt="Cordys Logo" />
   </header><!-- #logo-->

   <header id="hero">
      <img src="http://www.cordys.com/cordyscms_com/images/heroimage.jpg" alt="My Business Platform" />
   </header><!-- #hero-->

   <div id="content">
      <table>
         <tr id="heading">
            <th class="webinar"><span>IDC Webinar</span></th>
            <th class="report"><span>IDC Report</span></th>
            <th class="case-studies"><span>CASE STUDIES</span></th>
            <th class="solutions"><span>BUSINESS SOLUTIONS</span></th>
         </tr>
         <tr id="body">
            <td class="first">
               <div class="date">March 6, 2012: 11am E.S.T</div>
               
               <p></p><strong>How business process platforms deliver business excellence</strong></p>
               <p>Maureen Fleming; IDC, V.P. BPM Research</p>
               <p>Mike Mordas; CIO, Mercer</p>
               <a href="http://www.cordys.com/cordyscms_com/idc_webinar.php?year=2012&month=03" target="_blank" class="button">Register Now</a>
            </td><!--IDC Webinar -->
            <td>
               <div class="center"><img src="http://www.cordys.com/cordyscms_com/images/idc-report.png" alt="IDC Report" /></div><br />
               <strong>IDC Marketscape: Worldwide Business Process Platforms 2011 Vendor Analysis</strong><br />
               Read why Cordys ranked #1<br />
               <a href="http://www.thebusinessprocessplatform.com/" target="_blank" class="button">Download Now</a>
            </td><!--IDC Report -->
            <td>
               <strong>VALEO CASE STUDY</strong><br />
               See how Cordys reduced 6,000+ Lotus Notes applications to less than 1000 MashApps<br />
               <a href="http://whatif.cordys.com/media/Valeo.pdf" target="_blank" class="button">Download Now</a><br /><br />

               <strong>AEGON RELIGARE CASE STUDY</strong><br />
               See how Cordys reduced call center contacts by 20%<br />
               <a href="http://whatif.cordys.com/media/Aegon_Religare.pdf" target="_blank" class="button">Download Now</a>
            </td><!--Case Studies -->
            <td class="last">
               <ul class="biz-list">
                  <li>Improve customer/case mgmt.</li>
                  <li>Speed design/time to market</li>
                  <li>Drive Revenue Growth</li>
                  <li>Deliver via the cloud</li>
                  <li class="last">Integrate Legacy Systems</li>
               </ul>
            </td><!--Business Solutions -->
         
         </tr>
      </table>
   </div><!-- #content-->

   <footer id="footer">
   </footer><!-- #footer -->

</div><!-- #wrapper -->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-156500-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>
User avatar
Fresh Boarder

GK User
Wed Mar 14, 2012 2:53 pm
Hi,

What is the code that the venders gave you and what does it do for?
User avatar
Platinum Boarder

GK User
Wed Mar 14, 2012 3:06 pm
everything they gave me was in the code tag above. just html
User avatar
Fresh Boarder

GK User
Thu Mar 15, 2012 11:02 am
Hi,

As you can see, it's a html code with full structure of a page consisting of head, body, and even css code...so it might conflict with your article page. In this case you'd better put the code in a .html file then use iframe tag to load that file instead of adding the code to your article content.

http://www.w3schools.com/tags/tag_iframe.asp
User avatar
Platinum Boarder


cron