title: Div Visibility not working in Firefox, inner image not displaying
body: <p>[edit]Problem now solved</p>
  
  <p>I have an edit(div with an image) button within another div that contains editable content, my plan is to have the button hidden until the cursor hovers over the content div.</p>
  
  <p>My problem is that if I use <code>display:none;</code> in the CSS and then use a javascript function to show and hide the divButton again then the image does not display in FireFox.</p>
  
  <p>If I use <code>element.style.visibility = "visible";</code> then FireFox doesn't show the div at all.</p>
  
  <p>Any input would be really appreciated thanks :)</p>
  
  <p>Relevant code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="c1ContentSrc" class="widgetContent editable"&gt;
      @Html.Raw(HttpUtility.HtmlDecode(row.column1Content))
      &lt;div id="c1ContentEdit" class="cmsEditButton"&gt;&lt;img src="../../Content/images/cmsEdit.png" alt="edit" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.cmsEditButton{
      display:none;
      position:absolute;
      top:37px;
      right:8px;
      width:16px;
      height:16px;
  }
  </code></pre>
  
  <p>Alternate CSS</p>
  
  <pre><code>.cmsEditButton{
      visibility:hidden;
      position:absolute;
      top:37px;
      right:8px;
      width:16px;
      height:16px;
  }
  </code></pre>
  
  <p>javascript function</p>
  
  <pre><code>function showEditButton(id, editId) {
      if(editId.style.display == "none"){
          if (!id.isContentEditable) {
              editId.style.display = "block";
          }
      }else{
          editId.style.display = "none";
      }
  }
  </code></pre>
  
  <p>Alternate javascript code</p>
  
  <pre><code>function showEditButton(id, editId) {
      if (editId.style.visibility == "hidden" || editId.style.visibility == "") {
          if (!id.isContentEditable) {
              editId.style.visibility = "visible";
          }
      }else{
          editId.style.visibility = "hidden";
      }
  }
  </code></pre>
  
  <p>Function calls  </p>
  
  <pre><code>document.getElementById("c1ContentSrc").addEventListener("mouseover", function () {
         showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit"))
     }, false);
  
  document.getElementById("c1ContentSrc").addEventListener("mouseout", function () {
         showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit"))
     }, false);
  </code></pre>
  
  <p>Problem has been solved now with the following change, moved the image above the razor output, it seemed to be interfering, also removed the unnecessary div</p>
  
  <pre><code> &lt;div id="c1ContentSrc" class="widgetContent editable"&gt;
      &lt;img id="c1ContentEdit" class="cmsEditButton" title="edit" src="../../Content/images/cmsEdit.png" alt="edit" /&gt;
      @Html.Raw(HttpUtility.HtmlDecode(row.column1Content))
  &lt;/div&gt;
  </code></pre>