Closed
Bug 71150
Opened 24 years ago
Closed 21 years ago
Anchor elements not active in Absolutly positioned elements within relative SPAN
Categories
(Core :: Layout: Positioned, defect)
Core
Layout: Positioned
Tracking
()
RESOLVED
FIXED
mozilla1.7beta
People
(Reporter: mark, Unassigned)
References
Details
(Keywords: testcase, Whiteboard: [awd:tbl])
Attachments
(1 file)
|
(deleted),
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 - <SPAN> positioned elements</h1>
<p>Absolutely positioned TABLE within Relatively positioned SPAN is
displayed correctly but <A>
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 - <DIV> 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. <A> 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>
|
||
Comment 1•24 years ago
|
||
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.
|
||
Comment 2•24 years ago
|
||
|
||
Comment 3•24 years ago
|
||
CONFIRM on Linux/2001030708.
|
|
||
Comment 4•24 years ago
|
||
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).
|
||
Comment 5•24 years ago
|
||
Marking NEW.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: testcase
OS: Windows 2000 → All
Hardware: PC → All
|
||
Updated•23 years ago
|
Target Milestone: mozilla1.0 → mozilla1.1
|
|
||
Comment 7•22 years ago
|
||
mass reassign to default owner
Assignee: karnaze → table
Status: ASSIGNED → NEW
Component: Layout → Layout: Tables
QA Contact: petersen → madhur
Target Milestone: mozilla1.1alpha → ---
|
||
Comment 8•22 years ago
|
||
->R&A Pos.
Assignee: table → position
Component: Layout: Tables → Layout: R & A Pos
QA Contact: madhur → ian
|
||
Comment 9•21 years ago
|
||
this was fixed by roc in bug 235778. Yay!
Status: NEW → RESOLVED
Closed: 21 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla1.7beta
You need to log in
before you can comment on or make changes to this bug.
Description
•