By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,738 Members | 1,080 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,738 IT Pros & Developers. It's quick & easy.

CSS display blocks and select lists in IE

P: n/a
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/cs...ion/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>
------------------------------------------------------------------
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Amish <am***@earth.milky.way>
(news:cd**********@ctb-nnrp2.saix.net) wrote:
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/cs...ion/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?
No.
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>
------------------------------------------------------------------

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.