Topic: Navigation Underneath SV Gallery

I've read several topics from people who have had the same problem, but none of the solutions seem to work for me.

My problem is that I've embedded the code for the SV gallery in my own page, and then the navigation becomes disabled or covered.  When I remove the gallery, the navigation works fine.  When I change the z-index on the gallery, the navigation works fine, but the quality of the navigation text looks cruddy.  I have also set the gallery background to transparent.

Here's my html code.

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "transparent", true);
});


</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

I also have this embedded in a container, so that I can control it with CSS.  So, my question is either 1. How do I improve the quality of the text of my navigation after changing the z-index  or 2. How do I make it work without using z-index?

Re: Navigation Underneath SV Gallery

Please post the URL to your gallery so that we can take a look.

Steven Speirs
SimpleViewer Support Team.

Re: Navigation Underneath SV Gallery

This is the one using just transparent and not changing the z-index.

http://www.jeffmackeyphotography.com/test/

Re: Navigation Underneath SV Gallery

Setting:

<ul id="menu" style="z-index: 99;">

... in your page positions the menu on top of the gallery and I see no difference in the quality of the menu text (in Firefox 5.0, Safari 5.0.5 and Chrome 12) in doing so.
However, in IE9, the menu options are visible but inaccessible (as the options disappear as soon as you try to hover over them). I have yet to discover the cause of this problem.
What browser are you viewing your page in and are you able to provide screenshots to demonstrate the loss of quality in the menu text which you are seeing?

Steven Speirs
SimpleViewer Support Team.

Re: Navigation Underneath SV Gallery

In the previous link, I saw no quality difference.  In Safari, I can see the menu, but cannot access it.  I believe I also tested it in Firefox, and had the same problem.

In this version, I used the z-index.

http://www.jeffmackeyphotography.com/test2/

Strangely, I'm not seeing the quality difference on my Mac Pro Safari 5.0.5 at work (which is good), but at home on my iMac Safari 5.0.5 I definitely did.  So, I'll have to check again when I get home.  If the loss of quality is there when I get home, I will post screen shots.

Re: Navigation Underneath SV Gallery

Here is an example in the lost quality in the logos with the z-index.  The top one is blurry using the z-index.  The bottom one is correct, but not functional using the first test.

http://www.jeffmackeyphotography.com/logos.jpg

Re: Navigation Underneath SV Gallery

It may not be the reason for the blurred image but the <img> tag that displays the logo is currently:

<img src="img/logo.png" / id="logo" width=150px;>

... but should be:

<img src="img/logo.png" id="logo" width="150" alt="logo" />

You could also specify a height and resize your logo so that it is not being resized by the browser but displayed at its actual size.

I've taken a look at your z-index test gallery and, as I discovered earlier, it works in all browsers except IE9.
I'm still trying to find a solution for your page which works in all browsers.

Steven Speirs
SimpleViewer Support Team.

Re: Navigation Underneath SV Gallery

Thanks!  When I resized my logo in Photoshop to the actual size, it seemed to completely eliminate the blurring.

Here is the picture of my lower quality navigation text. The top one is what it should look like.  The bottom is what it looks like with the z-index set to be above the SV gallery.  I am still using Safari.

http://www.jeffmackeyphotography.com/navscreenshot.jpg

Re: Navigation Underneath SV Gallery

If you make your gallery's background transparent (as you have done) and take your 'sv-container' <div> outside of the 'engagementcontainer' <div>, then your CSS drop-down menu system works fine in Firefox, Safari and Chrome (but not IE9) without having to use z-index.
I am fairly sure that this would be the case with any Flash presentation on your page, not just SimpleViewer.
I have tried many combinations of giving different <div>s different z-index values and have also tried setting the Flash wmode parameter to 'opaque' rather than 'transparent' but I cannot find a solution to your problem.
Does the CSS drop-down menu system that you use have a forum in which you could post for suggestions? The author of the menu might have come across this scenario before and have a solution.
Otherwise, perhaps a different menu system would not exhibit this behavior in IE9.

Steven Speirs
SimpleViewer Support Team.

Re: Navigation Underneath SV Gallery

Thanks.  I'll try all of that.  I just looked up the tutorial that I used, and it appears that others are having z-index issues as well.  So, I'll dig into all of their comments.  Thanks for being so helpful!