5 replies [Last post]
miketmartin
miketmartin's picture
Offline
newbie
pittsburgh, PA
Last seen: 3 years 16 weeks ago
pittsburgh, PA
Timezone: GMT-4
Joined: 2010-10-19
Posts: 7
Points: 9

From what I have read , I'm guessing this is a z-index issue. The theme that I am using has explicitly set the z-index for the dropdowns .nav li ul to 10000.

                        .nav li ul { background: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; left:5px !important; top:34px !important; padding: 14px 10px 14px 20px; width: 172px !important; box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow:3px 6px 8px 1px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.2); z-index: 10000; display: none; }

But the drop down items still seem to show up behind other divs when viewed in IE7.

I've tried to set the z-index of the content-left div:

                        #content-left { float: left; width: 665px; margin-right:1px; background: url(images/content-top-left.jpg) right 2px no-repeat; z-index: 4;}

with no luck. This seems to be what it is showing behind, as well as maybe the sidebar.

Thanks in advance for any help.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 49 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to set the z-index

You need to set the z-index of the dropdown's parent (can't tell you exactly which one because you haven't shown any HTML) to be higher than the content that is overlapping it.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

miketmartin
miketmartin's picture
Offline
newbie
pittsburgh, PA
Last seen: 3 years 16 weeks ago
pittsburgh, PA
Timezone: GMT-4
Joined: 2010-10-19
Posts: 7
Points: 9

link

sorry. here is the link of a page i see the issue on:

http://lakes.michaeltoddmartin.com/contact-us/

thank you.

miketmartin
miketmartin's picture
Offline
newbie
pittsburgh, PA
Last seen: 3 years 16 weeks ago
pittsburgh, PA
Timezone: GMT-4
Joined: 2010-10-19
Posts: 7
Points: 9

Here is the HTML for the menu

Here is the HTML for the menu code:

<div id="topmenu">
   <ul class="superfish nav">                         
      <li class="page_item page-item-90">Online Coupons</li>
      <li class="page_item page-item-26">Services
         <ul class='children'>
            <li class="page_item page-item-9">New Construction</li>
       <!-- removed for readability -->
         </ul>
      </li>
      <li class="page_item page-item-65">Products</li>
      <li class="page_item page-item-24 current_page_item">Contact Us</li>
   </ul> <!-- end ul#nav -->
 
   <!-- Start Searchbox -->
 
   <!-- End Searchbox -->                                                    
</div> <!-- end #topmenu -->

miketmartin
miketmartin's picture
Offline
newbie
pittsburgh, PA
Last seen: 3 years 16 weeks ago
pittsburgh, PA
Timezone: GMT-4
Joined: 2010-10-19
Posts: 7
Points: 9

well i think i finally got it

well i think i finally got it after reading another page which i dont seem to be able to link to...

I had to z-index the parent div (the parent div being #header-wrapper) and also set position:relative.

I then set a lower z-index on divs that fall below the drop down, those being #content, #content-wrap, #content-left, and #sidebar, along with setting position relative. I dont know if it was overkill, but it fixed my issue.

miketmartin
miketmartin's picture
Offline
newbie
pittsburgh, PA
Last seen: 3 years 16 weeks ago
pittsburgh, PA
Timezone: GMT-4
Joined: 2010-10-19
Posts: 7
Points: 9

nevermind. that broke other

nevermind. that broke other stuff...