Problem with Z-index & unclickable links

  • Hi all,

    Ok the story is…….
    In IE 7 the custom wordpress menu’s on my site were hiding behind the page wrapper (#wrap)

    The only way I managed to fix this was to give #wrap a negative z-index value
    and give the menus (#access) a positive Z-index value

    The problem is that when you do this the other links contained within wrap become unclickable

    I’ve tried putting a div around the links and setting that to a higher z-index however it has no effect.

    Does anyone know how I can have the menu’s appear in front of the wrapper whilst still allowing all links on the page to remain clickable. Im completely stuck!

    My site is https://www.geekymedics.com

    Let me know if you want to to include some code, the last time I tried it got blocked by wordpress forum admin for some reason.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter ilew

    (@ilew)

    Anyone have any ideas? Still can’t figure this out…..

    Try giving #access a a really high z-index. Basically, make sure your a elements have higher z-indexes than its containers.

    This is a really bad IE7 bug that always gets me.

    When giving something a z-index value, newbies forget that you have to “position” whatever item has a z-index.

    Various items, like #wrap, are not positioned, for instance. But Chexee is on the right track, you could try this. I’ve added positioning AND z-index:

    #access li:hover > a, #access ul ul *:hover > a {
  background: none repeat scroll 0 0 #333333;
  color: #FFFFFF;
  text-shadow: 1px 1px 0 #000000;
  position: relative;
  z-index: 7;
}

    That may fix your inner pages right away. Test those first after making the above change. Hard to tell for sure without ripping the CSS apart and testing in IE… my Firefox is already working.

    If that still doesn’t work in IE on the homepage, you could try adding this to the gallery. I added positioning, z-index is already there. 

    #myGallery, #myGallerySet, #flickrGallery {
  height: 278px;
  width: 590px;
  position: relative;
  z-index: 5;
}

    Essentially, whoever worked on this CSS was not really solid, someone with more graphics skill than CSS skill (a very common problem). More changes than the above may be needed, in that case geek possibly required to analyze further. That should get you started, though.

    I would skip doing any z-index on #wrap, as you’ve seen the results of that.

    Good luck, D

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with Z-index & unclickable links’ is closed to new replies.