Jump to content
Sign in to follow this  
dagreat8

Drop Down Menu Disappearing behind call out in Internet Explorer 9

Recommended Posts

dagreat8

Hi all, my drop down menus are not visible in Internet Explorer 9. The site works fine in all other browsers except IE9. Any ideas?

Share this post


Link to post
Share on other sites
catrina

Try changing the z-index for the drop down menus by adding this to Custom CSS:

ul.sub-menu {z-index: 2;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
dagreat8

Hi Catrina, thank you for the suggestion. I tried it and nothing happenned. I also added !important to no avail. Any other ideas? Anyone? This is driving me mad...

Share this post


Link to post
Share on other sites
Danny

Hi, I'm on a Mac and Parallels is being a pain however can you try this for me and see if this resolves the issue.

ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {
	position: absolute;
	z-index: 150;
	}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dagreat8

Hi Danny, thank you for the response and I apologize for my late response. I tried your suggestion to no avail The problem persists. Any other suggestions would be greatly appreciated. If you need access to the site I can provide it to you. Thanks in advance!

Share this post


Link to post
Share on other sites
Danny

Hi, I just visited your website and viewed your code and you had this:

ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {
	margin-top: 22px;
	position: absolute;
	width: 12.3em;
	z-index: 1150!important;
	}
Would it be possible to try the code above but with a space between the 0 and the ! please. This is a long shot. So try this below.
ul.sf-menu ul.sub-menu, ul.sf-menu ul.children {
	margin-top: 22px;
	position: absolute;
	width: 12.3em;
	z-index: 999 !important;
	}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dagreat8

Hi Danny, thanks again but that did not help either. Could it be another piece of code conflicting? What kind of code would cause this?

Share this post


Link to post
Share on other sites
catrina

I don't think it can be a piece of code conflicting, but an IE issue and z-index is the only CSS fix I can think. However, one workaround would be to replace the callout with something else (perhaps a banner) just to see if the problem persists. You can use a banner as a replacement for the callout section (just input he same callout text information and upload the "Tickets" callout image).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
dagreat8

I'll try doing that but I would really prefer fixing the issue rather than covering it. Any other ideas would be GREATLY appreciated :)

Share this post


Link to post
Share on other sites
catrina

Maybe a solution other than z-index should be suggested, but I'm not what that solution would be. Browser-related issues are like bad children! :(


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
dagreat8

ugh tell me about it...I have both. hahaaha But you are right. I think there is a solution other than z-index...hopefully someone on here can help. It's a pretty big deal too for the dropdown menu.

Share this post


Link to post
Share on other sites
dagreat8

Quick update. I removed the callout section completely and it is still doing it. So frustrating. Also, seems I am not the only one having issues with IE9 and z-index: http://stackoverflow.com/questions/7070457/z-index-of-canvas-in-ie-9-problem http://www.davidtong.me/z-index-misconceptions-bugs-fixes/ But they are talking a whole 'nother language...translation anyone?

Share this post


Link to post
Share on other sites
Danny

Hi, Can you try (a test) removing all your custom CSS related to your menu and see if the issue persists please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dagreat8

OK I found the code that was the culprit...it is somewhere in here:

.navigation_wrap .main_nav {
	    background: rgb(69,72,77); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
	background: linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	
	    height: 57px;
	    margin-right: 0;
	    margin-top: 0;
	    position: relative;
	    text-align: left;
	    z-index: 28;
	}
	

After reading the articles I posted in the previous post, I am assuming the problem was due to assigning a background or something...I don't know. I'm glad I found the problem. I can do without this code.

Share this post


Link to post
Share on other sites
dagreat8

If you can run some tests, I am sure we would all love to know what types of code do not play well with IE9...thanks again for your help.

Share this post


Link to post
Share on other sites
jheflin

It seems that the CSS2 way of doing crossbrowser compliancy in some instances causes issues when applied within the same class or id using CSS3 standards. I was able to replicate the dropdown bug when using Button groups within a section, namely boxes. I had applied some CSS to the .fbox class to get some transparency consistent with the rest of my design and wanted backward compatibility to IE8 for subtle transparency so I included these old methods within the style as well as CSS3 methods. What this caused was the dropdown menus to fall behind any elements outside of the .fbox class. It had nothing to do with z-index or position. So for example I had a hero section below a row of three boxes which housed button groups w/ dropdowns (this page). With the CSS below in effect this caused the dropdown to fall BEHIND the hero section - I also can confirm that it will do this even with the footer so to test I hid the hero section so the only thing in the page template was the box sections and the dropdowns were cut off immediately where the footer started.

Long description but the short version is just avoid using old school cross-browser CSS tricks - namely filters and similar techniques - seems to really screw with things in ways that are hard to anticipate.


background-color:#fff;

filter: alpha(opacity=87); /* internet explorer */

-khtml-opacity: 0.87;	 /* khtml, old safari */

-moz-opacity: 0.87;	 /* mozilla, netscape */

opacity: 0.87;		 /* fx, safari, opera */[/b]

background: rgba(255, 255, 255, 0.87);

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

transition: background-color .25s;

-moz-transition: background-color .25s;

-webkit-transition: background-color .25s;

-o-transition: background-color .25s;

-ie-transition: background-color .25s;

padding: 20px;

Once I removed the CSS2 opacity elements on lines 2,3,4 and 5 my issues were resolved - the only downfall was not having transparency support in IE8.

At the end of the day I think IE8 users don't have an expectation for things to look so clean because of where things have progressed in web design and using CSS3, so they're really none the wiser - where they see no transparency and hard cornered boxes, IE9 user sees subtle transparency, box shadows, and rounded corners that soften the page. The root of the problem is the still wide-spread use of XP and we can thank Microsoft wholeheartedly, damn them.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×