• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 177
  • Last Modified:

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;
      }
0
brucegust
Asked:
brucegust
  • 2
  • 2
2 Solutions
 
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 MacDonaldDirector, 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
 
macarrillo1Commented:
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
 
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now