Error -- Master page and Child page have different editable areas

With “\Components\Quick update” I am receiving the error, “Master page and Child page have different editable areas” for all tested pages. To debug this error I have saved my master.html to master_as_page_template_10a.html. Then in the latter I only changed –

<html data-pgc-set-master>

to

<html data-pgc-master="master.html">

Now master_as_page_template_10a.html should have exactly the same editable areas as master.html (see code below). However, I still get the same error.

When I click on the main-content link in the error message I get the following highlighted in master_as_page_template_10a.html–

image

The tree shows –

image

Thanks,
Don C.

======== master.html ========


<!doctype html>
<html data-pgc-set-master>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width"/>

<!-- 5/29/2015 - from http://realfavicongenerator.net/ for favicon.ico -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"/>
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"/>
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"/>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
<link rel="manifest" href="/manifest.json"/>
<meta name="msapplication-TileColor" content="#2d89ef"/>
<meta name="msapplication-TileImage" content="/mstile-144x144.png"/>
<meta name="theme-color" content="#ffffff"/>
<!-- End: favicon.ico -->

<!-- TemplateBeginEditable name="doctitle" -->
<title> | Ultrasonic Resonators</title>
<!-- TemplateEndEditable -->
<script type="text/javascript" src="../p7ehc/p7EHCscripts.js"></script>

<!-- Comment away the next to see the pages in print format. -->
<link href="../p7csspbm2/p7csspbm2_09.css" rel="stylesheet" type="text/css"/>

<!-- DRC - 19/Apr/2015 9:56 - moved below after all other stylesheets so that this overrides any conflicts -->
<!--
<link href="../p7csspbm2/p7csspbm2_print.css" rel="stylesheet" type="text/css" media="print">
-->
<!--[if lte IE 7]>
<style>
.menutop li {display: inline;}
div, .menuside a {zoom: 1;}
.masthead .banner, .masthead .banner img {width: 100%;}
</style>
<![endif]-->
<link href="../p7tm3/p7TM3-10.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="../p7tm3/p7TM3scripts.js"></script>
<link href="../p7tm3/p7TM3-01.css" rel="stylesheet" type="text/css" media="all"/>

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

<!-- DRC - 19/Apr/2015 9:57 - moved from above -->
<link href="../p7csspbm2/p7csspbm2_drc_print.css" rel="stylesheet" type="text/css" media="print"/>

<!--  2016-01-04 - mathjax for displaying equations -->
<script src="../templates/mathjax_renum_equations_2a.js"></script>

<!-- 2016-01-04 - works OK but above has simpler code
2015-12-30
<script src="../templates/mathjax_renum_equations_1a.js"></script>
-->

<!-- The following uses a local mathjax config file, in addition to the std cdn (Content Delivery Network) mathjax config file. In order to do this:
1. Must add "&delayStartupUntilConfig" to the end of the cdn.
2. Must add "MathJax.Hub.Configured();" to the end of the local mathjax config file to let the cdn know that the mathjax configuration has completed.
See (near end of link page) -
https://groups.google.com/forum/embed/#!topic/mathjax-users/J-36V22-G9Q
Use latex_demo_100a.html with local.js to debug (from above link but modified).
-->

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<!-- Obsolete 2021-12-13 ; replaced by above from
https://docs.mathjax.org/en/v2.7-latest/start.html.

See ! Warning at https://docs.mathjax.org/en/v2.7-latest/start.html --
cdn.mathjax.org was retired in April, 2017.

<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntilConfig"></script>
-->

<script src="../templates/mathjax_config_2a.js"></script>

<!-- TemplateBeginEditable name="localstyles" -->
<style type="text/css">
/* 2/16/2015 - Insert over-riding local styles or external style sheets here */

</style>
<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="head" -->
<style type="text/css">
<!-- 1/27/2015 - Insert over-riding external or local styles here -->
<!-- 2/16/2015 - currently not used -->
</style>
<!-- TemplateEndEditable -->
</head>

