View Single Post
  #1 (permalink)  
Old October 20th, 2005, 06:07 AM
crmpicco crmpicco is offline
Friend of Wrox
Points: 6,879, Level: 35
Points: 6,879, Level: 35 Points: 6,879, Level: 35 Points: 6,879, Level: 35
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,521
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default z-index problem with select showing through div

I have a problem with the code below,
when i mouseover a image I have to hide to <select> 'title1' and then show the DIV that pops-up.

What happens is that due to the rendering order of the DOM the select shows through the div, but is there any way
to NOT hide the <select> and just show the <div>. Setting some kind of order of rendering?
This is my code setup:
(the image mouseover is not shown to keep the code down)
Code:
<style>

.demo {color:#000000; border-color:#666666; background-color:<%=minirules%>; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold;
layer-background-color:#cccccc; position:absolute; bottom:0px; height:100px; visibility:hidden; z-index:5; border-color:#FFFFFF; border:inherit;}
.demo_t {font-family:Verdana; font-size:9px; color:#000000;    border:1; border-color:#000000;}

</style>

<select name="title1" class="font4">
    <option value="Mr">Mr</option>
      <option value="Mrs">Mrs</option>
      <option value="Miss">Miss</option>
      <option value="Mstr">Mstr</option>
      <option value="Ms">Ms</option>
</select>

<div id="demodiv" class="demo" style="width: 755px">
<table id="demodiv_t_Main" border="1" bordercolor="<%=brdColDark%>" width="100%" height="100" summary="The Mini-Rules DIV hidden or shown onMouseOver of 'VIEW RULES'">  
<tr class="head2fnt" bordercolor="<%=brdColDark%>" height="10%">
<td colspan="2" nowrap lang="en">
    <table width="100%" id="demodiv_SpecialInfo" class="head2fnt" summary="The Special Information row (if applicable)">
    <tr class="head2fnt"></tr>
    </table>
</td>
</tr>
<tr id="MinMaxStayTable">
    <td nowrap lang="en" width="60%" id="piccolax" valign="top">
        <table id="demodiv_t" width="100%" class="demo_t" summary="List of Mini Rules for this contract">
        <tr valign="top"><td valign="top" class="border_bottom" nowrap><b>FARE RULES</b></td></tr>
        </table> 
    </td>
    <td nowrap lang="en" width="40%" id="crmpicco" valign="top">
        <table id="demodiv_t_MinMax" class="demo_t" width="100%" border="0" summary="List of Min/Max Stays for this contract">
        <tr valign="top"><td valign="top" class="border_bottom" nowrap><b>MIN/MAX STAY</b></td></tr>
        </table>
    </td>
</tr>
</table> 
</div>


www.crmpicco.co.uk
__________________
_______________________
Ayrshire Minis - a Mini E-Community
http://www.ayrshireminis.com
http://www.crmpicco.co.uk
Reply With Quote