Why did this adjustment work?

I had a dilemma with a pull down menu that I built. The ul wasn't displaying properly. It looked as though it was being covered up by another element. I played with the z-index settings, but to no avail.

Then I changed the "left" setting from 0 to -5. Suddenly, the portion of the pulldown was visible and everything was wonderful.

What was it about the left margin setting that made the difference. Here's the css data for the ul that wasn't displaying properly:

      #nav ul {
      display: none;
      margin: 0;
      padding: 0;
      width: 200px;
      height: 100px;
      position: absolute;
      top: 45px;
      left: -5;
      background: #ffffff;
      z-index:10;
      border-style:solid;
      border-width: thin;
      border-color:#cccccc;
      }
brucegustPHP DeveloperAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
macarrillo1Connect With a Mentor Commented:
Have you tried:

 z-index: 10;
( z-index:SPACE10;)

instead of:

 z-index:10;

I have seen issues with the parameters I entered not reflecting because of spacing between the colon and the value.
0
 
Paul MacDonaldDirector, Information SystemsCommented:
It's hard to say without knowing what the initial problem was.
0
 
brucegustPHP DeveloperAuthor Commented:
The initial problem was the fact that the top portion of the pulldown menu (ul) was covered up. When I moved the left margin, suddenly all was wonderful.
0
 
Paul MacDonaldConnect With a Mentor Director, Information SystemsCommented:
Sounds like moving the UL left caused it to push something up in the flow.  What element preceeds the UL in the HTML?  Maybe you can duplicate the fix by moving that up and leaving the UL at left:0.
0
 
brucegustPHP DeveloperAuthor Commented:
Actually, I think I've got it narrowed down, although I'm still not sure what I did that made it "click." Ironically, it's back to not looking right, but here's the good news.

When you look at the attached screen shot, you'll notice that the pulldown is not visible because the scrolling text is hiding it. When I removed the scrolling text, the menu was completely visible. So, it would appear that it's the z index of the scrolling text.

Problem is, I went and added a lower z index value to the cell that contains the text and no good. What do I need to to do to keep the scrolling text behind the menu?

Here's my stylesheet:

body {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #ffffff;
      text-align: left;
      vertical-align: top;
      padding: 0px;
      width: 100%;
      margin: 0;
}

td {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
vertical-align:top;
text-align:left;
}

td.nav_bar {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
vertical-align:middle;
text-align:center;
}

td.login {
background-image: url(images/home_page_03.gif) ;
background-repeat: no-repeat;
vertical-align:middle;
}

td.title {
background-image: url(images/title_background.jpg) ;
background-repeat: no-repeat;
vertical-align:middle;
}

td.marquee_block {
background-image: url(images/home_page_16.gif) ;
background-repeat: no-repeat;
position: relative;
z-index: 5px;
}

td.marquee {
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
text-align: left;
width:875;
font-style: bold;
}

td.nav_bar_background {
background-image: url(images/home_page_14.gif) ;
background-repeat: no-repeat;
}

td.church_name {
font-family: Verdana, Microsoft Sans Serif;
font-size: 28px;
color: #000000;
}

td.left_column {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
vertical-align:top;
}

.church_city {
font-family: Verdana, Microsoft Sans Serif;
font-size: 16px;
color: #000000;
font-weight:bold;
}

td.top_header {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      text-align:center;
      }
      
td.commercial {
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
}

td.text_body {
background-image: url(images/home_page_24.gif) ;
}

td.left_body {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
width:900px;
height:281px;
background-image: url(images/muscular_watermark.jpg) ;
background-repeat:no-repeat;
}

td.left_mid_body {
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
width:900px;
}

td.body_center {
text-align:center;
}

td.mid_body {
background-color:black;
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #ffffff;
width:900px;
height:30px;
vertical-align:middle;
}

td.top_featured {
background-image: url(images/home_page_20.gif) ;
background-repeat: no-repeat;
width:904px;
height:38px;
}
      
td.Footer {
font-family: Verdana, Microsoft Sans Serif;
font-size: 10px;
color: #000000;
text-align:center;
}

      td.credibility_footer {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #000000;
      }


INPUT.credibility
{
border:none;
}      

input.login_box
{
font-family: Verdana, Microsoft Sans Serif;
font-size: 14px;
color: #000000;
}

li {margin-left:15px;}

      
TEXTAREA {
      width:500px;
      height:250px;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      float:left:
      }
      
TEXTAREA.verbiage {
      width:500px;
      height:100px;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      float:left:
      }
      
      TEXTAREA.notes {
      width:509px;
      height:100px;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      float:left:
      }
      
      TEXTAREA.admin {
      width:450px;
      height:200px;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      float:left:
      }
      
      TEXTAREA.credibility {
      width:935px;
      height:200px;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      float:left;
      border:none;
      }
      
select {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      }

      input {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
}