<body>
<div class="content-wrapper">
  <div class="masthead">
    <div class="logo">
      <h1><span style="font-size: 1.2em">U</span>ltrasonic <span style="font-size: 1.2em">R</span>esonators</h1>
    </div>
<!--
    <div class="banner"><img src="../p7csspbm2/img/pbm-mast.jpg" alt="">
    </div>
-->
  </div> <!-- masthead -->

  <div class="menutop-wrapper">

    <div class="menutop-button-wrapper">
    <ul class="menutop" role="menubar">
      <li><a href="../index.html" title="Home" target="_self">Home</a></li>
      <li><a href="../contents.html" title="Contents" target="_self">Contents</a></li>
<!-- 26/Mar/2016 12:56 - now in Contents
      <li><a href="../design_info.html" title="Design info" target="_self">Design info</a></li>
-->
<!-- 1/16/2015 - try to set focus on current button. See current1 in p7csspbm2_09.css
      <li><a href="../index.html" class="current1" title="Home" target="_self">Home</a></li>
      <li><a href="../design_info.html" class="current2" title="Design info" target="_self">Design info</a></li>
-->
<!-- 2016-06-12
			<li><a href="../design_help.html" title="Design help" target="_self">Design help</a></li>
 -->
      <li><a href="../notes.html" title="Notes" target="_self">Notes</a></li>
      <li><a href="../contacts.html" title="Contact" target="_self">Contact</a></li>
    </ul>
    </div>

 <!-- put google translate below -->
<!-- 	Insert in dwt file
			1/17/2015: For the following, see
			https://support.google.com/translate/#topic=2534534 - to add the translator

		Various layout options are available.
		Notes:
		1. Set autoDisplay:true if the website should automataically translate is the visitor's website is set to a foreigh language
-->
	<div class="google_translate-wrapper">
	<div id="google_translate_element"></div> <!-- displays the google drop-down menu. DW flags this as an empty div. -->
	</div>
	<script type="text/javascript">
	function googleTranslateElementInit() {
	  new google.translate.TranslateElement({
	    pageLanguage: 'en',
	    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
	  }, 'google_translate_element');
	}
	</script>
	<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- 1/17/2015 - The following was taken from https://support.google.com/translate/answer/2534601?hl=en&ref_topic=2534534 but doesn't work. Note the difference in src. Also, this site requires additional meta data to be entered. Must log in at https://accounts.google.com/ServiceLoginAuth and fill in required info.
	</script>
	<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-->
  </div> <!-- menutop-wrapper -->

  <div class="columns-wrapper">
    <div class="main-content" data-pgc-field="main_content">
      <!-- TemplateBeginEditable name="main-content" -->
      <div class="content p7ehc-1">

        <h1 class="page-topper">Topic</h1>
        <p>Content</p>

      </div> <!-- "content p7ehc-1" -->
    <!-- TemplateEndEditable -->
    </div> <!-- "main-content"  -->

    <div class="sidebar"> <!-- 26/Mar/2016 12:38  -->
    <!-- TemplateBeginEditable name="sidebar" -->

    <!-- TemplateEndEditable -->
    </div> <!-- "sidebar"  -->

  </div> <!-- "columns-wrapper" -->

<!-- =========================================================================== -->
  <div class="footer" role="contentinfo">

<table class="_table_footer">
<!--
<table width="104%" border="0" align="center">
-->
	<colgroup span="3">
	<col width="98%"/>
	<col width="1%"/> <!-- Can set this to a very small value & cell will always be wide enough to fit the text when "table-layout: auto;" in _table_footer. Then col 1 has max width to accommodate the copyright notice as the window is narrowed -->
	<col width="1%"/>
	</colgroup>

  <tr>
    <td align="left" class="copyright">XCopyright&nbsp;&copy;&nbsp;2015-<script type="text/javascript">
            document.write(new Date().getFullYear());
          </script> - Ultrasonic&nbsp;Resonators</td>
