Background slider not showing up under transparent menu bar at top IE 10

I've got this web page looking how I'd like it to look in Firefox, with the slider transition showing up underneath the transparent header.

When I'm in IE 10 the slider won't show up underneath the transparent bar at the top unless I have the following to display none.  Is there a problem with z-index on an element or something I'm overlooking?

.ie10  div.socialmedia, .ie10 div.searchbox, .ie10 #menu  {display:none;}

Open in new window

Any help appreciated, thanks!
Who is Participating?
COBOLdinosaurConnect With a Mentor Commented:
It looks like you have transparency and opacity clashing.  IE has been screwed up on both ever since it invented filters.  When you stack up multiple layers in IE with opacity or transparency in one or more of the layers, it is a crap shoot how it will appear.  I thought they had it resolved in IE10 but it looks like it still has problems working through the layers unless I am missing something because the code should produce exactly the same result cross-browser.  

It is the first time I've seen it so I don't have a workaround other than the really ugly hack of detecting the browser and and forcing the background directly on the menu layer.

hthrpAuthor Commented:
Bit confusing and debugging in IE is like pulling teeth
Why are you assigning a background image to the #inner-wrap element?
Judging from FF it should just be semi opaque black but you have this applied to the nested #header element.
So in IE I think the image is taking precedence.
hthrpAuthor Commented:
Thanks.  I tried to remove the layer stacking by putting items under one element and it seems to have corrected the issue.
Okay that makes sense, as long as you can do it without messing up the layout.  Great!

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.