Z-Index Question (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

fredecd -> Z-Index Question (7/7/2005 15:41:58)

I am using the SEO Consultants CSS Drop Down Menu. I cannot seem to get the menu to cover up my form drop down boxes. I have tried assigning classes to my drop down boxes and increasing my z-index value for my menu items, but nothing has worked so far.

Any Ideas??



Tailslide -> RE: Z-Index Question (7/7/2005 15:52:13)

You'll need to show us the code or provide a link for us to be sure.

Are you, by any chance using position:absolute for either element?



fredecd -> RE: Z-Index Question (7/7/2005 15:55:44)

Yes. It looks like there is some absolute positioning involved. Here is the CSS for the Menu Layout: 
/* CSS Menus - Horizontal CSS Menu with Dropdown and Popout Menus - 20050131 */

/**************** menu coding *****************/
#menu        { background-color: #eee; background-repeat: repeat; background-attachment: 
               scroll; float: left; background-position: 0% }
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 12em;
float: left;
z-index: 500;
}

#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
z-index: 500;
}

#menu h2 {
color: #fff;
background: #0055AF;
text-transform: uppercase;
z-index: 500;

}

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
z-index: 500;

}

#menu a:hover {
color: #0055AF;
background: #fff;
z-index: 500;

}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
z-index: 500;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;
z-index: 500;}

/* End CSS Popout Menu */



Tailslide -> RE: Z-Index Question (7/7/2005 16:12:20)

I haven't used this particular menu system before - I know C1sissy has and could probably sort this out in about 3 seconds!

While we wait for her to show up could you post all of your HTML page code - it's easier to play with it and spot problems if you've got the lot.




bobby -> RE: Z-Index Question (7/7/2005 16:22:15)

If I understand correctly that's a problem inherent with the form field boxes (drop downs)

They can't, or won't allow themselves to be covered by a dynamic element like a fly out menu...

But I could be wrong...

The way I've always got around this is to move the forms down the page so they can't be covered up...




fredecd -> RE: Z-Index Question (7/7/2005 16:25:30)

Here is the main page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Convent Refinery Overtime / Proficiency Web Site</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" href="proficiency.css">
<style type="text/css" media="screen">body{behavior:url(csshover.htc);</style>

<style type="text/css" media="screen">

font-size: 100%;
}

#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;} 

#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
</head>

<body>

<div id="menu">
	<!--#include file="prof_menu.htm"-->


</div>
<div id="content">

<form METHOD="POST" action="--WEBBOT-SELF--" onsubmit="return FrontPage_Form1_Validator(this)" name="FrontPage_Form1">
  
  <!--webbot bot="SaveDatabase" startspan SuggestedExt="asp"
  S-DataConnection="proficiency" S-RecordSource="tblHours"
  U-Database-URL="../fpdb/proficiency.mdb"
  S-Form-Fields="strUserName memComments numTD strException jobID strOvertime strCode numMeals dtDate opID numWorked"
  S-Form-DBFields="strUserName memComments numTD strException jobID strOvertime strCode numMeals dtDate opID numWorked"
  U-ASP-Include-Url="../_fpclass/fpdbform.inc" --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--#include file="../_fpclass/fpdbform.inc"--><!--webbot
  bot="SaveDatabase" endspan -->
  
  <table BORDER="0">
    <tr>
      <td><b>Date:</b></td>
      <td><b><!--webbot bot="Validation" B-Disallow-First-Item="TRUE" --><select size="1" name="dtDate" class="hidebox">
    <option>Select Date</option>
    <option><%=Date()-1%></option>
    <option><%=Date()%></option>
  </select></b></td>
    </tr>
    <tr>
      <td><b>Employee:</b></td>
      <td><!--#include file="../_fpclass/fpdblib.inc"-->
<%
fp_sQry="SELECT * FROM tblOperators WHERE SeniorityGroupID=::SeniorityGroupID::"
fp_sDefault=""
fp_sNoRecords="No records returned."
fp_sDataConn="proficiency"
fp_iMaxRecords=256
fp_iCommandType=1
fp_iPageSize=0
fp_fTableFormat=False
fp_fMenuFormat=True
fp_sMenuChoice="strLastName"
fp_sMenuValue="opID"
fp_iDisplayCols=6
fp_fCustomQuery=False
BOTID=0
fp_iRegion=BOTID
%>

        <select NAME="opID" SIZE="1" class="hidebox">
          <option>Select a Name</option>
             
          <!--#include file="../_fpclass/fpdbrgn1.inc"-->
          <option VALUE="<%=FP_FieldHTML(fp_rs,"opID")%>"><%=FP_FieldHTML(fp_rs,"strLastName")%>,
          <%=FP_FieldHTML(fp_rs,"strFirstName")%></option>
          <!--#include file="../_fpclass/fpdbrgn2.inc"-->
        </select></td>  
    </tr>
    <tr>
      <td><b>Job Section:</b></td>
      <td><nobr><!--#include file="../_fpclass/fpdblib.inc"-->