<!-- 2021-12-30 - see https://support.knowledgeowl.com/help/automatic-copyright-year for the above script
which automatically updates the year to the current year.
    <td align="left" class="copyright">Copyright&nbsp;&copy;&nbsp;2015-2021 - Ultrasonic&nbsp;Resonators</td>
-->
    <td align="right" class="copyright">Page&nbsp;revised&nbsp;on&nbsp;&nbsp;</td>

  <div class="footer" data-pgc-field="date_revised">
    <td align="left" class="copyright">20yy&#8209;mm&#8209;dd</td>
  </div> <!-- footer -->

  </tr>
</table>
<!--
        <p class="copyright">&copy; 2015 <a href="#">Ultrasonic Resonators</a></p>
 -->
  </div> <!-- footer -->
</div> <!-- "content-wrapper" -->
</body>
</html>

======== master_as_page_template_10a.html ========


<!doctype html>
<html data-pgc-master="master.html">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width"/>

<!-- 5/29/2015 - from http://realfavicongenerator.net/ for favicon.ico -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"/>
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"/>
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"/>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
<link rel="manifest" href="/manifest.json"/>
<meta name="msapplication-TileColor" content="#2d89ef"/>
<meta name="msapplication-TileImage" content="/mstile-144x144.png"/>
<meta name="theme-color" content="#ffffff"/>
<!-- End: favicon.ico -->

<!-- TemplateBeginEditable name="doctitle" -->
<title> | Ultrasonic Resonators</title>
<!-- TemplateEndEditable -->
<script type="text/javascript" src="../p7ehc/p7EHCscripts.js"></script>

<!-- Comment away the next to see the pages in print format. -->
<link href="../p7csspbm2/p7csspbm2_09.css" rel="stylesheet" type="text/css"/>

<!-- DRC - 19/Apr/2015 9:56 - moved below after all other stylesheets so that this overrides any conflicts -->
<!--
<link href="../p7csspbm2/p7csspbm2_print.css" rel="stylesheet" type="text/css" media="print">
-->
<!--[if lte IE 7]>
<style>
.menutop li {display: inline;}
div, .menuside a {zoom: 1;}
.masthead .banner, .masthead .banner img {width: 100%;}
</style>
<![endif]-->
<link href="../p7tm3/p7TM3-10.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="../p7tm3/p7TM3scripts.js"></script>
<link href="../p7tm3/p7TM3-01.css" rel="stylesheet" type="text/css" media="all"/>

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

<!-- DRC - 19/Apr/2015 9:57 - moved from above -->
<link href="../p7csspbm2/p7csspbm2_drc_print.css" rel="stylesheet" type="text/css" media="print"/>

<!--  2016-01-04 - mathjax for displaying equations -->
<script src="../templates/mathjax_renum_equations_2a.js"></script>

<!-- 2016-01-04 - works OK but above has simpler code
2015-12-30
<script src="../templates/mathjax_renum_equations_1a.js"></script>
-->

<!-- The following uses a local mathjax config file, in addition to the std cdn (Content Delivery Network) mathjax config file. In order to do this:
1. Must add "&delayStartupUntilConfig" to the end of the cdn.
2. Must add "MathJax.Hub.Configured();" to the end of the local mathjax config file to let the cdn know that the mathjax configuration has completed.
See (near end of link page) -
https://groups.google.com/forum/embed/#!topic/mathjax-users/J-36V22-G9Q
Use latex_demo_100a.html with local.js to debug (from above link but modified).
-->

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<!-- Obsolete 2021-12-13 ; replaced by above from
https://docs.mathjax.org/en/v2.7-latest/start.html.

See ! Warning at https://docs.mathjax.org/en/v2.7-latest/start.html --
cdn.mathjax.org was retired in April, 2017.

<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntilConfig"></script>
-->

<script src="../templates/mathjax_config_2a.js"></script>

