Solved

Why did this adjustment work?

Posted on 2012-04-12
5
169 Views
Last Modified: 2012-06-27
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
Comment
Question by:brucegust
  • 2
  • 2
5 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 37839685
It's hard to say without knowing what the initial problem was.
0
 

Author Comment

by:brucegust
ID: 37839705
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
 
LVL 34

Assisted Solution

by:Paul MacDonald
Paul MacDonald earned 250 total points
ID: 37839806
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
 
LVL 9

Accepted Solution

by:
macarrillo1 earned 250 total points
ID: 37840123
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
 

Author Comment

by:brucegust
ID: 37840724
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Help in good tutorials for PHP, HTML and CSS 6 53
email validation 9 49
CSS Flex space-between 2 22
CSS question 4 25
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question