Transparency problem on drop down navigation

[agapanthus]

I've got a very odd problem where the drop down navigation, which involves sub-sub-pages, has text from the page behind showing through. It's very hard to describe, but if you have a look at http://thebaseyouthcentre.co.uk/index.php/about/year-5/ and hold the cursor over "About the Base" in Firefox (it's fine in IE8) then you'll see it in action.

It's doubtless fixable in the style sheets, but I've got lost amongst the nested divs and can't figure it out. Help, please!

Thanks, Sayontan. There are many superb things about Suffusion, but the best of all is your support.

[sayontan]

Hi,
I am seeing it fine in FF. If I might add, I see all the levels perfectly - Year 5 etc. and the corresponding Activities levels as well.

(Moreover I would be surprised if FF had a problem - I do my development on it!! )

[agapanthus]

I'm using Windows 7 and have found a few browser funnies with that previously. I've attached a screenshot of what I see with Firefox 3.0.15.

screenshot.jpg (25.8 KiB) Viewed 1317 times

.

[sayontan]

Hi,
I have been looking into this. Since I use FF 3.5.* I hadn't caught this, moreover the navigation was originally written on 3.0.*, so that makes me wonder when it broke.

I am currently torn between two options - providing a separate JQuery-based navigation for everything, or fixing this on an older browser.

Sayontan.

[agapanthus]

Thanks, Sayontan.

Windows 7 does seem to do some very funny things to browsers that were perfectly fine on older OSs. I hope you can find a cure, because I'm baffled!

Jane

[spiff]

I have a similar problem. I have drop down navigation tabs so numerous that there is a wrap around. When I select one of the tabs in back (upper) row and that tab expands it does so behind the lower tab obscuring part of the expanded tab.
Screenshots:
http://the-pursuit.info/drop-down/seen.jpg

http://the-pursuit.info/drop-down/Hidden.jpg

[sayontan]

Spiff,
Here is the good news: your problem is actually very different and, fortunately, much easier to fix. The bad news is that I tried out various permutations of the solution, but I couldn't fix this for versions of IE equal or below 7 (unfortunately that is most of the market).

For all other browsers (FF, Opera, Chrome, Safari, IE8), go to style.css and search for the line that says:

Code: Select all

#nav ul li {


In there you will see "z-index: 110;". Either comment out that line or delete it altogether.

This fix has an unfortunate side-effect: it makes the rendering even worse on IE and the elements tend to go behind things like the featured posts section. I have managed to fix this, so the only thing the drop-down menu goes behind is the second line of the navigation bar in IE. I am working on a fix for this. In the meanwhile I am making a release with the other fixes.

Sayontan.

[spiff]

Sorry sayontan,
That did not fix the problem, Please double check my change.

http://the-pursuit.info/drop-down/not-fixed.jpg

[sayontan]

I guess there were a few other things, too. Please wait for the next version (2.6.4) to be approved. I submitted it last night with the fix, but WP hasn't approved it yet.

[sayontan]

Jane (Agapanthus),
I managed to find a fix for the older versions of Firefox!!! I will post an update soon (version 2.6.5)

Sayontan.