<!-- TemplateBeginEditable name="localstyles" -->
<style type="text/css">
/* 2/16/2015 - Insert over-riding local styles or external style sheets here */

</style>
<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="head" -->
<style type="text/css">
<!-- 1/27/2015 - Insert over-riding external or local styles here -->
<!-- 2/16/2015 - currently not used -->
</style>
<!-- TemplateEndEditable -->
</head>

<body>
<div class="content-wrapper">
  <div class="masthead">
    <div class="logo">
      <h1><span style="font-size: 1.2em">U</span>ltrasonic <span style="font-size: 1.2em">R</span>esonators</h1>
    </div>
<!--
    <div class="banner"><img src="../p7csspbm2/img/pbm-mast.jpg" alt="">
    </div>
-->
  </div> <!-- masthead -->

  <div class="menutop-wrapper">

    <div class="menutop-button-wrapper">
    <ul class="menutop" role="menubar">
      <li><a href="../index.html" title="Home" target="_self">Home</a></li>
      <li><a href="../contents.html" title="Contents" target="_self">Contents</a></li>
<!-- 26/Mar/2016 12:56 - now in Contents
      <li><a href="../design_info.html" title="Design info" target="_self">Design info</a></li>
-->
<!-- 1/16/2015 - try to set focus on current button. See current1 in p7csspbm2_09.css
      <li><a href="../index.html" class="current1" title="Home" target="_self">Home</a></li>
      <li><a href="../design_info.html" class="current2" title="Design info" target="_self">Design info</a></li>
-->
<!-- 2016-06-12
			<li><a href="../design_help.html" title="Design help" target="_self">Design help</a></li>
 -->
      <li><a href="../notes.html" title="Notes" target="_self">Notes</a></li>
      <li><a href="../contacts.html" title="Contact" target="_self">Contact</a></li>
    </ul>
    </div>

 <!-- put google translate below -->
<!-- 	Insert in dwt file
			1/17/2015: For the following, see
			https://support.google.com/translate/#topic=2534534 - to add the translator

		Various layout options are available.
		Notes:
		1. Set autoDisplay:true if the website should automataically translate is the visitor's website is set to a foreigh language
-->
	<div class="google_translate-wrapper">
	<div id="google_translate_element"></div> <!-- displays the google drop-down menu. DW flags this as an empty div. -->
	</div>
	<script type="text/javascript">
	function googleTranslateElementInit() {
	  new google.translate.TranslateElement({
	    pageLanguage: 'en',
	    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
	  }, 'google_translate_element');
	}
	</script>
	<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- 1/17/2015 - The following was taken from https://support.google.com/translate/answer/2534601?hl=en&ref_topic=2534534 but doesn't work. Note the difference in src. Also, this site requires additional meta data to be entered. Must log in at https://accounts.google.com/ServiceLoginAuth and fill in required info.
	</script>
	<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-->
  </div> <!-- menutop-wrapper -->

  <div class="columns-wrapper">
    <div class="main-content" data-pgc-field="main_content">
      <!-- TemplateBeginEditable name="main-content" -->
      <div class="content p7ehc-1">

        <h1 class="page-topper">ZTopic</h1>
        <p>ZContent</p>

      </div> <!-- "content p7ehc-1" -->
    <!-- TemplateEndEditable -->
    </div> <!-- "main-content"  -->

    <div class="sidebar"> <!-- 26/Mar/2016 12:38  -->
    <!-- TemplateBeginEditable name="sidebar" -->

    <!-- TemplateEndEditable -->
    </div> <!-- "sidebar"  -->

  </div> <!-- "columns-wrapper" -->

<!-- =========================================================================== -->
  <div class="footer" role="contentinfo">

