View Full Version : CSS navigation 'hides' secondary navigation underneath it - help please

10-13-2009, 09:44 AM

I'm really not much a coder, but after a steep learning curve the last 2-3 weeks, I managed to get my website layout look like I want.

Only problem: The CSS menu navigation accidentally 'deactivates' the navigation in the .swf underneath it. See here: http://www.bjornholland.com/
(Clicking on the left/right hand side of the slideshow should take you to the previous/next image, but nothing happens).

In the html code, the .swf is positioned first. Then the main navigation is contained inside a <div> with absolute positioning, hovering above the .swf

I don't know much about Flash, so I'd really like to keep this CSS-based navigation.
Can anyone think about a workaround for this problem?

Thanks a lot!

10-13-2009, 03:32 PM
The CSS menu navigation accidentally 'deactivates' the navigation in the .swf underneath it.
Hi Bjorn (cool name), can you rephrase that sentence? Hopefully it will make more sense. Do you have a mockup of how it is supposed to look?

10-13-2009, 03:54 PM
Hi Domedia,

I've uploaded 3 different versions to illustrate the problem a bit better:

1) http://www.bjornholland.com/index_nonav.html
2) http://www.bjornholland.com/index.html
3) http://www.bjornholland.com/index_thumbs.html

Example 2 has the exact same code / .swf file as Example 1, but with an added <div> container for the navigation-menu. (btw: the links in that CSS navbar are not implemented yet).

In Example 1, you'll notice that you can move back/forth in the gallery, by clicking on the left/right of the image. (Hotspot areas in the .swf)

In Example 2 (the one with the CSS navigation-menu), this doesn't work.
The weird thing: The .swf DOES react to the mouse-over (i.e. show the image caption). But NOT on mouse-clicks.

Same in Example 3: The Thumbnail area on the bottom reacts to mouse-over, but not to clicks...

(So far I only tested in Firefox 3)

10-13-2009, 04:02 PM
If you have an issue related to a browser it is important to specify it right away.
Despite that, all three pages works in my FF3, so I cannot see what the issue is.

All those pages have some issues, put them through a validator. Possibly fixing those issues should make the rendering more consistent.-

10-13-2009, 04:11 PM

It certainly doesn't work for me in FF3.
Note: "Autoplay" was enabled for the Gallery, so maybe it looked like it was working.
I've changed that to "manual" now.

Could you try this one again? http://www.bjornholland.com/index.html (http://www.bjornholland.com/index.html)
Can you change images? I can't....


10-13-2009, 05:10 PM
Working fine for me in FF3.5

10-14-2009, 09:33 AM
I fixed the problem. (Checked in other forums/communities, some people had the same problem as me – others didn't).

The files earlier in this thread have been replaced, so please don't try the links.

For reference / in case others have a similar problem:
The problem was that I had a very high <div> tag with my CSS navigation with drop-down menues sitting above the swf div.
I now realized that this navigation div didn't need to be that high: the drop-down menues still work if the size is undefined, so I just left away width/height in the CSS.

Gave me a headache for over 2 days... I'm glad when this site is finished, as I'm really not much of a coder.

10-14-2009, 03:33 PM
For the future always check the page for structural issues. Any validator should pick those up right away. There is no reason for a page do display differently on the same browser on different system if it's a matter of a DIV height.

When that's all said I'm happy you got your mystery problem solved!