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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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.
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.


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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!

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.