> My question is: is this a bug in Firefox, or in my incorrect
> understanding of the css positioning?
Hello Bill,
I can't really answer your question, but it seems that width: 100%;
height: 100%; within the .popup div {} declaration caused the movement.
Furthermore, I seems that the <div> within the <td> is essential because
otherwise there is no real element to which the <ul> can refer to as
position.
Here's my version:
HTH
Niklas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
<head>
<title>test menue</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body, ul, li {
list-style: none;
margin: 0;
padding: 0;
}
.bannerNav {
width: 100%;
padding: 0;
margin: 0;
}
.bannerNav td {
border: 1px solid #76777A;
}
.popup div {
position: relative;
}
.bannerNav a {
display: block;
width: 100%;
padding: .5em 0;
text-align: center;
text-decoration: none;
}
.bannerNav .popup ul {
width: 20em;
position: absolute;
margin-top: 2px;
left: -3000px; /* off screen */
border-left: 1px solid green;
border-right: 1px solid green;
border-bottom: 1px solid green;
background: #FFFFFF; /* has to be set otherwise IE 7 beta 2
closes
popup */
}
.bannerNav .popup:hover ul {
left: 1.5em; /* back on screen */
}
.bannerNav ul a {
padding: .1em 0 .1em .6em;
text-align: left;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: red;
}
</style>
</head>
<body>
<!--
works on Windows with:
Firefox V1.0.6
IE 7 beta 2
Opera V8.54
Mozilla V1.7.1
Netscape V7.1
doesn't work on Windows with:
IE 6
Opera V7.23
-->
<table class="bannerNav">
<tbody>
<tr>
<td class="popup">
<a href="#">link text</a>
<div>
<ul>
<li><a href="#">a List item 1</a></li>
<li><a href="#">a List item 2</a></li>
<li><a href="#">a List item 3</a></li>
<li><a href="#">a List item 4</a></li>
<li><a href="#">a List item 5</a></li>
</ul>
</div>
</td>
<td class="popup">
<a href="#">more link text</a>
<div>
<ul>
<li><a href="#">b List item 1</a></li>
<li><a href="#">b List item 2</a></li>
<li><a href="#">b List item 3</a></li>
<li><a href="#">b List item 4</a></li>
<li><a href="#">b List item 5</a></li>
</ul>
</div>
</td>
<td class="popup">
<a href="#">link text</a>
<div>
<ul>
<li><a href="#">c List item 1</a></li>
<li><a href="#">c List item 2</a></li>
<li><a href="#">c List item 3</a></li>
<li><a href="#">c List item 4</a></li>
<li><a href="#">c List item 5</a></li>
</ul>
</div>
</td>
<td class="popup">
<a href="#">more link text</a>
<div>
<ul>
<li><a href="#">d List item 1</a></li>
<li><a href="#">d List item 2</a></li>
<li><a href="#">d List item 3</a></li>
<li><a href="#">d List item 4</a></li>
<li><a href="#">d List item 5</a></li>
</ul>
</div>
</td>
<td class="popup">
<a href="#">link text</a>
<div>
<ul>
<li><a href="#">e List item 1</a></li>
<li><a href="#">e List item 2</a></li>
<li><a href="#">e List item 3</a></li>
<li><a href="#">e List item 4</a></li>
<li><a href="#">e List item 5</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
