Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #8109

    We recently completed building at site at:

    In Chrome, Safari, and Firefox it works perfectly.

    However, in various versions of IE, the green boarder at the bottom of the header section appears on top of the slider image.

    This happens when you scroll over different areas of the page, and when you move your mouse off of the page, and disappears again when the mouse moves into different areas.

    I have tried playing with the z-index settings of several components, but can’t seem to get a handle on the effect.

    Any help would be appreciated.

    Thank you, Shea


    Hello, it has been 2 days since I posted. Can anyone help?



    can you elaborate please. I tried to reproduce the flaw with IE7,IE8,IE9, IE9 compatib. view (IE dev tools) and IETester but I couldn’t. Maybe it’s a client side problem (browser plugins? blocked javascript, etc. ?)


    Hello Dude,

    The client reported the problem to me. When I checked with my test PC which is running IE 7, I immediately saw what she was talking about.

    I took a screen shot. See:

    The green line running through the photo of the man throwing papers is not supposed to be there.

    You don’t see the line when the page loads, but when you start to move the mouse around the page, it appears.

    Any help?



    I’m not sure since I can’t test for IE7 (older browser).

    In your custom.css you can add a z-index, like this:

    #top .slideshow_big{z-index:120 !important;}

    Let us know if it works :)


    I think it’s fixed!

    What was the order of components? Why 120 specifically?

    Thank you very much for your help.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Z-index issue with Slider Container and #Header’ is closed to new replies.