A
Amish
Hi,
I have CSS based popup menus which display over a select list.
Everything works fine with Mozilla and Firefox but in IE the select list
is always on top of the display block. The z-index as no effect in IE.
This behaviour is confirmed by
http://www.blooberry.com/indexdot/css/properties/position/zindex.htm
The HTML listing below shows an example of a list display block that is
covered by the select list in IE.
Is there any work-around or method of getting the display block to
display over the select list?
Thank you in advance,
Amish
------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<style type="text/css"><!--
ul.menu1 {
background-color: red;
color: blue;
list-style: none;
display: block;
position: absolute;
z-index: 10;
}
--></style>
<body>
<ul class="menu1">
<li>ABC12345</li>
<li>DEF12345</li>
<li>GHI12345</li>
<li>JKL12345</li>
<li>MNO12345</li>
<li>PQR12345</li>
</ul>
<form method="post" action="http://localhost/cgi/script"
enctype="multipart/form-data">
<select class="selection1" name="optionlist" size="5" multiple="multiple">
<option value="ITEM1">ITEM1</option>
<option value="ITEM2">ITEM2</option>
<option value="ITEM3">ITEM3</option>
<option value="ITEM4">ITEM4</option>
<option value="ITEM5">ITEM5</option>
<option value="ITEM6">ITEM6</option>
<option value="ITEM7">ITEM7</option>
<option value="ITEM8">ITEM8</option>
</select>
</form>
</body></html>
------------------------------------------------------------------
I have CSS based popup menus which display over a select list.
Everything works fine with Mozilla and Firefox but in IE the select list
is always on top of the display block. The z-index as no effect in IE.
This behaviour is confirmed by
http://www.blooberry.com/indexdot/css/properties/position/zindex.htm
The HTML listing below shows an example of a list display block that is
covered by the select list in IE.
Is there any work-around or method of getting the display block to
display over the select list?
Thank you in advance,
Amish
------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<style type="text/css"><!--
ul.menu1 {
background-color: red;
color: blue;
list-style: none;
display: block;
position: absolute;
z-index: 10;
}
--></style>
<body>
<ul class="menu1">
<li>ABC12345</li>
<li>DEF12345</li>
<li>GHI12345</li>
<li>JKL12345</li>
<li>MNO12345</li>
<li>PQR12345</li>
</ul>
<form method="post" action="http://localhost/cgi/script"
enctype="multipart/form-data">
<select class="selection1" name="optionlist" size="5" multiple="multiple">
<option value="ITEM1">ITEM1</option>
<option value="ITEM2">ITEM2</option>
<option value="ITEM3">ITEM3</option>
<option value="ITEM4">ITEM4</option>
<option value="ITEM5">ITEM5</option>
<option value="ITEM6">ITEM6</option>
<option value="ITEM7">ITEM7</option>
<option value="ITEM8">ITEM8</option>
</select>
</form>
</body></html>
------------------------------------------------------------------