A
{
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      color: #000000;
      text-decoration:underline;
}

A:Hover {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      color: #000000;
      text-decoration:underline;
}

A:Visited {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      color: #000000;
      text-decoration:underline;
}

A.Footer {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #000000;

}

 A.Footer:visited {
         font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #000000;
 }
 
 A.Footer:hover {
          font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      text-decoration:underline;
      color: #000000;
 }
 
 A.nav_bar {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      color: #000000;
      font-weight:bold;
      text-decoration:none;

}

 A.nav_bar:visited {
         font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      color: #000000;
      text-decoration:none;
 }
 
 A.nav_bar:hover {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      text-decoration:none;
      font-weight:bold;
      color: #ffffff;
 }


A.login {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #ffffff;
      text-decoration:none;
}


 A.login:visited {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #ffffff;
      text-decoration:none;

}

A.login:hover {
          font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      text-decoration:underline;
      color: #ffffff;
 }

A.student_links {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #ffffff;
      text-decoration:none;
}

 A.student_links:visited {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #FBFBFB;
      text-decoration:none;
}

A.student_links:hover {
          font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      text-decoration:none;
      color: #8BD0F7
 }
 
 A.verbiage {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #000000;
      text-decoration:underline;
}

 A.verbiage:visited {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #000000;
      text-decoration:underline;
}

A.verbiage:hover {
    font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      text-decoration:underline;
      color: #000000;
 }
 
  A.menu {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #ffffff;
      text-decoration:none;
}

 A.menu:visited {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      color: #ffffff;
      text-decoration:none;
}

A.menu:hover {
    font-family: Verdana, Microsoft Sans Serif;
      font-size: 10px;
      text-decoration:none;
      color: #ffffff;
 }
 
 A.password {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      text-decoration:none;
}

 A.password:hover {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      text-decoration:none;
}

 A.password:visited {
        font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      text-decoration:none;
}

A.marquee
{
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      font-style:bold;
      color: #000000;
      text-decoration:underline;
}

A.marquee:Hover {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      font-style:bold;
      text-decoration:underline;
}

A.marquee:Visited {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 11px;
      color: #000000;
      font-style:bold;
      text-decoration:underline;
}

A.commercial
{
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
}

A.commercial:Hover {
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
text-decoration:underline;
}

A.commercial:Visited {
font-family: Verdana, Microsoft Sans Serif;
font-size: 11px;
color: #000000;
}



.tip {

    background-color:#ffffff;
      filter:alpha(opacity=95);
      /* CSS3 standard */
      /*opacity:0.6;*/
      border:1px solid black;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    
      z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#nav {
            margin: 0;
            padding: 0px 0px 0;
            width: 400px;
            height:40px;
            }
            
      #nav ul {
      display: none;
      margin: 0;
      padding: 0;
      width: 200px;
      height: 100px;
      position: absolute;
      top: 45px;
      left: 0;
      background: #ffffff;
      z-index: 10;
      border-style:solid;
      border-width: thin;
      border-color:#cccccc;
      }
      
      #nav li {
            height: 25px;
            margin: 0 5 0 10px;
            padding:  0 0px;
            display: block;
            float: left;
            position: relative;
            list-style: none;
      }

/* main level link */
      #nav a {
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      font-weight:bold;
      text-decoration:none;
      display: block;
      padding:  12px 0px;
      margin: 0;
      height: 20px;
      }
      
      #nav a:hover {
            color: #041ccd;
      }
      
      #nav ul a.menu {
      color: #000000;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      font-weight:bold;
      text-decoration:none;
      display: block;
      padding:  5px 5px 10px 5px;
      margin: 0;
      height: 10px;
      
      }
      
      #nav ul a.menu:hover {
      color: #000000;
      font-family: Verdana, Microsoft Sans Serif;
      font-size: 14px;
      font-weight:bold;
      text-decoration:none;
      display: block;
      padding:  5px 5px 10px 5px;
      margin: 0;
      height: 10px;
      }

      /* main level link hover */
      #nav.current a, #nav li:hover > a {
            color: #041ccd;
      }


      /* sub levels link hover */
      #nav ul li:hover a,
      #nav li:hover li a {
            background: none;
            border: none;
            color: #000000;
      }
      #nav ul a:hover {
            color: #041ccd !important;
            height:20px;
      }
      
            /* dropdown */
      #nav li:hover > ul {
            display: block;
      }
      
      /* level 2 list */

      
            #nav ul li {
            float: none;
            margin: 0;
            padding: 0;
      }

      #nav ul a {
            font-weight: normal;
            text-shadow: 0 1px 0 #fff;
      }
      
      

      /* level 3+ list */
      #nav ul ul {
            left: 200px;
            top: 0px;
      }

      /* clearfix */
      #nav:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
      }
      #nav {
            display: block;
      }
Screen-shot-2012-04-12-at-8.34.2.png
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.