Spry submenu z-index problem in IE

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

All right, well I just figured out my problem, and hopefully this will help anybody else.
I was positioning my images using <position: absolute;> While this is definitely the easiest way to specifically place something on a page, Internet Explorer, it seems, assigns that z-value as the highest on the page, which is why my dropdown menus wouldn't appear on top of the image, but behind it.
The solution I found was changing the position attribute to "static" rather than "absolute". The "static" attribute can't use position qualities like "top", "bottom", "left", and "right", but has to use margins and float to be specifically place.
While this isn't as easy as absolute positioning, using the static value will allow the Spry dropdown menu to appear over top of the images instead of behind them.

Similar Messages

Spry dropdown z-index problems in IE

Hello
I'm having some trouble with the spry horizontal dropdown in
IE, and it's interaction with SmoothGallery. In every browser (with
the exception on IE 6&7 of course) the higher z-index values of
the menu cause it to overlay the JS image gallery below it. In IE
however it does not.
http://www.digitalrift.co.uk/projects/woods/
Works fine on every browser tested so I can't see how it'd be
a fault with the z-index values used. Anyone have a suggestion as
to a workaround for good ol' IE?
Thanks

All right, well I just figured out my problem, and hopefully this will help anybody else.
I was positioning my images using <position: absolute;> While this is definitely the easiest way to specifically place something on a page, Internet Explorer, it seems, assigns that z-value as the highest on the page, which is why my dropdown menus wouldn't appear on top of the image, but behind it.
The solution I found was changing the position attribute to "static" rather than "absolute". The "static" attribute can't use position qualities like "top", "bottom", "left", and "right", but has to use margins and float to be specifically place.
While this isn't as easy as absolute positioning, using the static value will allow the Spry dropdown menu to appear over top of the images instead of behind them.

Problems with Spry submenu appearing directly underneath parent in IE.

I've checked out a lot of forums but I can seem to find a solution to my spry issue. My spry submenu will not show up directly underneath the parent in Internet Explorer. Firefox and Safari look fine. I'm somewhat new to the Spry menu so any help would be appreciated. Here is my site: www.mattcreason.net. It's the portfolio tab.
Here is my SpryMenuBarHorizontal.css code:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-repeat: no-repeat;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 12pt;
position: relative;
text-align: left;
cursor: pointer;
width: 163px;
float: left;
background-repeat: no-repeat;
visibility: visible;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 163px;
position: absolute;
left: -1000em;
height: 48px;
top: 48px;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
position: absolute;
width: 163px;
left: auto;
top: 48px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 163px;
background-color: #8C0002;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
color: #FFFFFF;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #B89B5C;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-repeat: no-repeat;
height: 48px;
width: 163px;
padding: 0px;
clear: none;
float: none;
margin: 0px;
background-image: url(../jpegs/PortfolioButton.jpg);
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-repeat: no-repeat;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
background-image: url(../jpegs/PortfolioRollover.jpg);
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
Thank you!

You not are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Gramps

Spry submenu is hidden by iframe on page

I normally do not use iframes but this particular site requires that i do.
I am using spry horizontal menu bar and the drop down submenu under products is hidden by the iframe. I have tried several variations with position and z-index but can't get the submenu to show on top of the iframe.
http://www.airpowerservicesinc.com/kaeser_aftercool_air.php
thank you for any help,
Jim Balthrop

I found out the problem is not with the iframe itself, but i was using the iframe to display a pdf file and
found out that browers do not support showing a pdf file on a web page. So I guess that is why the spry submenu will not show on top of the iframe, because it displays a pdf file. When i had the iframe display a php page, the spry submenu showed on top of the iframe.
Jim Balthrop

Spry submenu not showing up on IE6/IE7/firefox

The Horizontalmenu Spry is working good when I create it as a
blank html page. But when I created spryheader as a template, the
submenu is not showing up on hover on IE and firefox. Wonder if its
a z-index problem.
Using spry 1.6.1
Did anybody face the same problem and found a solution?
Working URL (simple html page) : www.ciitech.net/next1/
Templated page :
http://www.ciitech.net/next2/Templates/ciiheaderfooter.dwt

Maybe you tweaked something, but it shows up in Firefox 3 and
IE7 for me. In IE7 though, the menus don't drop straight down, but
I think that might have to do with the widths you have set for you
menu items, but not certain.

Spry Menu Bar transparency problem - one solution