<table class="_table_footer">
<!--
<table width="104%" border="0" align="center">
-->
	<colgroup span="3">
	<col width="98%"/>
	<col width="1%"/> <!-- Can set this to a very small value & cell will always be wide enough to fit the text when "table-layout: auto;" in _table_footer. Then col 1 has max width to accommodate the copyright notice as the window is narrowed -->
	<col width="1%"/>
	</colgroup>

  <tr>
    <td align="left" class="copyright">Copyright&nbsp;&copy;&nbsp;2015-<script type="text/javascript">
            document.write(new Date().getFullYear());
          </script> - Ultrasonic&nbsp;Resonators</td>
<!-- 2021-12-30 - see https://support.knowledgeowl.com/help/automatic-copyright-year for the above script
which automatically updates the year to the current year.
    <td align="left" class="copyright">Copyright&nbsp;&copy;&nbsp;2015-2021 - Ultrasonic&nbsp;Resonators</td>
-->
    <td align="right" class="copyright">Page&nbsp;revised&nbsp;on&nbsp;&nbsp;</td>

  <div class="footer" data-pgc-field="date_revised">
    <td align="left" class="copyright">20yy&#8209;mm&#8209;dd</td>
  </div> <!-- footer -->

  </tr>
</table>
<!--
        <p class="copyright">&copy; 2015 <a href="#">Ultrasonic Resonators</a></p>
 -->
  </div> <!-- footer -->
</div> <!-- "content-wrapper" -->
</body>
</html>

Hi @dculp,
So, when Pinegrow creates a sub-page, it doesn’t directly copy the master. Some of the attributes change. Is this how you have been making sub-pages, rather than going to the File->New Page… menu?
I think this can be rescued by changing the data-pgc-field="main_content" to data-pgc-edit="main_content" in the master.html file.
Let me know,
Bob

RobM –

I tried this on several pages and it seems to work OK.

Could you look at the following code that I have corrected in master.html (near the bottom). It correctly allows editing but please advise for any other changes before I apply this to child pages –

  <div class="footer" data-pgc-edit="date_revised">
    <td align="left" class="copyright">20yy&#8209;mm&#8209;dd</td>
  </div> <!-- footer -->

(Right now I’m not creating any new pages. I’m just trying to figure out how to convert 700 Dreamweaver pages to Pinegrow using Pinegrow’s master/child format.)

Yup - that looks correct.

RobM –

