reason for the error was

scorpius420 — Fri, 20 Mar 2009 15:11:02 +0000

reason for the error was that the whole td was the onclick area for popup and the popup pane was logically part of the td so clicking on any part of the td caused the pane to remain. solved. thanks anyhoo!

Ok, I'm using CSS visibility

scorpius420 — Fri, 20 Mar 2009 14:13:32 +0000

Ok, I'm using CSS visibility property to make pop-up panes appear and disappear. These panes are encased in spans with position absolute.

The following code works:

function showNotebookHelp()
{
 document.getElementById("notebookhelp").style.visibility = "visible";
 //document.getElementById("NAPane").style.visibility = "visible";
}
function  hideNotebookHelp()
{
 document.getElementById("notebookhelp").style.visibility = "hidden";
 //document.getElementById("NAPane").style.visibility = "hidden";

}

And so does the following to make the "addnotebook" pane appear:

function showAddNotebook()
{
 document.getElementById("addnotebook").style.visibility = "visible";

}

BUT!!! the following code to make the "addnotebook" pane disappear does not work.

The function gets called. And the error console of firefox and opera report absolutely no errors, but the pane does not go away.

function hideAddNotebook()
{
  alert("hide add called");
 document.getElementById("addnotebook").style.visibility = "hidden";

}

Here is the code of the actual pane, which happens to be enclosed in a div that contains a sub-interface:

          <td class="notetabletd" title="Make New Notebook" onClick="showAddNotebook();">+
                  <span id="addnotebook" name="addnotebook" style="position:absolute; visibility:hidden; z-index:3; ">
             <table cellpadding="5px" width="300px" bgcolor="white" style="position:absolute; z-index:4; left:30; top:-30;  border-style:solid; border-width:2px;font-size:12; font-weight:bold;">
             <tr>
             <td>Notebook Name:</td>
                 <td><input type="text" value="" id="addNotebookName" name="addNotebookName"></td>
             </tr>
                 <tr>
             <td>Urgency/Importance:</td>
                 <td>
                    <select>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                    </select>
                 </td>
             </tr>
                 <tr>
             <td></td>
                 <td></td>
             </tr>
                 <tr><td><input type="button" value="Cancel" onClick="hideAddNotebook();"></td>
                 <td><input type="button" value="Create!" onClick="doAddNotebook();"></td>
                 </tr>
             </table>
             </span>
          </td>

The td which contains the span is inside a table that is inside a div. This is so bizarre it has me pulling my hair out. please help.

try it with position:

decibel.places — Sun, 01 Feb 2009 19:34:03 +0000

try it with position: absolute

notice that I nested the divs differently than your code...

in general you are better off using divs as generic containers and reserving span for specific inline tweaks such as changing a font

I thought you're better off with (default) relative positioning, maybe you could attach an image mockup of what you want?

Thanks... but what I wanted

scorpius420 — Sun, 01 Feb 2009 18:59:59 +0000

Thanks... but what I wanted was the effect that position:absolute gives... where it floats at some specified location above the background. you seem to have put in the z-index but not put in any positioning attrib. Is that kosher?

I have removed your position

decibel.places — Tue, 27 Jan 2009 21:35:50 +0000

I have removed your position and replaced your top/left with margins.

(see attached file)

Is this sort of what you want?

I noticed in your original code ypou left out the "px" value eg top:200px

<td style="border: thin solid #000000;" valign="top">
  
      <div style="margin: 130px 0 0 200px; z-index:1;"><img src="mpSitePics/resediticon.gif" height="128" width="128"></div> 
      <div style="margin: 200px 0 0 270px; z-index:2;"><img src="mpSitePics/ajax-loader.gif"><div style="margin: 0; z-index:2;">sample long text that goes one and one and on and on...</div></div> 
  
</td>

well now I took the absolute

scorpius420 — Tue, 27 Jan 2009 15:04:35 +0000

well now I took the absolute position out of the

here is the code...

<td  style=" border-style:solid" valign="top">
		  
	<span style=" position: absolute; visibility:visible; "> 
	  <span style="position:absolute; top:130; left:200; z-index:1;"><img src="mpSitePics/resediticon.gif" height="128" width="128"></span> 
      <span style="position:absolute; top:200; left:270; z-index:2;"><img src="mpSitePics/ajax-loader.gif"></span> 
	  <span style="position:absolute; top:200; left:270; z-index:2;">sample long text that goes one and one and on and on...</span> 

    </span> 

For some reason it is not letting me post pictures... I'll try again this time. Ok.. it says some sort of error occured..but then it reports that the screenshot is uploaded... so... if you can recover it.. it'll help.

Anyway... the crappy work around is using nowrap and trying to calculate where I have to insinuate a because it won't wrap properly itself.

I have never seen tables

pr0gr4mm3r — Sun, 25 Jan 2009 17:38:00 +0000

I have never seen tables with absolute positioning on the table cells. That is probably what is causing your problems.

Can you link to the page?