simple hidden div popup

[phirestalker]

I am migrating from another storefront and I had a working popup div in the description box, so I just copied the html into the edit html area of the description of a product. The div does not show up when I click on the link as it did in the other software

 

I checked the view html while visiting the site and the javascript is on there, so it isn't ignored.

Here is the code I pasted in

 

<p><strong><span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: left;">Basic Men's T-Shirt specs</span></strong></p>
<p><a onclick="document.getElementById('size_chart').style.display = 'block';" href="#">Size Chart</a></p>
<ul style="font-family: Arial, Helvetica, sans-serif; text-align: left; box-sizing: content-box; color: #00539f; padding-left: 16px; font-size: 10px; line-height: 17px;">
<li style="box-sizing: content-box;"><span style="box-sizing: content-box; color: black; font-size: 12px;">Anvil Classic Tee</span></li>
<li style="box-sizing: content-box;"><span style="box-sizing: content-box; color: black; font-size: 12px;">Choice of colors; white, ash gray and black</span></li>
<li style="box-sizing: content-box;"><span style="box-sizing: content-box; color: black; font-size: 12px;">Features a TearAway™ label</span></li>
<li style="box-sizing: content-box;"><span style="box-sizing: content-box; color: black; font-size: 12px;">5.4-ounce, pre-shrunk 100% heavyweight cotton has a classic, loose fit for all day comfort</span></li>
<li style="box-sizing: content-box;"><span style="box-sizing: content-box; color: black; font-size: 12px;">Shoulder-shoulder tape and seamless collar</span></li>
<li style="box-sizing: content-box;"><span style="box-sizing: content-box; color: black; font-size: 12px;">Double-needle neck sleeve and bottom hem</span></li>
</ul>
<div id="size_chart" style="position: fixed; background: #ffffff; border: 2px groove #000000; display: none;">
<table>
<tbody>
<tr><th style="background-color: gray; color: #ffffff; font-size: 2.5em; border: 2px #000000; border-bottom-style: ridge;" colspan="6">Men's Basic Tee Size Chart <a onclick="document.getElementById('size_chart').style.display = 'none';" href="#"> <!--	  <img align="right" length="29" src="http://dontcair.org/Close-button.png" width="29" /> --> X </a></th></tr>
<tr style="font-size: 2em;">
<td style="background-color: #2ee9ff; border: 2px #000000; border-right-style: ridge;"><strong>Size</strong></td>
<td style="text-align: center;">S</td>
<td style="text-align: center;">M</td>
<td style="text-align: center;">L</td>
<td style="text-align: center;">XL</td>
<td style="text-align: center;">2XL</td>
</tr>
<tr style="font-size: 2em;">
<td style="background-color: #2ee9ff; border: 2px #000000; border-right-style: ridge;"><strong>Chest(Circumference)</strong></td>
<td style="text-align: center;">34-36</td>
<td style="text-align: center;">38-40</td>
<td style="text-align: center;">42-44</td>
<td style="text-align: center;">46-48</td>
<td style="text-align: center;">50-52</td>
</tr>
<tr style="font-size: 2em;">
<td style="background-color: #2ee9ff; border: 2px #000000; border-right-style: ridge;"><strong>Length</strong></td>
<td style="text-align: center;">27</td>
<td style="text-align: center;">29</td>
<td style="text-align: center;">30</td>
<td style="text-align: center;">31</td>
<td style="text-align: center;">32</td>
</tr>
</tbody>
</table>
</div>

 

Please tell me what I can do to make it work

Edited December 19, 2012 by phirestalker (see edit history)