<%
fp_sQry="SELECT * FROM tblJobSections WHERE SeniorityGroupID=::SeniorityGroupID::"
fp_sDefault=""
fp_sNoRecords="No records returned."
fp_sDataConn="proficiency"
fp_iMaxRecords=256
fp_iCommandType=1
fp_iPageSize=0
fp_fTableFormat=False
fp_fMenuFormat=True
fp_sMenuChoice="strJobSection"
fp_sMenuValue="jobID"
fp_iDisplayCols=6
fp_fCustomQuery=False
BOTID=0
fp_iRegion=BOTID
%>

        <select NAME="jobID" SIZE="1">
          <!--#include file="../_fpclass/fpdbrgn1.inc"-->
          <option VALUE="<%=FP_FieldHTML(fp_rs,"jobID")%>"><%=FP_FieldHTML(fp_rs,"strJobDescription")%></option>
          <!--#include file="../_fpclass/fpdbrgn2.inc"-->
        </select>
        </nobr></td>
    </tr>
    <tr>
      <td><b>Worked:</b></td>
      <td><input NAME="numWorked" SIZE="4" VALUE="<%=FP_FieldHTML(fp_rs,"numWorked")%>"></td>
    </tr>
    <tr>
      <td><b>Turned Down:</b></td>
      <td><input NAME="numTD" SIZE="4" VALUE="<%=FP_FieldHTML(fp_rs,"numTD")%>"></td>
    </tr>
    <tr>
      <td><b>Overtime:</b></td>
      <td><!--webbot bot="Validation" B-Disallow-First-Item="TRUE" --><select size="1" name="strOvertime">
          <option>Overtime?</option>
          <option>No</option>
          <option>Yes</option>
        </select></td>
    </tr>
    <tr>
      <td><b>Exception:</b></td>
      <td><!--webbot bot="Validation" B-Disallow-First-Item="TRUE" --><select size="1" name="strException">
          <option>Exception?</option>
          <option>No</option>
          <option>Yes</option>
        </select></td>
    </tr>
    <tr>
      <td><b>Meals:</b></td>
      <td><input NAME="numMeals" SIZE="4" VALUE="<%=FP_FieldHTML(fp_rs,"numMeals")%>"></td>
    </tr>
    <tr>
      <td><b>Code:</b></td>
      <td><!--webbot bot="Validation" B-Disallow-First-Item="TRUE" --><select size="1" name="strCode">
          <option>Select a Reason Code</option>
          <option>N/A - Not an absence</option>
          <option>U0 - Absence - Medical</option>
          <option>U1 - Absence - Vacation</option>
          <option>U2 - Absence - Other</option>
          <option>U3 - Training - Compliance</option>
          <option>U4 - Training - HS&E</option>
          <option>U5 - Training - Work Skills</option>
          <option>U6 - Meeting - HS&E</option>
          <option>U7 - Meeting - Company</option>
          <option>U8 - Meeting - Union</option>
          <option>U9 - Special Assignment</option>
          <option>UA - Facility Problems</option>
          <option>UB - Planned Maint. Work</option>
          <option>UC - Project Work</option>
          <option>UD - Natural Disaster</option>
          <option>UE - Business Discretion</option>
        </select></td>
    </tr>
    <tr>
      <td><b>Comments:</b></td>
      <td><textarea rows="5" name="memComments" cols="55"></textarea></td>
    </tr>
    <tr>
      <td COLSPAN="2"><br>
        <input TYPE="Submit" NAME="fp_submit"><input TYPE="Reset" NAME="fp_reset"></td>
    </tr>
  </table>
  <input type="hidden" name="strUserName" value="<%=Request.ServerVariables("LOGON_USER")%>">
</form>
</div>
</body>

</html>


And here is the include: 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>

</head>

<body>

<ul>
  <li><h2>Overtime</h2>
  		<ul><li><a href="#">Volunteer</a></li>
  			<ul><!--#include file="../_fpclass/fpdblib.inc"-->
<%
fp_sQry="SELECT * FROM tblSeniorityGroup"
fp_sDefault=""
fp_sNoRecords="No records returned."
fp_sDataConn="proficiency"
fp_iMaxRecords=256
fp_iCommandType=1
fp_iPageSize=0
fp_fTableFormat=False
fp_fMenuFormat=False
fp_sMenuChoice=""
fp_sMenuValue=""
fp_iDisplayCols=2
fp_fCustomQuery=False
BOTID=0
fp_iRegion=BOTID
%>
<!--#include file="../_fpclass/fpdbrgn1.inc"-->

 <li><a href="volunteer.asp?SeniorityGroupID=<%=FP_FieldVal(fp_rs,"SeniorityGroupID")%>"><%=FP_FieldVal(fp_rs,"strSeniorityGroup")%></a></li>
  			
  			<!--#include file="../_fpclass/fpdbrgn2.inc"-->
  			</ul>
  			
   			<li><a href="#">Get A List</a></li>
   			<ul><!--#include file="../_fpclass/fpdblib.inc"-->
<%
fp_sQry="SELECT * FROM tblSeniorityGroup"
fp_sDefault=""
fp_sNoRecords="No records returned."
fp_sDataConn="proficiency"
fp_iMaxRecords=256
fp_iCommandType=1
fp_iPageSize=0
fp_fTableFormat=False
fp_fMenuFormat=False
fp_sMenuChoice=""
fp_sMenuValue=""
fp_iDisplayCols=2
fp_fCustomQuery=False
BOTID=0
fp_iRegion=BOTID
%>
<!--#include file="../_fpclass/fpdbrgn1.inc"-->

  <li><a href="otsearch.asp?SeniorityGroupID=<%=FP_FieldVal(fp_rs,"SeniorityGroupID")%>"><%=FP_FieldVal(fp_rs,"strSeniorityGroup")%></a></li>
  			
  			<!--#include file="../_fpclass/fpdbrgn2.inc"-->
  			</ul>

  		</ul>
  </li>
</ul>
<ul>
  <li><h2>Proficiency</h2>
  		<ul><li><a href="#">Proficiency Lists</a></li>
  			<ul><!--#include file="../_fpclass/fpdblib.inc"-->
<%
fp_sQry="SELECT * FROM tblSeniorityGroup"
fp_sDefault=""
fp_sNoRecords="No records returned."
fp_sDataConn="proficiency"
fp_iMaxRecords=256
fp_iCommandType=1
fp_iPageSize=0
fp_fTableFormat=False
fp_fMenuFormat=False
fp_sMenuChoice=""
fp_sMenuValue=""
fp_iDisplayCols=2
fp_fCustomQuery=False
BOTID=0
fp_iRegion=BOTID
%>
<!--#include file="../_fpclass/fpdbrgn1.inc"-->

 <li><a href="proficiency_form.asp?SeniorityGroupID=<%=FP_FieldVal(fp_rs,"SeniorityGroupID")%>"><%=FP_FieldVal(fp_rs,"strSeniorityGroup")%></a></li>
  			
  			<!--#include file="../_fpclass/fpdbrgn2.inc"-->
  			</ul>  			 			
  		</ul>
  </li>
</ul>


</body>

</html>



Tailslide -> RE: Z-Index Question (7/7/2005 16:41:45)

Hmmm - I think bobby's right, drop-down boxes have an infinite z-index in IE so they'll always show through. I think there are ways round it but it would involve lots of JS coding which might make your life hard in the long run.

Could you go for the "moving it down the page" option?




fredecd -> RE: Z-Index Question (7/7/2005 16:54:08)

Working on that right now as Pan B.

[:D]

Thanks for the help.

Very sorry to hear about the London incidents. There is so little that we can say to help that it feels awkward to say anything at all.

Hope this message finds everyone safe and healthy, even if a little shaken up by the brutality of it all.

Take care.



Tailslide -> RE: Z-Index Question (7/8/2005 5:19:34)

Thanks Chris

Speaking as an ex-Londoner, we apreciate the thought.



c1sissy -> RE: Z-Index Question (7/8/2005 8:12:25)

Actually I have not used these techniques as of yet. STill working on getting the relative and ap correct.

One thing I would suggest before anything is to validate your pages. It could be that there is something within the page that needs to validate.

Also, if you try to pm pageoneresults, I'm sure that he would wiz by, even Suzy, one of the might pass through and give you an idea of what is not working with this. There is also another method created by BigJohn from pie's site. I did post it in here somewhere, just do a search for it. Or go to Johns site.

Another thing that you could try is a google with a few words from the problem that you are having with it. You might find that someone else had the same problem and posted it in another forum.

Also a good thing to do, is if you figure out an answer, post it in here so that future searchers on the same thing can find the answer! Good luck, I wish I could be of more help, but I am really studying things right now to get things perfect with css [;)]



fredecd -> RE: Z-Index Question (7/13/2005 12:03:08)

Update:

Found a site that uses <iframe> to position an inline transparent frame over the select boxes so that they don't bleed through.

DotNet Junkies

The only problem is that I cannot get the transparency to work for me in the <iframe>. It either blocks out the select boxes completely, or it lets them bleed through, depending on the opacity settings. The site claims that I can use the "Display:none;" style, but it does not block the select boxes when I use that setting.

I will continue to work on this in my spare time, but am giving up on aggressively seeking a solution.

Also found a working Javascript menu on Milonic.com, but was looking to get away from a Javascript menu.

Later,



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125