title: dynamically change css class using js
body: <p>I'm having a problem while trying to dynamically change a table cell's styling class using JavaScript. </p>
  
  <p>The following issue happens on FF, I opened the page on other browsers too and it worked fine.</p>
  
  <p>I have a html page that contains a 4x4 table. I would like when I click on a cell, to zoom it in and when I click on it again to zoom it out. I defined 2 CSS classes, one for the normal size cell and one for the zoomed cell. I am using JS to change the CSS class when a cell is clicked. </p>
  
  <p>The issue on FF is that when changing from zoomClass to normalClass all the cells to the right of the clicked cell are shifted to the right...</p>
  
  <p>I can't find a solution or a workaround for this problem, if somebody has any ideas please post them here.</p>
  
  <p>Next, I will attach the html, css and js files.</p>
  
  <p>Thanks :)</p>
  
  <p><code>util.js</code></p>
  
  <pre><code>
  function zoom(id) {
  
      if (document.getElementById(id).className == "zoomClass") {
  
          document.getElementById(id).className = "normalClass";
  
      } else {
  
          document.getElementById(id).className="zoomClass";
  
      }
  
  }
  
  </code></pre>
  
  <p><code>calendar.css</code></p>
  
  <pre><code>
  table, td, th, tr {
      border-color:#D2D3D4;
      border-style:solid;
      border-width:2px;
  }
  
  #main_table {
      border-spacing:1px;
      height:450px;
      margin-left:auto;
      margin-right:auto;
      position:relative;
      top:30px;
      width:850px;
  }
  
  td.normalClass {
      padding:0;
      font-size:4px;
      color:#3333FF;
  }
  
  td.zoomClass {
      display:inline;
      position:absolute;
      width:320px;
      height:240px;
      z-index:100;
      font-size:18px;
  }
  </code></pre>
  
  <p><code>test.html</code></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/calendar.css" media="screen" /&gt;
      &lt;script type="text/javascript" src="js/util.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div&gt;
      &lt;div&gt;
          &lt;table id="main_table"&gt;
              &lt;tr&gt;
                  &lt;td id="1" onclick="zoom(1)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="2" onclick="zoom(2)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="3" onclick="zoom(3)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="4" onclick="zoom(4)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="6" onclick="zoom(6)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="7" onclick="zoom(7)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="8" onclick="zoom(8)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="9" onclick="zoom(9)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="10" onclick="zoom(10)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="11" onclick="zoom(11)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="12" onclick="zoom(12)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="13" onclick="zoom(13)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="14" onclick="zoom(14)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="15" onclick="zoom(15)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="16" onclick="zoom(16)" align="right" valign="top" class="normalClass"&gt;&lt;/td&gt;
                  &lt;td id="17" onclick="zoom(17)" align="right" valign="top"     class="normalClass"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>