Skip to main content
G
Gary Carruthers
Participant
January 15, 2008
Question

spry dropdown z-index problems in IE

  • January 15, 2008
  • 1 reply
  • 2238 views
Hello

I'm having some trouble with the spry horizontal dropdown in IE, and it's interaction with SmoothGallery. In every browser (with the exception on IE 6&7 of course) the higher z-index values of the menu cause it to overlay the JS image gallery below it. In IE however it does not.

http://www.digitalrift.co.uk/projects/woods/

Works fine on every browser tested so I can't see how it'd be a fault with the z-index values used. Anyone have a suggestion as to a workaround for good ol' IE?

Thanks
This topic has been closed for replies.

1 reply

L
leereilly
Participant
January 17, 2008
Hello all

We have changed the url of the above to: http://underwaterpistol.com/woodassociates/

Same problem persists tho, namely that the z-indexes seem to be ignored by IE (the gallery overlays the nav). We've tried most everything for a workaround but no joy. Any help would be much appreciated.

Thanks
M
MyEyesHurt
Participant
August 26, 2009

I'm having the same problem and can't figure out why.  I've put the z-index of an absolutely positioned image to 1 and the dropdown menu's z-index to 1,030 and yet the image still appears on top of the menu when it drops down.  Only happens in IE, works great in Chrome, and Firefox. 

Any help would be much appreciated!

M
MyEyesHurt
Participant
August 26, 2009

All right, well I just figured out my problem, and hopefully this will help anybody else. 

I was positioning my images using <position: absolute;>  While this is definitely the easiest way to specifically place something on a page, Internet Explorer, it seems, assigns that z-value as the highest on the page, which is why my dropdown menus wouldn't appear on top of the image, but behind it. 

The solution I found was changing the position attribute to "static" rather than "absolute".  The "static" attribute can't use position qualities like "top", "bottom", "left", and "right", but has to use margins and float to be specifically place. 

While this isn't as easy as absolute positioning, using the static value will allow the Spry dropdown menu to appear over top of the images instead of behind them.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices