Closed Bug 71150 Opened 24 years ago Closed 20 years ago

Anchor elements not active in Absolutly positioned elements within relative SPAN

Categories

(Core :: Layout: Positioned, defect)

Product:
Core
Component:
Layout: Positioned
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla1.7beta

People

(Reporter: mark, Unassigned)

References

Details

(Keywords: testcase, Whiteboard: [awd:tbl])

Attachments

(1 file)

Above Test Case
4.26 KB, text/html
Details 
I am having problems getting an Absolutely positioned TABLE element to render 
correctly within a relatively positioned DIV or SPAN. for the DIV, space is 
allocated for the absolute element when it shoudln't be, and in the SPAN, it 
appears OK, but A elements within the absolute block don't work.

The same effect is acheived using a recent Linux build as well. IE5 works fine 
(with minor Javascript changes not related to the problem).

Examples below.... It's supposed to be a simple drop-down menuing sysem, the 
drop downs appear when the mouse moves over the links....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>Test Page</title>
  </head>
  <body>
    <script language="Javascript">
      var lastMenu = null;
      
      function displaySubMenu(id)
      {
        var menu;
      
        menu=document.getElementById(id).style;
        menu.visibility="visible";
      
        if (lastMenu != null && lastMenu != menu)
          hideAll();
      
        lastMenu = menu;
      }
      
      function hideAll()
      {
      if(lastMenu != null)
        lastMenu.visibility = "hidden";
      }

      document.onclick=hideAll;

    </script>
    
    <h1>Example 1 - &lt;SPAN&gt; positioned elements</h1>

    <p>Absolutely positioned TABLE within Relatively positioned SPAN is 
displayed correctly but &lt;A&gt;
      TAGs in the popup TABLEs are not active. It's almost as if the z-index of 
the mouse pointer is below the
      absolutely positioned elements.</p>  

    <table width="50%" bgcolor="yellow" border="1">    
	<tr>
	  
	  <td>
	    <span style="position:relative">
	      <a href="" 
		 onmouseover="displaySubMenu('m1'); return true;" 
		 onclick="return false;">Menu 1</a>
	    <table bgcolor='white' width="200" id="m1" 
		   style="position:absolute; visibility:hidden; top:20px" 
border="1">
		<tr><td><a href='m1i1.html'>Menu 1 Item 1</a></td></tr>
		<tr><td><a href='m1i2.html'>Menu 1 Item 2</a></td></tr>
	    </table> 
	  </span>
	  </td>

	  <!-- 
********************************************************************************
******************* -->
	  
	  <td>
	    <span style="position:relative">
	      <a href="" 
		 onmouseover="displaySubMenu('m2'); return true;" 
		 onclick="return false;">Menu 2</a>
	    <table bgcolor='white' width="200" id="m2" 
		   style="position:absolute; visibility:hidden; top:20px" 
border="1">
		<tr><td><a href='m3i1.html'>Menu 2 Item 1</a></td></tr>
		<tr><td><a href='m3i2.html'>Menu 2 Item 2</a></td></tr>
	    </table> 
	  </span>
	  </td>
	  
	  <!-- 
********************************************************************************
******************* -->
	  
	  <td>
	    <span style="position:relative">
	      <a href="" 
		 onmouseover="displaySubMenu('m3'); return true;" 
		 onclick="return false;">Menu 3</a>
	    <table bgcolor='white' width="200" id="m3" 
		   style="position:absolute; visibility:hidden; top:20px" 
border="1">
		<tr><td><a href='m3i1.html'>Menu 3 Item 1</a></td></tr>
		<tr><td><a href='m3i2.html'>Menu 3 Item 2</a></td></tr>
	    </table> 
	  </span>
	  </td>
    
	</tr>
    </table>

    <!-- 
********************************************************************************
******************* -->
	
    <h1>Example 2 - &lt;DIV&gt; positioned elements</h1>

    <p>Absolutely positioned TABLE within Relatively positioned DIV has 
vertical space allocated even though
      it should be removed from normal document flow. &lt;A&gt; tags now 
work.</p>

    <table width="50%" bgcolor="yellow" border="1">    
	<tr>
	  
	  <td>
	    <div style="position:relative">
	      <a href="" 
		 onmouseover="displaySubMenu('m4'); return true;" 
		 onclick="return false;">Menu 4</a>
	      <table bgcolor='white' width="200" id="m4" 
		     style="position:absolute; visibility:hidden; top:20px" 
border="1">
		  <tr><td><a href='m4i1.html'>Menu 4 Item 1</a></td></tr>
		  <tr><td><a href='m4i2.html'>Menu 4 Item 2</a></td></tr>
	      </table> 
	    </div>
	  </td>
    
    <!-- 
********************************************************************************
******************* -->
    
	  <td>
	    <div style="position:relative">
	      <a href="" 
		 onmouseover="displaySubMenu('m5'); return true;" 
		 onclick="return false;">Menu 5</a>
	      <table bgcolor='white' width="200" id="m5" 
		     style="position:absolute; visibility:hidden; top:20px" 
border="1">
		  <tr><td><a href='m5i1.html'>Menu 5 Item 1</a></td></tr>
		  <tr><td><a href='m5i2.html'>Menu 5 Item 2</a></td></tr>
	      </table> 
	    </div>
	  </td>

    <!-- 
********************************************************************************
******************* -->
    
	  <td>
	    <div style="position:relative">
	      <a href="" 
		 onmouseover="displaySubMenu('m6'); return true;" 
		 onclick="return false;">Menu 6</a>
	      <table bgcolor='white' width="200" id="m6" 
		     style="position:absolute; visibility:hidden; top:20px" 
border="1">
		  <tr><td><a href='m6i1.html'>Menu 6 Item 1</a></td></tr>
		  <tr><td><a href='m6i2.html'>Menu 6 Item 2</a></td></tr>
	      </table> 
	    </div>
	  </td>
	  
	</tr>
    </table>

  </body>
</html>
Your testcase with <div> is invalid (in that space is _supposed_ to be left there).

From the CSS2 spec (http://www.w3.org/TR/REC-CSS2/visufx.html#visibility):

The 'visibility' property specifies whether the boxes generated by an element
are rendered. Invisible boxes still affect layout (set the 'display' property to
'none' to suppress box generation altogether). Values have the following meanings:

hidden
  The generated box is invisible (fully transparent), but still affects layout.

changing your code to use display instead of visibility seems to help things a
bit... though there are other issues.
Attached file Above Test Case — 

    
    

    
  
CONFIRM on Linux/2001030708.

    
    

    
  
OK, did some testing of the <span> case. With viewmanager2, I see the popups but
cannot click on them as described.

With viewmanager3, the popups do not appear at all (which is more consistent
with not being able to click on them).


    
    

    
  
Marking NEW.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: testcase
OS: Windows 2000 → All
Hardware: PC → All

    
    

    
  
Moving to m1.0
Status: NEW → ASSIGNED
Target Milestone: --- → mozilla1.0

    
  
Whiteboard: [awd:tbl]

    
  
Target Milestone: mozilla1.0 → mozilla1.1

    
    

    
  
mass reassign to default owner
Assignee: karnaze → table
Status: ASSIGNED → NEW
Component: Layout → Layout: Tables
QA Contact: petersen → madhur
Target Milestone: mozilla1.1alpha → ---

    
    

    
  
->R&A Pos.
Assignee: table → position
Component: Layout: Tables → Layout: R & A Pos
QA Contact: madhur → ian
Depends on: 135082

    
    

    
  
this was fixed by roc in bug 235778. Yay!
Status: NEW → RESOLVED
Closed: 20 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla1.7beta

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: