Can't understand my navigation

HTML & CSS
1

I’ve built a vertical navigation with some links that extend out to some sub-links. The problem is, in the home page there is a slideshow on the top section of the page. And in that section the sub-links open underneath the slideshow. I tried to use z-index to bring it up but it doesn’t seem to work. Can someone please go to the following site to see my problem? I have been working on this one problem for hours but I’m not getting anywhere.

http://www.homehemodialysis.org/clients/testing/Applewood_v3/index_01.html

Thank you in advance for your assistance.

EDIT: I forgot to mention that it works fine in Firefox 3.6 but IE 8 is where the problem is.

2

Where were you using z-index?

<br> tags aren’t legal as direct children of a ul. You will need to take those out. You can use a bottom-margin on the li’s if you need space between them.

I would put the z-index on the sidebar itself or the suckermenu directly. Z-index can only be set on positioned elements, so whoever you choose needs at least “position: relative” (which I think the suckerfish does to the main ul of the menu anyway).

3

Took a cursive look at the site. doesnt work in FF either, WHEN the image changes. this leads me to believe, that the slide show is on the same “relative” layer as the navigation.

I would have THOUGHT your slide show must be working by taking a list of images, and cycling their Z-index… but it also look like its flash based???

anyway, First thing I would try is giving #suckertree{ position:relative; z-index:9999;} if that itself interferes with the display of the submenus that wrapping a div around #suckertree and use that to place the #suckertree navigation, go back and give the wrapper a { position:relative; z-index:9999;}

It’s kinda a heavy handed approach, but unless you can look into how the slide show is positioning images it may be the easiest way to fix this.

4

But the z-index didn’t work when I put it directly on the sidebar div tag. I also put it on every css part that had the word “sucker” on it. Still the navigation hides under the slideshow. I’m still confuesed. I appreciate your help.

EDIT: @dresden_phoenix: The slideshow is flash based and is just a bunch of images positioned at every 25 frames with a bunch of frames with the same image on all the frames before it. I’m not at all experienced with flash so I just did the best I could for now. This site isn’t active yet so I have time to figure out a more elegant solution.

5

I tried your solution and put your suggested code in the suckertree tag. I still get the same problem. As far as you saying it doesn’t work in FF, it works in FF 3.6.12 for me. I can’t find any problems in that browser. I really have put the z-index in every spot I can find and I still have that problem. My next move is to remove the slideshow altogether or just move it down to the bottom of the page.

EDIT: @dresden_phoenix: As far as your wrapper suggestion, the ony thing I could get to work is putting a separate div tag right next to the first ul tag but then that makes the pop out links disappear altogether. The outline doesn’t even show up.

6

try rather adding a minus z-index on your slideshow. probably not the best solution but definitely a quick fix. also, just remember that you need to have position in your css in order to use z-index

7

I added the negative z-index to the slideshow but that didn’t work either. I guess I’ll just re-position it out of the way of the links. I have to get this working today or move on. Thank you for your help.

8

Try moving your slideshow out of the <p> element.

One way to test it for IE8: remove the flash from the <p> and put some background colour on <p>. See if your menu is still showing underneath the <p>.

9

But the z-index didn’t work when I put it directly on the sidebar div tag.

Of course not. It’s not a positioned element. Only positioned elements can let you set a z-index on them.

10

One thing your JS function buildsubmenus() does wrong: it handles CSS: style.display, style.visibility, in a dynamic way, making debugging pointless.

All CSS should be kept outside JS code. JS code should only add or remove classes or ids. My advice: try another drill down menu, this one is clearly BAD.

11

When I put the background color on the <p> tag the menu worked fine. So I would think it has to be a slideshow issue but I’m clearly not experienced enough to say one way or the other.

@Stomme poes: When I tried the z-index on the <p> tag I did also put position:relative with it. I’m not sure if that is what you mean or not though.

@noonnope: I (obviously) grabbed this code from a site (not sure if I can mention the name of it so I won’t) that provides code so I’m not familiar with how it was written. I don’t generally write javascript code, I just know a few basic things about it. Is it just bad form to keep the CSS out of the javascript or is it an actual rule of the coding? I am going to think about changing it out for another code. Maybe even attempt to write my own.

Thank you all.