The code seems to work OK for my master.html (below) and child pages. “\Page\Check for HTML errors” doesn’t show any errors. However, two validators apparently don’t like the div inside the table.

  • [Best HTML Validator Online to validate HTML data: W3C HTML Validator] –
    <div class="footer" data-pgc-edit="date_revised"> – Hovering over the left margin “X” gives, “Unexpected start tag (div) in table context caused voodoo mode.
    </div> <!-- footer --> – Hovering over the left margin “X” gives, “Unexpected end of tag (div) in table context caused voodoo mode.” and “Unexpected end of tag (div). Ignored.

  • [Showing results for http://ultrasonic-resonators.org/master.html - Nu Html Checker] –
    <div class="footer" data-pgc-edit="date_revised"> – The message is “Error - Start tag div seen in table.
    </div> <!-- footer --> – The message is “Fatal Error - Cannot recover after last error. Any further errors will be ignored.

If I don’t put data-pgc-edit="date_revised in a div (remove the div) but instead put it inside a td then this removes the errors and it seems to work OK on child pages. However, I discovered this by trial-and-error and don’t know if it is good practice or if it might cause other problems.

<td align="left" class="copyright" data-pgc-edit="date_revised">20yy&#8209;mm&#8209;dd</td>

======= master.html ======================


<!doctype html>
<html data-pgc-set-master>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width"/>

<!-- 5/29/2015 - from http://realfavicongenerator.net/ for favicon.ico -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"/>
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"/>
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"/>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
<link rel="manifest" href="/manifest.json"/>
<meta name="msapplication-TileColor" content="#2d89ef"/>
<meta name="msapplication-TileImage" content="/mstile-144x144.png"/>
<meta name="theme-color" content="#ffffff"/>
<!-- End: favicon.ico -->

<!-- TemplateBeginEditable name="doctitle" -->
<title> | Ultrasonic Resonators</title>
<!-- TemplateEndEditable -->
<script type="text/javascript" src="../p7ehc/p7EHCscripts.js"></script>

<!-- Comment away the next to see the pages in print format. -->
<link href="../p7csspbm2/p7csspbm2_09.css" rel="stylesheet" type="text/css"/>

<!-- DRC - 19/Apr/2015 9:56 - moved below after all other stylesheets so that this overrides any conflicts -->
<!--
<link href="../p7csspbm2/p7csspbm2_print.css" rel="stylesheet" type="text/css" media="print">
-->
<!--[if lte IE 7]>
<style>
.menutop li {display: inline;}
div, .menuside a {zoom: 1;}
.masthead .banner, .masthead .banner img {width: 100%;}
</style>
<![endif]-->
<link href="../p7tm3/p7TM3-10.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="../p7tm3/p7TM3scripts.js"></script>
<link href="../p7tm3/p7TM3-01.css" rel="stylesheet" type="text/css" media="all"/>

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

<!-- DRC - 19/Apr/2015 9:57 - moved from above -->
<link href="../p7csspbm2/p7csspbm2_drc_print.css" rel="stylesheet" type="text/css" media="print"/>

<!--  2016-01-04 - mathjax for displaying equations -->
<script src="../templates/mathjax_renum_equations_2a.js"></script>

<!-- 2016-01-04 - works OK but above has simpler code
2015-12-30
<script src="../templates/mathjax_renum_equations_1a.js"></script>
-->

<!-- The following uses a local mathjax config file, in addition to the std cdn (Content Delivery Network) mathjax config file. In order to do this:
1. Must add "&delayStartupUntilConfig" to the end of the cdn.
2. Must add "MathJax.Hub.Configured();" to the end of the local mathjax config file to let the cdn know that the mathjax configuration has completed.
See (near end of link page) -
https://groups.google.com/forum/embed/#!topic/mathjax-users/J-36V22-G9Q
Use latex_demo_100a.html with local.js to debug (from above link but modified).
-->

<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<!-- Obsolete 2021-12-13 ; replaced by above from
https://docs.mathjax.org/en/v2.7-latest/start.html.

See ! Warning at https://docs.mathjax.org/en/v2.7-latest/start.html --
cdn.mathjax.org was retired in April, 2017.

<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntilConfig"></script>
-->

<script src="../templates/mathjax_config_2a.js"></script>

<!-- TemplateBeginEditable name="localstyles" -->
<style type="text/css">
<!-- 2/16/2015 - Insert over-riding local styles or external style sheets below -->

</style>
<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="head" -->
<style type="text/css">
<!-- 1/27/2015 - Insert over-riding external or local styles here -->
<!-- 2/16/2015 - currently not used -->
</style>
<!-- TemplateEndEditable -->
</head>

<body>
<div class="content-wrapper">
  <div class="masthead">
    <div class="logo">
      <h1><span style="font-size: 1.2em">U</span>ltrasonic <span style="font-size: 1.2em">R</span>esonators</h1>
    </div>
<!--
    <div class="banner"><img src="../p7csspbm2/img/pbm-mast.jpg" alt="">
    </div>
-->
  </div> <!-- masthead -->

  <div class="menutop-wrapper">

    <div class="menutop-button-wrapper">
    <ul class="menutop" role="menubar">
      <li><a href="../index.html" title="Home" target="_self">Home</a></li>
      <li><a href="../contents.html" title="Contents" target="_self">Contents</a></li>
<!-- 26/Mar/2016 12:56 - now in Contents
      <li><a href="../design_info.html" title="Design info" target="_self">Design info</a></li>
-->
<!-- 1/16/2015 - try to set focus on current button. See current1 in p7csspbm2_09.css
      <li><a href="../index.html" class="current1" title="Home" target="_self">Home</a></li>
      <li><a href="../design_info.html" class="current2" title="Design info" target="_self">Design info</a></li>
-->
<!-- 2016-06-12
			<li><a href="../design_help.html" title="Design help" target="_self">Design help</a></li>
 -->
      <li><a href="../notes.html" title="Notes" target="_self">Notes</a></li>
      <li><a href="../contacts.html" title="Contact" target="_self">Contact</a></li>
    </ul>
    </div>

 <!-- put google translate below -->
<!-- 	Insert in dwt file
			1/17/2015: For the following, see
			https://support.google.com/translate/#topic=2534534 - to add the translator

		Various layout options are available.
		Notes:
		1. Set autoDisplay:true if the website should automataically translate is the visitor's website is set to a foreigh language
-->
	<div class="google_translate-wrapper">
	<div id="google_translate_element"></div> <!-- displays the google drop-down menu. DW flags this as an empty div. -->
	</div>
	<script type="text/javascript">
	function googleTranslateElementInit() {
	  new google.translate.TranslateElement({
	    pageLanguage: 'en',
	    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
	  }, 'google_translate_element');
	}
	</script>
	<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- 1/17/2015 - The following was taken from https://support.google.com/translate/answer/2534601?hl=en&ref_topic=2534534 but doesn't work. Note the difference in src. Also, this site requires additional meta data to be entered. Must log in at https://accounts.google.com/ServiceLoginAuth and fill in required info.
	</script>
	<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-->
  </div> <!-- menutop-wrapper -->

  <div class="columns-wrapper">
    <div class="main-content" data-pgc-edit="main_content">
      <!-- TemplateBeginEditable name="main-content" -->
      <div class="content p7ehc-1">

        <h1 class="page-topper">Topic</h1>
        <p>Content</p>

      </div> <!-- "content p7ehc-1" -->
    <!-- TemplateEndEditable -->
    </div> <!-- "main-content"  -->

    <div class="sidebar"> <!-- 26/Mar/2016 12:38  -->
    <!-- TemplateBeginEditable name="sidebar" -->

    <!-- TemplateEndEditable -->
    </div> <!-- "sidebar"  -->

  </div> <!-- "columns-wrapper" -->

<!-- =========================================================================== -->
  <div class="footer" role="contentinfo">

<table class="_table_footer">
	<colgroup span="3">
	<col width="98%"/>
	<col width="1%"/> 
    <!-- Can set this to a very small value & cell will always be wide enough to fit the text when "table-layout: auto;" in _table_footer. Then col 1 has max width to accommodate the copyright notice as the window is narrowed -->
	<col width="1%"/>
	</colgroup>

  <tr>
    <td align="left" class="copyright">ZCopyright&nbsp;&copy;&nbsp;2015-<script type="text/javascript">
            document.write(new Date().getFullYear());
          </script> - Ultrasonic&nbsp;Resonators</td>
<!-- 2021-12-30 - see https://support.knowledgeowl.com/help/automatic-copyright-year for the above script which automatically updates the year to the current year.
    <td align="left" class="copyright">Copyright&nbsp;&copy;&nbsp;2015-2021 - Ultrasonic&nbsp;Resonators</td>
-->
    <td align="right" class="copyright">Page&nbsp;revised&nbsp;on&nbsp;&nbsp;</td>

    <div class="footer" data-pgc-edit="date_revised">
      <td align="left" class="copyright">20yy&#8209;mm&#8209;dd</td>
    </div> <!-- footer -->

  </tr>
</table>

  </div> <!-- footer -->
</div> <!-- "content-wrapper" -->
</body>
</html>

So, in this example you added the div wrapper?

If so, you can remove it without problem and add the attribute to the td. This, of course, isn’t the conventional way of using components, but it shouldn’t cause too many problems. That attribute should only impact the element it is applied to and potentially any child elements.
Hope this helps,
Bob

Can you think of any problems that this might cause (before I apply this master.html to all of the dependent pages)?

I don’t think so. This isn’t normally how I would use these tools, so it is a bit of a case of just trying it.