pgslideshow obscures content when scrolling

[MikeBrice]

I have implemented a slide show within an article with the following code fragment:

<div style="width: 650px; text-align: center;">

<div style="margin: 5px 5px 5px 50px; width: 650px;">

{pgslideshow id=40|width=600|height=450|delay=3000|image=L}

</div>

</div>

I am happy with the end result however there is an issue when I scroll down the article content. The image of he slide show covers header content in the space above the article 'container'. Please use the following to see the effect I have an issue with:

http://test.bourbonne.com/sortir/parc-la-bannie

I am using Joomla V2.5

[Jan]

Hi, it seems like some conflict with z-index rule, I think the z-index for the menu should be larger than the one for images So the CSS needs to be customized for the menu

Jan

[MikeBrice]

Many thanks, that is correct. Your suggestion has resolved my problem. You can mark this post as Resolved.

[MikeBrice]

An update. The JS file fadeslideshow.js sets the z-index values to 999, 1000, or 1001 depending on what image is to be visible. These "hardwired" values of course conflict with the other elements of the page and is responsible for the presentation issue I have. To 'solve' my problem I have to set the z-index value for my header elements to 1002 or higher. It would be nice if this behaviour/requirement were documented somewhere, or to have the ability to set a 'base' value in the pgslideshow command. eg. {pgslideshow id=40|width=600|height=450|delay=3000|image=L|zindex=123}

[Jan]

Hi, this is set by external javascript library which needs to use z-index rules to properly run the slideshow. In fact 1000 is small number. But it cannot be set in Phoca plugin options as it is a part of the javascript library which is not influenced by the plugin options.

Jan

[MikeBrice]

OK, thanks for the explanation. Still a trap for young players I would suggest.