Troubleshooting JSmol Pages

If parts of your page are overlapping or appear in odd positions, try checking the following. The page is divided into three sections, each of which is represented by a DIV tag. With the Code window visible (see instructions), check their code as follows:

1. There are two vertical regions, the one on the left for the molecule and the one on the right for the text. Click on the leftmost of these region, and then check the code that appears in the code window. It should start with something like:
   
   <div class="region" style="top: 5%; left: 0px; width: 60%; height: 95%;">

   If part of the code corresponding to the above line is different, change the code in your page to match it.
2. Now click on the rightmost of the two regions, and check the code in the code window. Ensure that it starts with:
   
   <div class="region" style="top: 5%; left: 61%; width: 39%; height: 95%;">
   
   
3. Now click anywhere in the bar of blue links at the top of the page. Check that the code in the code window begins with the following:
   
   <div class="region" style="top: 0px; left: 0px; width: 100%; height: 5%;">

Now be sure to save your page in the editor. Now when you refresh the page in the browser, it should be laid out properly.

Back to Instructions