10 Replies Latest reply: Nov 18, 2012 8:09 AM by sudarshan.t RSS

    closing tag error

    Renskins

      I have an extremely broken page.

       

      When I validate it I get a lot of closing tag errors but I don't understand in what way I have not closed them properly as I have not had this issue before.

       

      Can anyone help?

       

      http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tavcafe.com%2Fevents.php&charset=%28det ect+automatically%29&doctype=Inline&group=0

        • 1. Re: closing tag error
          sudarshan.t MVP

          <doctype>

          <html>

          <head>

          ......

           

          This is the standard format. Your <meta> tag sits before <head> begins. Fix this first.

           

          Then, your <script> tags do not have a type attribute. It should ideally be

           

          <script type="text/javascript">

          ...

          </script>

          Line 611 - If you want to give an ampersand, your code should have

          &amp;
          not just &. This is invalid markup.

           

          661 - you're missing a <ul> tag before <li> tag. <li> can only be present within a <ol> or <ul> or <menu>... tag.

           

          665 - your <a> tag resides outside of any <li> tags - lots of similar occurences.

           

          Fundamental code error - Lines 869 - 872

           

          <p> <ul>

          <li>肉類綜和盤/Mixed Meat Platter&#8212;&#8212;-$450.NT **<br />

          (去骨雞腿肉.豬肉.小牛排/chicken.pork.steak)</li>

          </ul></li></p>

          Your code is all messed up - incorrect start/ end combinations of tags.

           

          You also have multiple nested span tags within span tags again. This is illegal.

           

          Line 1139

           

          <p><KRG#26 It Sounds Transparent!>

               http://kandalarecords.tw/<br />

          <KRG#26> - This is invalid tag. < character is a tag opener. You cannot have < as a text value. If you want to display < in your webpage, you should use &lt; and &gt; for > sign.

           

           

          First and foremost, clean up your markup. Put your CSS code in a separate CSS file. Link the file in your <head> tag of HTML - you'll save a lot of lines in HTML this way.

           

          Then, apply source formatting to your entire markup code in DW. This way, you can easily trace unclosed/ pre-closed tags.

           

          Message was edited by: Sudarshan Thiagarajan - revise ampersand code which was showing up as blank - on the rich editor!

          • 2. Re: closing tag error
            sudarshan.t MVP

            Also, if you have a lot of chinese characters, you may want to consider changing your charset.

             

            Look here: http://a4esl.org/c/charset.html

            • 3. Re: closing tag error
              MurraySummers ACP/MVPs

              Your line 611 comment didn't come through - an ampersand should be in your code like this -

               

              &amp;

              • 4. Re: closing tag error
                sudarshan.t MVP

                Thanks for that, Murray. I didn't notice it after I posted the reply.

                 

                I've fixed it now.

                • 5. Re: closing tag error
                  Renskins Community Member

                  Thanks guys, that is all really helpful, unfortunately there is a problem.

                   

                  I have just realised that when I validate the document it is including all of the code that is created through perch outside of the core document.

                   

                   

                  as you can see from bellow many of the errors are not present because they are created somehow by perch.  I create the perch tags and templates and then I or my client enter in the information we required to be displayed within the perch admin panel and the code is automatically created, which is where those missing <ul> and <li> tags are occuring as well as the multiple nested span tags and the error on line 1139.  As you can see I do have my css in a seperate document linked as you said and my

                  <doctype>

                  <html>

                  <head>

                   

                  is in the format you suggest.

                   

                  So how do I fix these code problems when it is autmated by Perch and there is no said document???

                   

                   

                  The document I am working on looks like this:

                   

                  <?php include('perch/runtime.php');?>

                   

                  <!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">

                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                  <head>

                   

                  <title>TAV Cafe - Events</title>

                   

                   

                   

                  <link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css"/>

                  <link rel="stylesheet" href="colorbox.css" />

                  <link rel="stylesheet" href="gallery.css" />

                  <link rel="stylesheet" href="events.css" />

                   

                  <style type="text/css">

                   

                  @font-face {font-family: 'CallunaSans-Regular';

                  src: url('webfonts/23937E_0_0.eot');

                  src: url('webfonts/23937E_0_0.eot?#iefix')

                  format('embedded-opentype'),

                  url('webfonts/23937E_0_0.woff')

                  format('woff'),

                  url('webfonts/23937E_0_0.ttf')

                  format('truetype');

                  }

                   

                   

                   

                   

                  body {

                   

                      background-image:url(background_image.jpg);

                      background-repeat:no-repeat;

                      background-color:black;

                      background-attachment: scroll;

                      background-position:top left;

                      background-size: 1024px 800px contain;

                      }

                     

                   

                  #hours { position:absolute;

                  left:10px; top:10px;

                  width:300px;

                  height:30px;

                  z-index:1;

                  font-family: Skia, CallunaSans-Regular;

                  font-size:13px;

                  font-weight:bold;

                  color:#a76d2f;

                  line-height:140%;

                  word-spacing:1px;

                  }

                   

                   

                  #title_bar { position:absolute;

                  left:0px; top:55px;

                  z-index:0;

                  }

                   

                  .rollover a{

                      display: block;

                     text-indent: -9999px;

                     margin: auto auto auto auto;

                     cursor: pointer;

                     outline: transparent solid 0px;

                  }

                   

                   

                  #title a{ position:absolute;

                  left:10px; top:70px;

                  height:86px;

                  width:325px;

                  z-index:1;

                  background: url('title.jpg') no-repeat left top;

                  }

                   

                  #title a:hover{

                     background-position: left 0px;

                  }

                     

                   

                   

                  #about a{

                  position: absolute;

                  top: 55px; left: 440px;

                  height: 50px;

                  width: 128px;

                  background: url('about_tab.png') no-repeat left top;

                  }

                   

                  #about a:hover{

                     background-position: left -50px;

                  }

                   

                   

                  #gallery a{

                  position:absolute;

                  top: 55px; left: 655px;

                  height: 50px;

                  width: 168px;

                  background: url('gallery_tab.png') no-repeat left top;

                  }

                   

                  #gallery a:hover{

                     background-position: left -50px;

                  }

                   

                  #venue a{ position:absolute;

                  left:910px; top:55px;

                  height: 50px;

                  width:215px;

                  background: url('venue_tab.png') no-repeat left top;

                   

                  }

                   

                  #venue a:hover{

                     background-position: left -50px;

                  }

                   

                  #shop a{

                  position:absolute;

                  left:550px; top:115px;

                  height: 50px;

                  width:128px;

                  background: url('shop_tab.png') no-repeat left top;

                   

                  }

                   

                  #shop a:hover{

                     background-position: left -50px;

                  }

                   

                   

                  #restaurant a{

                  position:absolute;

                  top: 115px; left: 770px;

                  height: 50px;

                  width: 190px;

                  background: url('restaurant_tab.png') no-repeat left top;

                  }

                   

                  #restaurant a:hover{

                     background-position: left -50px;

                  }

                   

                  #bar a{ position:absolute;

                  left:350px; top:115px;

                  height: 50px;

                  width:120px;

                  background: url('bar_tab.png') no-repeat left top;

                  }

                   

                  #bar a:hover{

                     background-position: left -50px;

                  }

                   

                  #events a.events-link{ position:absolute;

                  left:50px; top:180px;

                  height: 50px;

                  width:140px;

                  background: url('events_tab.png') no-repeat left top;

                  }

                   

                  #events a.events-link:hover{

                     background-position: left -50px;

                  }

                   

                  #events .events-calendar{ position:absolute;

                  left:50px; top:230px;

                  }

                   

                   

                   

                  #pop_up_background { position:absolute;

                  left:340px; top:190px;

                  height:580px;

                  width:650px;

                  z-index:2;

                  }

                   

                   

                   

                  div.scroll

                  {

                  background-color:transparent;

                  position:absolute;

                  left:380px; top:200px;

                  width:600px;

                  height:550px;

                  z-index:3;

                  font-family: Skia, CallunaSans-Regular;

                  font-size:16px;

                  color:#a76d2f;

                  line-height:140%;

                  word-spacing:1px;

                  overflow:scroll;

                  }

                   

                   

                   

                   

                  #contact_bar { position:absolute;

                  left:0px; top:635px;

                  z-index:1;

                  }

                   

                  #contact a{

                  position:absolute;

                  top: 640px; left:0px;

                  height: 50px;

                  width: 190px;

                  z-index: 2;

                  background: url('contact_tab.png') no-repeat left top;

                  }

                   

                  #contact a:hover{

                     background-position: left -50px;

                  }

                   

                  #copyright_background { position:absolute;

                  left:1020px; top:650px;

                  z-index:1;

                  }

                   

                   

                   

                  #copyright { position:absolute;

                  left:1045px; top:755px;

                  font-family: Arial Black;

                  font-size:14px;

                  color:#340000;

                  line-height:110%;

                  z-index:2;

                   

                  }

                   

                  #webdesign { position:absolute;

                  left:1045px; top:660px;

                  font-family: PrestigeEliM-Reg;

                  font-size:18px;

                  color:#340000;

                  line-height:110%;

                  z-index:2;

                   

                  }

                   

                   

                  .rollover a{

                      display:block;

                     text-indent:-9999px;

                     margin: auto auto auto auto;

                     cursor: pointer;

                     outline: transparent solid 0px;

                  }

                     

                   

                  .rollover .events-calendar a{

                     display:inline;

                     text-indent:-9999px;

                     margin: auto auto auto auto;

                     cursor: pointer;

                     outline: transparent solid 0px;

                  }

                   

                   

                  #website_link a{

                  position:absolute;

                  left:1020px; top:675px;

                  height: 76px;

                  width: 150px;

                  z-index:2;

                  background: url('website_link.png') no-repeat left top;

                  }

                   

                  #website_link a:hover{

                     background-position: left 0px;

                  }

                   

                  #fb_icon a{ position:absolute;

                  left:280px; top:650px;

                  height: 36px;

                  width: 36px;

                  z-index:2;

                  background: url('fb_icon.jpg') no-repeat left top;

                  }

                   

                  #fb_icon a:hover{

                     background-position: left 0px;

                  }

                   

                  #fb-root {position:absolute;

                  left:190px; top:655px;

                  z-index:2;

                  }

                   

                   

                  table.calendar {

                      width:200px;

                      height:200px;

                      border-collapse: collapse;

                      margin: 10px;

                      clear: left;

                      background-color:#eb5604;

                  }

                   

                  table.calendar td {

                      border: 1px solid #ccc;

                      vertical-align: top;

                  }

                   

                  table.calendar td.today {

                      background-color:#483229;

                      opacity:70%;

                  }

                   

                  table.calendar td.today span.day {

                      font-weight: bold;

                      color: #bc5000;

                  }

                   

                  table.calendar td.weekend {

                      background-color: #483229;

                  }

                   

                  table.calendar td.notinmonth {

                      border: none;

                      background-color: transparent;

                  }

                   

                  table.calendar td.past {

                      text-decoration: line-through;

                  }

                   

                  table.calendar td.notinmonth.weekend {

                      background-color: transparent;

                  }

                   

                  table.calendar td span.day {

                      display: block;

                      color: #ccc;

                  }

                   

                  table.calendar td div.event {

                      display: block;

                      background-color: #ffffff;

                      color: #a76d2f;

                      padding: 3px;

                      border-radius: 5px;

                      border: 1px solid #fff;

                  }

                   

                  ul.calendar-nav {

                      width: 200px;

                      list-style: none;

                      margin: 10px;

                      padding: 0;

                  }

                   

                  ul.calendar-nav li {

                      width: 33.3%;

                      list-style: none;

                      margin: 0;

                      padding: 0 0 10px 0;

                      display: block;

                      float: left;

                      text-align: center;

                  }

                   

                  ul.calendar-nav li:first-child {

                      text-align: left;

                  }

                   

                  ul.calendar-nav li:last-child {

                      text-align: right;

                  }

                   

                  /* --- LISTING --- */

                   

                  ul.events {

                      width: 200px;

                      list-style: none;

                      margin: 10px;

                      padding: 0;

                      border-top: 1px solid #bed6ec;

                  }

                   

                  ul.events li {

                      border-right: 1px solid #bed6ec;

                      border-bottom: 1px solid #bed6ec;

                      vertical-align: top;

                      background-color: #bed6ec;

                      clear: left;

                  }

                   

                  ul.events li ul {

                      list-style: none;

                  }

                   

                  ul.events li li {

                      border: none;

                      border-bottom: 1px dotted #999;

                      min-height: 0;

                      margin-left: 25px;

                      padding: 10px;

                      background-color: #fff;

                      clear: none;

                  }

                   

                  ul.events li li:last-child {

                      border-bottom: 0;

                  }

                   

                  ul.events li li span.time {

                      color: #999;

                      font-style: italic;

                      font-size: 90%;

                      width: 60px;

                      text-align: right;

                      display: inline-block;

                  }

                   

                  ul.events li li div.description {

                      margin: 5px 0 0 63px;

                      font-size: 86%;

                      color: #555;

                  }

                   

                  ul.events li li div.description p {

                      margin: 0 0 1em 0;

                  }

                   

                  ul.events li span.day {

                      font-weight: bold;

                      font-size: 250%;

                      float: left;

                      color: #0a86d2;

                      text-align: right;

                      width: 50px;

                      margin: 0 0 0 1px;

                      padding: 0 15px 0 0;

                      line-height: 1;

                      border-top: 1px solid #fff;

                  }

                   

                  ul.events li:first-child span.day {

                      border-top-color: #bed6ec;

                  }

                   

                  ul.event-listing-nav {

                      width: 200px;

                      list-style: none;

                      margin: 10px;

                      padding: 0;

                      clear: both;

                  }

                   

                  ul.event-listing-nav li {

                      width: 33.3%;

                      list-style: none;

                      margin: 0;

                      padding: 0 0 10px 0;

                      display: block;

                      float: left;

                      text-align: center;

                  }

                   

                  ul.event-listing-nav li:first-child {

                      text-align: left;

                  }

                   

                  ul.event-listing-nav li:last-child {

                      text-align: right;

                  }

                   

                  ul.event-listing-nav:after {

                  content: ".";

                  display: block;

                  height: 0;

                  clear: both;

                  visibility: hidden;

                  }

                   

                  ul.custom-listing {

                      margin: 0;

                      padding: 0;

                      list-style: none;

                      width: 200px;

                  }

                   

                  ul.custom-listing li {

                      padding: 0 0 1em 0;

                      margin: 0 0 1em 0;

                      border-bottom: 1px solid #ccc;

                  }

                   

                  table.calendar td div.event {

                      position: absolute;

                      display: none; /* keeps the popup hidden if no JS available */

                  }

                   

                  table.calendar td {

                      position: relative;

                  }

                   

                   

                  </style>

                   

                   

                  <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>

                   

                      $(function () {

                   

                          $('table.calendar td').each(function () {

                              // options

                              var distance = 10;

                              var time = 150;

                              var hideDelay = 100;

                   

                              var hideDelayTimer = null;

                   

                              // tracker

                              var beingShown = false;

                              var shown = false;

                   

                              var trigger = $(this);

                              var popup = $('div.event', this).css('opacity', 0);

                   

                              // set the mouseover and mouseout on both element

                              $([trigger.get(0), popup.get(0)]).mouseover(function () {

                                  // stops the hide event if we move from the trigger to the popup element

                                  if (hideDelayTimer) clearTimeout(hideDelayTimer);

                   

                                  // don't trigger the animation again if we're being shown, or already visible

                                  if (beingShown || shown) {

                                      return;

                                  } else {

                                      beingShown = true;

                   

                                      // reset position of popup box

                                      popup.css({

                                          'z-index': 1000,

                                          top: 30,

                                          left: 10,

                                          display: 'block' // brings the popup back in to view

                                      })

                   

                                          // (we're using chaining on the popup) now animate it's opacity and position

                                              .animate({

                                                  top: '-=' + distance + 'px',

                                                  opacity: 1

                                              }, time, 'swing', function() {

                                                  // once the animation is complete, set the tracker variables

                                                  beingShown = false;

                                                  shown = true;

                                              });

                                  }

                              }).mouseout(function () {

                                          // reset the timer if we get fired again - avoids double animations

                                          if (hideDelayTimer) clearTimeout(hideDelayTimer);

                   

                                          // store the timer so that it can be cleared in the mouseover if required

                                          hideDelayTimer = setTimeout(function () {

                                              hideDelayTimer = null;

                                              popup.animate({

                                                  top: '-=' + distance + 'px',

                                                  opacity: 0

                                              }, time, 'swing', function () {

                                                  // once the animate is complete, set the tracker variables

                                                  shown = false;

                                                  // hide the popup entirely after the effect (opacity alone doesn't do the job)

                                                  popup.css('display', 'none');

                                              });

                                          }, hideDelay);

                                      });

                          });

                      });

                   

                    var _gaq = _gaq || [];

                    _gaq.push(['_setAccount', 'UA-35744229-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>

                   

                  </head>

                   

                   

                  <body>

                   

                  <div id="fb-root"></div>

                  <script>(function(d, s, id) { type="text/javascript"

                    var js, fjs = d.getElementsByTagName(s)[0];

                    if (d.getElementById(id)) return;

                    js = d.createElement(s); js.id = id;

                    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

                    fjs.parentNode.insertBefore(js, fjs);

                  }(document, 'script', 'facebook-jssdk'));</script>

                   

                   

                  <div id="hours">

                  <strong>Open:<br />Tuesday-Sunday (二~日)<br /> 11:30am - 2:00am (3:00am 五 &amp; 六)</strong>

                  </div>

                   

                   

                  <div id="title_bar">

                  <img src="title_bar.jpg" alt=""/>

                  </div>

                   

                  <div class='rollover' id="title">

                  <a href="index.php">

                  </a>

                  </div>

                   

                  <div class='rollover' id='about'>

                  <a href="about.php">

                  </a>

                  </div>

                   

                  <div class='rollover' id='gallery'>

                  <a href="gallery.php">

                  </a>

                  </div>

                   

                  <div class='rollover' id='venue'>

                  <a href="venue.php">

                  </a>

                  </div>

                   

                  <div class='rollover' id='shop'>

                  <a href="shop.php">

                  </a>

                  </div>

                   

                  <div class='rollover' id='restaurant'>

                  <a href="restaurant.php">

                  </a>

                  </div>

                   

                  <div class='rollover' id='bar'>

                  <a href="bar.php">

                  </a>

                  </div>

                   

                  <div id="pop_up_background">

                  <img src="pop_up_2.png" alt=""/>

                  </div>

                   

                   

                  <div class="scroll">

                  <?php

                  $opts = array(

                  'filter'=>'eventDateTime',

                  'match'=>'eqbetween',

                  'category'=>array('gigs', 'Events'),

                  'sort'=>eventDateTime,

                  'sort-order'=> ASC,

                  'display'=>date,

                  'value'=>$_GET['id'],

                  'template'=>'events/listing/event-day.html',

                  );

                  perch_events_custom($opts);

                  ?>

                  </div>

                   

                   

                   

                  <div id="contact_bar">

                  <img src="contact_bar.png" alt=""/>

                  </div>

                   

                  <div class='rollover' id='events'>

                  <a class='events-link' href="events.php">

                  </a>

                      <div class='events-calendar'>

                          <?php

                              /**

                               * setting options for the calendar. Change the categories listed to one or more which exist in your admin.

                               */

                              $opts = array(

                                  'template'=>'calendar.html',

                                  'past-events'=>true,

                                  'category'=>array('gigs', 'Events')

                              );

                              perch_events_calendar($opts);

                          ?>

                      </div>

                  </div>

                   

                   

                  <div class='rollover' id='contact'>

                  <a href="contact.php">

                  </a>

                  </div>

                   

                  <div id="copyright_background">

                  <img src="copyright_bgrd.png" alt=""/>

                  </div>

                   

                  <div id= "webdesign">

                  Webdesign

                  </div>

                   

                  <div id= "copyright">

                  &#169; TAV Cafe

                  </div>

                   

                  <div class='rollover' id='website_link'>

                  <a href="http://www.renflannery.com/" target="_blank">Visit W3Schools</a>

                  </div>

                   

                   

                  <div class='rollover' id='fb_icon'>

                  <a href="https://www.facebook.com/TAVCafe" target="_blank">Visit W3Schools</a>

                  </div>

                   

                  <div class="fb-like" id="fb-root" data-href="http://www.tavcafe.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>

                   

                   

                  </body>

                  </html>

                  • 6. Re: closing tag error
                    sudarshan.t MVP

                    Contacting Perch developers/ support is one option I see.

                     

                    Since you're saying that is where this malfunctioning code is created, there is little we can suggest with hand code.

                     

                    Or, another alternative, get out of Perch! (I know its easier said than done!)

                    • 7. Re: closing tag error
                      Renskins Community Member

                      Contacting perch is the first thing I did.  they keep saying it has nothing to do with them and can't help me.

                       

                      and unfortunately I can't get out of Perch for this one because the clients want to use it.  But if I ever create a website again I will be certain to stay clear of Perch.

                       

                      Perch seem to think the code problems are within this template.  Do I only need to move the <ul> tag to before the <li> tag or is there more? also what do you mean by multiple nested span tags??

                       

                      <perch:before>

                          <li>

                              <span class="day"><perch:events id="eventDateTime" format="j" /></span>

                              <ul>

                      </perch:before>

                                  <a href="/event-detail.php?id=<perch:events id="eventID" />">...</a>

                                  <li class="vevent">

                                      <span class="time dtstart"><span class="value-title" title="<perch:events id="eventDateTime" format="c" />"><perch:events id="eventDateTime" format="%l:%M %p" /></span> - </span>

                                      <span class="date dtstart"><span class="value-title" title="<perch:events id="eventDateTime" format="c" />"><perch:events id="eventDateTime" format="%l:%M %p" /></span> - </span>

                                      <span class="event summary <perch:events id="category_slugs" />"><perch:events id="eventTitle" /></span>

                                      <div class="description">

                                          <perch:events id="eventDescHTML" encode="false" />

                                      </div>

                                     

                                      <perch:if exists="image">

                              <img src="<perch:events id="image" type="image" label="Image" width="340" crop="true" />" alt="<perch:events id="eventTitle" />" />

                          </perch:if>

                          <perch:if exists="eventTitle">

                          <perch:events id="heading" type="text" label="Heading" required="true"

                          </perch:if>

                          <perch:events id="event_date" type="date" label="Date of event" format="%A, %e %B %Y" />

                                  </li>

                       

                      <perch:after>           

                              </ul>

                          </li>

                      </perch:after>

                      • 8. Re: closing tag error
                        sudarshan.t MVP

                        <ul> should always precede <li> as a rule of thumb.

                         

                        <ul>

                             <li>

                                  ....

                             </li>

                             <li>

                                  ...

                             </li>

                        </ul>

                        This is what I asked you earlier - but I guess you got confused with the hand written code for something Perch did.

                         

                        And when you have <ul><li> tags, you can't have <a> tags or any other in between <ul> and <li>. Start your Unordered List first. Then your Line Item. Then put your content within it. You can have multiple <li> within the same <ul> as shown above.

                         

                        Also, close your <li> tags before closing <ul> tag.

                         

                        Multiple nested span tags - Having a <span> tag within another <span> tag. While this will validate OK and is allowed within HTML 4 transitional, most modern browsers have a tendency to ignore this markup.

                         

                        Trust this helps.

                         

                        -ST

                        • 9. Re: closing tag error
                          MurraySummers ACP/MVPs

                          Multiple nested span tags - Having a <span> tag within another <span> tag. While this will validate OK and is allowed within HTML 4 transitional, most modern browsers have a tendency to ignore this markup.

                           

                          I believe that is incorrect.  The <span><span>...</span></span> is a perfectly valid construct (as long as there are no block tags within the span tags.  What is your evidence that browsers ignore that?

                          • 10. Re: closing tag error
                            sudarshan.t MVP

                            Murray, Unfortunately I don't have a documentation containing this. But, I'm fully aware my team has run into issues while doing this for quite a few projects we've worked on so far.

                             

                            One that I can think of is our proprietary CMS  we hand coded from scratch and the one that we offer exclusively to our clients. We've run into issues with hooking a span within span and parsing data either MSSQL or PGSQL or XML through it to break-up the fetched content within each construct. While most times it is to do with the CSS styling and jQuery targeting into the ID space, some times we've had issues with Mobile browsers (both via simulation as well as actual devices).

                             

                            After a bit of studying we discovered the reproduction of this varies with the jQuery plug-ins most times and the markup itself many a times (on few browsers - mostly Safari 5.x and FF 3.x)- this is one of the reasons why I cannot give a fixed method to replicate this scenario. But with  what I've tried along with my team in the past, this definitely happens. Haven't tried this on FF 15+ or on Safari 6.x recently though. Actually I'll keep this in mind for letting my team know so they can look up our archives to replicate this on these browsers - just for our learning and curiousity to see if it does work right.

                             

                            -ST