HTML/CSS IE Not displaying my dropdown menu z-index related -
for reason cannot display dropdown menu on ie when add z-index in header of number. when remove it, works. dropdown appears behind container , content in firefox , chrome. either take out or leave in, cant seem satisfy browsers. tried making separate ie stylesheet without z-index doesnt work either. know separate ie css working because changed backgrounds uses dropdown menu in master stylesheet.
website www.stingrayimages.ca
thank
edit: lets got work on ie since ie gives problems. dropdown menu appears behind content on other browsers firefox , chrome. did remove z-index in #head div. anyway fix dropdown menu without adding z-index head div?
edit: got dropdown work on ie9 firefox , chrome. not ie 6, blew up.
#head { position:relative; height: 140px; width: 100%; background: #fff; filter:alpha(opacity=93); padding-top:20px; /* css3 standard */ opacity:0.93; -moz-box-shadow: 0 0 5px black; -webkit-box-shadow: 0 0 5px black; box-shadow: 0 0 5px black; z-index:1; }
ok had , there's news , bad ;)
the opacity filter in #head div means overflow: hidden being triggered, why no menus (it's unfortunate side effect of filters , overflow i'm afraid).. remove , can have z-index need anyway
next transparency (opacity) dropdowns can use rgba(255,255,255,0.9) on #nav ul li ul rule instead of #fff; (though leave #fff before rule fallback browsers can't rgba() yet.. read more!)
that's happy - can rgba() transparency ie using gradient filter..
so rule landed looked (in ie conditional comment):
#nav ul li ul { zoom: 1; background: transparent; -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr=#e5ffffff,endcolorstr=#e5ffffff)"; /* ie8 */ filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#e5ffffff,endcolorstr=#e5ffffff); /* ie6 & 7 */ /* behavior: url(pie.htc);*/ /* yuk filter */ } and thought go..
but bad news
the behavior commented out because can have 1 or other, transparency or rounded corners, :( apparently
i didn't research though ymmv
i noticed problem or 3 in ie7, not sure if want support in case do.. or want check final code got stage pasted in pastebin
that code replaces main css - #head rule , whole /*navigation*/ section
update: more news , little bad!
you can have transparency , rounded corners css3 pie's own -pie-background property, but not box shadow well, way pie deals box shadow means fills div instead of drawing on outside -pie-background reading of rgba background transparent shows grey color used shadow!
my solution:
i added border make loss of box-shadow, it's not looking bad, , it's working across ie's ;) here's update conditional comment above:
<!--[if lte ie 9]> <style type="text/css" media="screen"> #nav ul li ul { box-shadow: none; -pie-background: rgba(255,255,255,0.9); border: 3px double #eee; border-width: 0 3px 3px 3px; behavior: url(pie.htc); /* yuk filter */ } </style> <![endif]-->
Comments
Post a Comment