Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Why did this adjustment work?

Posted on 2012-04-12
5
Medium Priority
?
174 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 1000 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 1000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

688 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