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

**URL:** <https://forum.pinegrow.com/t/error-master-page-and-child-page-have-different-editable-areas/6257>\
**Category:** Beginners\
**Created:** [February 16, 2022, 4:21am UTC](https://forum.pinegrow.com/t/error-master-page-and-child-page-have-different-editable-areas/6257 "2022-02-16T04:21:38Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![dculp](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@dculp](https://forum.pinegrow.com/u/dculp)\
**Post date:** [February 16, 2022, 4:21am UTC](https://forum.pinegrow.com/t/error-master-page-and-child-page-have-different-editable-areas/6257/1 "2022-02-16T04:21:38Z")

</div>

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 –

```auto
<html data-pgc-set-master>

```

to

```auto
<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.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/91acd27c3588af3a27e6d6274b3216ab41646c8c.png)

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e80107dea98b0ac689e568523af8b4cbd2958b80.png)

The tree shows –

![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/e672ab270b17f7a588fb960e6f0b66ee15fa5c23.png)

Thanks,  
Don C.

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

```auto

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [February 16, 2022, 10:56am UTC](https://forum.pinegrow.com/t/error-master-page-and-child-page-have-different-editable-areas/6257/2 "2022-02-16T10:56:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dculp](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@dculp](https://forum.pinegrow.com/u/dculp)\
**Post date:** [February 16, 2022, 12:00pm UTC](https://forum.pinegrow.com/t/error-master-page-and-child-page-have-different-editable-areas/6257/3 "2022-02-16T12:00:59Z")

</div>

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 –

```auto
  <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.)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [February 16, 2022, 12:15pm UTC](https://forum.pinegrow.com/t/error-master-page-and-child-page-have-different-editable-areas/6257/4 "2022-02-16T12:15:59Z")

</div>

Yup - that looks correct.

---

<div class="post-metadata">

**Author:** ![dculp](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@dculp](https://forum.pinegrow.com/u/dculp)\
**Post date:** [February 20, 2022, 3:55am UTC](https://forum.pinegrow.com/t/error-master-page-and-child-page-have-different-editable-areas/6257/5 "2022-02-20T03:55:44Z")

</div>

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](https://jsonformatter.org/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](https://validator.w3.org/nu/?showsource=yes&doc=http%3A%2F%2Fultrasonic-resonators.org%2Fmaster.html#l203c53)] –  
`<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.

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

```

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [February 20, 2022, 10:49am UTC](https://forum.pinegrow.com/t/error-master-page-and-child-page-have-different-editable-areas/6257/6 "2022-02-20T10:49:05Z")

</div>

> [@dculp](#):
>
> ```auto
> <div class="footer" data-pgc-edit="date_revised">
> <td align="left" class="copyright">20yy&#8209;mm&#8209;dd</td>
> </div> <!-- footer -->
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![dculp](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@dculp](https://forum.pinegrow.com/u/dculp)\
**Post date:** [February 20, 2022, 1:16pm UTC](https://forum.pinegrow.com/t/error-master-page-and-child-page-have-different-editable-areas/6257/7 "2022-02-20T13:16:08Z")

</div>

> [@RobM](#):
>
> but it shouldn’t cause too many problems.

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

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [February 20, 2022, 1:34pm UTC](https://forum.pinegrow.com/t/error-master-page-and-child-page-have-different-editable-areas/6257/8 "2022-02-20T13:34:32Z")

</div>

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.
