Spry submenus behind page content in IE

[Waigy]

My sub menus in IE are going behind the page content on my wordpress blog page.
I'm not sure if this is a spry or wordpress problem, but I had this problem on a few other (non wordpress) pages and fixed it by adding "z-index:10000;" under "#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */".

In wordpress I have a plug in called "custom headers and footers" where I can put in html code for the menu.
In this I've added "z-index:100000000;" under the following menus :

#MenuBar, .nav

and

#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */

The background area of the menu is also about twice the height it should be in IE, this isn't as big a problem, but I would like to fix that too.

I think I found out a while ago that it's not possible to make the menus shiny in IE as they are in every other browser.
I'm mostly concerned that IE visitors to the blog page will not know that there are 3 gallerys.

Also in firefox when I'm on the blog page and I hover over the "Strawberry switchblade" menu it makes the text in all the menus go darker.

[ralph.m]

What versions of IE have you tested this in? And in which ones does the problem occur?

[Waigy]

IE9 and IE9 64bit.
I'm sure it used to be fine in IE7 or 8 when I first built the site.

[Waigy]

Same problem in IE8 too.

[ralph.m]

Looks like the filter on the menuBar/nav is causing problems, as they usually do. A tip: unless you really, really hate yourself and are deeply into masochistic rituals and self harm, avoid IE filters. They cause no end of misery and are utterly useless.

[Waigy]

Hi Ralph thanks for the info, I'm not an expert on html I'm just self taught, can you explain what I have to do to fix the filter?
Cheers

[ralph.m]

To keep it simple, my suggestion would be to remove the filter altogether and just use a solid background color or a background image. The gradients etc. don't seem to be working anyway. How was this set up in the first place? Did you write the code, or are you trying to modify someone else's?

[Waigy]

Hi Ralph
How do I remove the filter, is it just the extra code specifically for IE?
The whole site works fine in all browsers apart from IE, so I'm reluctant to make the site design suffer just because IE is so picky.
Can I make the menu use a solid colour or background image just in IE?

[ralph.m]

How do I remove the filter?

You need to find it in your style sheet and just delete it. It's just one line. If you are happy to do away with the gradient in IE, just set the nav to background-color: black before all your gradient rules. The alternative (a good alternative for all browsers) would be to create a background image instead that repeats across the page to create that background effect.

[Waigy]

Hi Ralph I am already using a 1px gradient image that repeats across the page.
That one line that I have to delete, what style sheet is it in and what will it say?

[ralph.m]

It's in the head of your document:

#MenuBar, .nav {
	background-color:#000000;	
	font-family: MonaKoRegular, Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
												MenuItem, and MenuItemLabel
												at a given level all use same definition for ems.
												Note that this means the size is also inherited to child submenus, 
												so use caution in using relative sizes other than
												100% on submenu fonts. */
	font-weight: normal;
	font-size: 18px;
	font-style: normal;
	padding:0;	

	background: #c8c8c8; /* Old browsers */
	background: -moz-linear-gradient(top, #c8c8c8 0%, #4f5151 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c8c8c8), color-stop(50%,#4f5151), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #c8c8c8 0%,#4f5151 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #c8c8c8 0%,#4f5151 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #c8c8c8 0%,#4f5151 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
	background: linear-gradient(top, #c8c8c8 0%,#4f5151 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
z-index: 100000000;
}

[Waigy]

Wow deleting that line has worked.
Thanks for that.
Can I make the menu background black in IE only without affecting how it looks in firefox (shiny gradient)?

Also do you know what can be causing the text to go darker when hovering over the Strawberry switchblade menu in firefox.
It only happens when I'm in the blog page.

[Waigy]

I've sussed out how to change it to black for IE only using your suggestion of making the background black before the gradient rules and deleting the IE filters for everything submenus, hovers etc.
I'm going to do the same for all the other pages.

[ralph.m]

Can I make the menu background black in IE only without affecting how it looks in firefox (shiny gradient)?

Yes indeed, though I see you've achieved than now.

Also do you know what can be causing the text to go darker when hovering over the Strawberry switchblade menu in firefox.
It only happens when I'm in the blog page.

Hm, I don't see that in Firefox. Could you post a screen shot of what you are seeing?

[Waigy]

Hi Ralph
I was just going to give you a screen shot of the text going darker and it isn't happening anymore.
In IE8 the drop down menus were still not working but it was ok in IE9.
The last thing I did was added "z-index: 10000000000;" after every menu category.
I'm not sure if that was a good thing to do or not, but it now seems to work fine apart from in IE8 the menu doesn't stay at the top of the page when scrolling, but that's not a big problem.

[ralph.m]

O well, if it works, then great. z-indexes won't do any harm, but there is certainly an art to them. Regarding the change in firefox, sometimes the browser "caches" old versions of the style sheet until you refresh the browser or clear the cache. That may have been the problem.

So are you all good now, or are there unresolved issues?

[Waigy]

I think that's it all fixed now though I haven't tried it yet in other browsers opera/chrome etc.
Thanks very much for the help.
Some forums have a "give thanks" button, but you'll just have to make do with a jam doughnut.
jam-doughnut_1603342c.jpg

[ralph.m]

Thanks

It looks fine in Chrome (same as in FF). Chrome is my go-to browser now.