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

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

fortran - Function return type mismatch -

queue - mq_receive: message too long -