Like many other people I have spent several frustrating days trying to solve the problem of Spry Menu Bar sub-menus appearing to be transparent (text, etc. underneath the sub-menus shows above/through the sub-menu items). This problem manifested itself in IE7, but not in Netscape, Safari or Firefox.
I thought it must be the dreaded IE z-index problem.
I have been through most other people's questions and replies on the Adobe forums, tried all kinds of z-index changes and various other mods to my own CSS and/or the Spry CSS's - all to no avail.
My situation:
I have a Spry Menu Bar above a clicktrail and a text block. Both the clicktrail and the text block showed through the sub-menu items, which drop-down over them.
All three items are located in relative-positioned divs, necessary because the whole page design is contained in a self-centralizing container div and absolute-positioned divs screw up the whole page layout when the screen size or browser window size changes.
(Sorry, I can't upload the files to a website at the moment.)
The solution that works for me in Dreamweaver CS4:
I selected the divs for the clicktrail and the text block, one at a time, and selected Modify > Arrange > Send to Back in Dreamweaver CS4.
I then selected these two items again and selected Modify > Arrange > Bring to Front.
Finally I selected the div containing the Spry Menu Bar and selected Modify > Arrange > Bring to Front. The thought behind this was that this would put the Spry Menu Bar on top of everything else - and it works!
This solution works in all four browsers, but don't ask me how! I can't see any change in any CSS, nor in my template code. All I can see is a strange, flashing vertical line (like an enormous cursor - about 10 cm [3"] high) in the middle of the template page only (and only in Dreamweaver) if I click on the page background. I can neither find an explanation for this nor anything in the coding which might cause it. By the way; the z-index for the menu div =2, the z-index for the clicktrail div is not defined and the z-index for the div for the text block is set to auto. I haven't tried other values and to be honest I'm not sure what they were set to before I applied the above 'solution'.
But hey - who the hell cares - my site works!
I hope this helps someone else out of an absolute hell-hole...if someone out there can explain where to find the code that had been changed or added by doing this I'd like to know. I don't like things I can't explain - even if they do work!

This is where the browser is told to supply a white background
ul.MenuBarHorizontal a
     display: block;
     cursor: pointer;
     background-color: #fff;
     padding: 0.5em 0.75em;
     color: #333;
     text-decoration: none;
Vhange the value to transparent.
Also the last line int the CSS should be removed as in
filter: "alpha(opacity=60)";
Gramps

Spry Fade/Blind combo problem

http://1g2s.arena-i.com/v2/spry-fadeBlind.html
Click Portfolio
Page I grabbed the code from : http://labs.adobe.com/technologies/spry/demos/effects/index.html
I'm having 2 issues
1 - The fadeBlind is going the full cycle--meaning it fades/blinds in then immediately out.
I want it to fadeBlind in and stop, then click Close to fadeBlind out and stop.
2 - I am only able to run the script once for some reason. Clicking portfolio again does nothing.
Script in effects.js:
Spry.Effect.FadeBlind = function(element, options)
    Spry.Effect.Cluster.call(this, options);
    this.name = 'FadeBlind';
    var duration = 1000;
    var doToggle = false;
    var from = 0;
    var to = 100;
    if (options)
        if (options.duration) duration = options.duration;
        if (options.toggle) doToggle = options.toggle;
        if (options.from) from = options.from;
        if (options.to) to = options.to;
    var options = {duration: duration, from: from, to: to, toggle: doToggle};
    var blind = new Spry.Effect.Blind(element, options);
    this.addParallelEffect(blind);
    var options = {duration: duration, from: from, to: to, toggle: doToggle};
    var fade = new Spry.Effect.Fade(element, options);
    this.addParallelEffect(fade);
Spry.Effect.FadeBlind.prototype = new Spry.Effect.Cluster();
Spry.Effect.FadeBlind.prototype.constructor = Spry.Effect.FadeBlind;
Link properties :
I've tried...
<a onclick="runEffect('FadeBlind', 'portfolio-nav-wrap', {duration: 400, from: '0', to: '100%', toggle: true});" href="#">
<a onclick="runEffect('FadeBlind', 'portfolio-nav-wrap', {duration: 400, from: '0', to: '100%', toggle: true}); return false;" href="#">
<a onclick="return runEffect('FadeBlind', 'portfolio-nav-wrap', {duration: 400, from: '0', to: '100%', toggle: true});" href="javascript:void();">
<a onclick="return runEffect('FadeBlind', 'portfolio-nav-wrap', {duration: 400, from: '0', to: '100%', toggle: true}); return false;" href="javascript:void();">
None of the above changes anything. Any help would be appreciated.

I am using Vista, and Safari 4.0.5
I actually just figured out a workaround, by programatically setting display to 'block' for a div inside my 'container' div and it seemed to fix the problem. However I am still curious as to why I was having this problem in the first place. I've had several 'small' issues with the fade effect in different browsers, and luckily have figured out workarounds for both (the other issue was IE fading into the background color no matter what, which in the case of this site was brown instead of white and looked terrible....). Thanks for looking at it!
Dan

Weird Spry Submenu Effect in Internet Explorer

It looks like the first category item of a Spry submenu is stretching vertically to the same length of the Spry sub sub menu to the right. It works fine in Safari and Firefox. It is only doing this in IE 8 on a pc
Any idea why this might be happening?
Go here to see a photo of it.
http://www.advservices.biz/newsite/Photo015.jpg
To check out the site itself, go here
http://www.advservices.biz/newsite/newsiteindex.html
Thank you!

I am not sure if the following is the cause of the problem but try it.
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
     ul.MenuBarHorizontal li.MenuBarItemIE
          display: inline;
          f\loat: left;
     ul.MenuBarHorizontal ul li.MenuBarItemIE
          display: inline;
          f\loat: left;
The second set of rules should be deleted.
I hope this helps.
Ben

I can´t see the Menu Spry submenu because a slideimages hide

I can´t see the Menu Spry submenu because a slideimages hide. The slide image is under the spry horizontal menu, so when a put the mouse over, the submenus open behind the slide images.
How can I repair.
Thanks a lot, I can´t continue my work because of this.
Sorry for may english.
Thank you.

Assuming that the image slider is coded in JS and not Flash, there should be a z-index specified. Usually the value of the z-index is some absurdly high number. The challenge is to give the sub menu items of the menu bar a higher z-index value or to reduce the z-index of the image slider to a value lower than that of the menu bar.
The value of the z-index (1020) for the menu bar is located on or about line 48 of the SpryMenuBarHorizontal.css

Z-index problems in IE6

i managed to get IE6 to use z-indexes and layer properly..
everything that is except form elements specifically combo boxes
appear above my dropdown menus...??

This is not a z-index problem. It's due to the way that combo
elements are
drawn to the screen. There are only two solutions that I know
of -
1. Redesign the form so that there is no conflict, or
2. Hack the menu code so that the combo element is hidden
when the menu is
opened.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Terrence Martineau" <[email protected]>
wrote in message
news:em7187$h79$[email protected]..
>i managed to get IE6 to use z-indexes and layer
properly.. everything that
>is except form elements specifically combo boxes appear
above my dropdown
>menus...??

Flash z-index problem

hi!
I have problem with z-index of my flash animation.
On Mac everything works great (on Safari and Firefox), but on Windows I have the same problem on all browsers.
Basically, the dropdown menu is displaying below my flash animation instead of above.
I'm surprised on mac everything is working perfectly and it doesn't depend on the browser...
is maybe due to the published javascript code generated by Flash ?
thanks

>I created some pull down menus using CSS. Directly below
the menu bar I
>had a
> Flash file that runs on load. The pull down menus look
corrupted in
> the
> browser (safari and FireFox) when they appear over the
running flash
> movie. Is
> this a z index problem? Any work arounds?
Safari and Firefox Mac have very broken and slightly broken
Flash
Players. There is no viable workaround unless you want to
eliminate all
"hover" effects. Adobe claims it's an Apple or a browser bug.
Apple
claims it's a failure on the part of Adobe to "cocoa-ize"
something or
other.
Al Sparber - PVII
http://www.projectseven.com
Popup Menus | Image Galleries | CSS Tutorials & Templates
Newsgroup: news://forums.projectseven.com/pviiwebdev/
CSS Newsgroup: news://forums.projectseven.com/css/
DW Newsgroup: news://forums.projectseven.com/dreamweaver/

SUNONE Indexing problem

have an indexing problem :
2 start points
1) myportal/portal/dt/ - main page robot can index it Oll Right
2) myportal/portal/dt/?provider=2DefTab&&2DefTabContaner.setSelected=Def98MainTableContainer&last=false&Def98TabContainer.setSelected=Def98STableContainer&tab=1&subdiv=01&node01=on&node5089=on&std_html=off&scroll_x=0&scroll_y=0 - dinamic page - robot can index only the first part of the page then
the interesting thing is however that teh first parts of the pages are identical and robot can index this part on main page and can not do it on the secons one
maybe some one faced this problem before? please help

Does "_type" really have a leading underscore? That must be a PITA to work with. Sorry my bad it does not have an underscore.
the queries always states the type of the PARTY.
I am worried that this PARTY table is kind of abstract and we are putting two types of information into the same table.Does this effect my index design?

Table attribute assignments / indexing problem

Appears that in the out of the box Ultra Search setup Oracle overrides the basic assignments of attributes. For example if I assign Author search attribute to table field auth , it gets overriden and indexed from what was in the meta data field of the incoming document. If pdf or other doc type it uses that author meta data field of doc instead of what attribute assignment I made. Is this just for this version and the next version will have the option? It appears that no matter what, the override happens. Any help or suggestions in this attribute assignment and indexing problem?

This is a bug in 1.0.3 and has been fixed in 9.0.2 and 9.2.

Spry submenu appears way right in IE on horizontal menu

Hi,
I have tried all the fixes in the other posts but none work.
My submenus are appearing clear over to the right of the page on my
horizontal menu. This has to be an z index problem. The site is
www.oregontrailcenter.org.
Mouse over the first item The Trail Center then the bottom item
"Support Opportunities". The menu appears almost off the right side
of the page. Thanks for any help you can give me.
My code is below:

I figured this one out on my own. No worries!

Spry submenu shows on top in ie

Help, I have tried everything. My product spry submenu works in every browser except ie. The address is www.timelessflooringdesign.com.
Thanks

You are not using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Gramps

Spry submenu z-index problem in IE

Similar Messages

Maybe you are looking for