JavaScript menu breaks when formatted

programming web dev
1

I’ve inherited a menu from another developer, and I’ve noticed that when I try to apply source formatting to any page with the menu, the menu code breaks. Here’s the original formatting (which looks fine to begin with):


<div id="areaHeader">
    <ul id="headerMenu">

        <li onMouseOver="MM_swapImage('about','','images/nav/about_on.gif',1); this.lastChild.style.visibility='visible';" onMouseOut="MM_swapImgRestore(); this.lastChild.style.visibility='hidden';">
         <a href="#nogo"><img id="about" src="images/nav/about_on.gif" alt="About Company"/></a>
            <table cellspacing="0" cellpadding="0" border="0"><tr><td>
                <a href="index.html">Home</a>
                <a href="prod_select.html">Product Selection</a>
                <a href="delivery.html">Delivery</a>
                <a href="pricing.html">Pricing</a>
                <a href="quality.html">Quality Assurance</a>
                <a href="terms.html">Terms and Conditions</a>
            </td></tr></table></li>

        <li onMouseOver="MM_swapImage('products','','images/nav/products_on.gif',1); this.lastChild.style.visibility='visible';" onMouseOut="MM_swapImgRestore(); this.lastChild.style.visibility='hidden';">
        <a href="#nogo"><img id="products" src="images/nav/products_off.gif" alt="Products"/></a>
            <table cellspacing="0" cellpadding="0" border="0"><tr><td>
                <a href="p_chart.html">Company&nbsp;Product&nbsp;Chart</a>
                <a href="alpha_list.html">Alpha Product List</a>
                <a href="dza.html">Depleted Zinc Acetate (DZA)</a>
                <a href="dzo.html">Depleted Zinc Oxide (DZO)</a>
                <a href="ir192.html">Iridium-192</a>
                <a href="lithium7.html">Lithium-7</a>
                <a href="o18.html">Oxygen-18</a>
                <a href="synthesis.html">Synthesis Services</a>
            </td></tr></table></li>

        <li><a onmouseover="MM_swapImage('quote','','images/nav/quote_on.gif',1);" onmouseout="MM_swapImgRestore();" href="quote.html"><img id="quote" src="images/nav/quote_off.gif" alt="Quote Request"/></a></li>

        <li onMouseOver="MM_swapImage('resources','','images/nav/resources_on.gif',1); this.lastChild.style.visibility='visible';" onMouseOut="MM_swapImgRestore(); this.lastChild.style.visibility='hidden';">
        <a href="resources.html"><img id="resources" src="images/nav/resources_off.gif" alt="Resources"/></a>
            <table cellspacing="0" cellpadding="0" border="0"><tr><td>
                <a href="resources.html#conferences">Conferences</a>
                <a href="resources.html#research">Research</a>
                <a href="resources.html#medical">Medical</a>
                <a href="resources.html#industrial">Industrial</a>
            </td></tr></table></li>

        <li><a onmouseover="MM_swapImage('contact','','images/nav/contact_on.gif',1);" onmouseout="MM_swapImgRestore();" href="contact.html"><img id="contact" src="images/nav/contact_off.gif" alt="Contact"/></a></li>
    </ul>
</div>

After formatting the HTML page I receive this error:
this.lastChild.style has no properties

And the formatted code looks like this:


<div id="areaHeader">
    <ul id="headerMenu">
      <li onMouseOver="MM_swapImage('about','','images/nav/about_on.gif',1); this.lastChild.style.visibility='visible';" onMouseOut="MM_swapImgRestore(); this.lastChild.style.visibility='hidden';"> <a href="#nogo"><img id="about" src="images/nav/about_on.gif" alt="About Company"/></a>
        <table cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td><a href="index.html">Home</a> <a href="prod_select.html">Product Selection</a> <a href="delivery.html">Delivery</a> <a href="pricing.html">Pricing</a> <a href="quality.html">Quality Assurance</a> <a href="terms.html">Terms and Conditions</a> </td>
          </tr>
        </table>
      </li>
      <li onMouseOver="MM_swapImage('products','','images/nav/products_on.gif',1); this.lastChild.style.visibility='visible';" onMouseOut="MM_swapImgRestore(); this.lastChild.style.visibility='hidden';"> <a href="#nogo"><img id="products" src="images/nav/products_off.gif" alt="Products"/></a>
        <table cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td><a href="p_chart.html">Company&nbsp;Product&nbsp;Chart</a> <a href="alpha_list.html">Alpha Product List</a> <a href="dza.html">Depleted Zinc Acetate (DZA)</a> <a href="dzo.html">Depleted Zinc Oxide (DZO)</a> <a href="ir192.html">Iridium-192</a> <a href="lithium7.html">Lithium-7</a> <a href="o18.html">Oxygen-18</a> <a href="synthesis.html">Synthesis Services</a> </td>
          </tr>
        </table>
      </li>
      <li><a onmouseover="MM_swapImage('quote','','images/nav/quote_on.gif',1);" onmouseout="MM_swapImgRestore();" href="quote.html"><img id="quote" src="images/nav/quote_off.gif" alt="Quote Request"/></a></li>
      <li onMouseOver="MM_swapImage('resources','','images/nav/resources_on.gif',1); this.lastChild.style.visibility='visible';" onMouseOut="MM_swapImgRestore(); this.lastChild.style.visibility='hidden';"> <a href="resources.html"><img id="resources" src="images/nav/resources_off.gif" alt="Resources"/></a>
        <table cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td><a href="resources.html#conferences">Conferences</a> <a href="resources.html#research">Research</a> <a href="resources.html#medical">Medical</a> <a href="resources.html#industrial">Industrial</a> </td>
          </tr>
        </table>
      </li>
      <li><a onmouseover="MM_swapImage('contact','','images/nav/contact_on.gif',1);" onmouseout="MM_swapImgRestore();" href="contact.html"><img id="contact" src="images/nav/contact_off.gif" alt="Contact"/></a></li>
    </ul>
  </div>

Other than the change in formatting, I can’t see what it is that is changing/breaking. Any ideas?