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.

Similar Messages

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

  • 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 menu z-index in DW template

    I am trying to create a unified website using a dreamweaver template. I have a header with a spry dropdown menu beneath it, which extends (when expanded) down over an editable region in the template. I can make the drop down menu work correctly in the template, but if I add a new div tag near or beneath the dropdown menu in the "child" page (a new document- from the template) it's z-index is above the drop down menu and obscures the drop down menu items. I would like the have the flexibilty of adding the new divs in the editable region in the child pages, but don't know how to make the spry drop menu stay on top... any suggestions ??
    thanks,
    jay

    So, you probably found out that the use of templates has nothing to do with this issue, right?  And the simple solution is to adjust the z-index of the Spry element so that it's higher than anything else on the page.  (in addition you want to limit your use of positioned elements anyhow, since that is not a general layout tool to begin with)

  • 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/

  • 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

  • DropDown by index not clearing previous values

    Dropdown by index issue.
    I am having a problem with my dropdown not clearing previous entries. 
    I have a webdynpro that has two views, main and appraisal.  I can enter the appraisal view from the main.  The appraisal view contains a drop down. At this point, I the dropdown appears to work correctly.  However, if I then enter a second appraisal, the drop down displays the value from the previous entry.  I tried clearing out the drop down in wddomodifyview, but that just cleared out the actual line of the previous selection in the drop down, so I removed that code.
    Here is what I have done so far.
    Under Context in the appraisal view, I have created a node named DD1_1 which contains the attributes rating and rtext.
    I have created a Supply Function attached to it called DD_MAPPING1_1, which contains the following code:
    method DD_MAPPING1_1 .
    * create local data variable to access context information
      Data: context_node type ref to if_wd_context_node.
    * create table based on context structure
      Data: it_rating type STANDARD TABLE OF if_appraisal=>element_DD1_1,
            wa_rating like line of it_rating.
      clear wa_rating.
      wa_rating-rating = ' '. wa_rating-rtext = ' '.
      append wa_rating to it_rating.
      wa_rating-rating = '1'. wa_rating-rtext = 'Below Expectations'.
      append wa_rating to it_rating.
      wa_rating-rating = '2'. wa_rating-rtext = 'Met Expectations (low)'.
      append wa_rating to it_rating.
      wa_rating-rating = '3'. wa_rating-rtext = 'Met Expectations (medium)'.
      append wa_rating to it_rating.
      wa_rating-rating = '4'. wa_rating-rtext = 'Met Expectations (high)'.
      append wa_rating to it_rating.
      wa_rating-rating = '5'. wa_rating-rtext = 'Exceeded Expectations'.
      append wa_rating to it_rating.
      context_node = wd_context->get_child_node( name = 'DD1_1').
      context_node->BIND_TABLE( it_rating ).
    endmethod.
    I feel I am missing something, but seeing this is my first time attempting a dropdown, I am not certain what.
    Any assistance would be appreciated.

    I have tried this code in the inbound plug handler:
      DATA lo_nd_dd1_1 TYPE REF TO if_wd_context_node.
      DATA lo_el_dd1_1 TYPE REF TO if_wd_context_element.
    * navigate from <CONTEXT> to <DD1_1> via lead selection
      lo_nd_dd1_1 = wd_context->get_child_node( name = wd_this->wdctx_dd1_1 ).
    * get element via lead selection
      lo_el_dd1_1 = lo_nd_dd1_1->get_element( ).
      clear lo_el_dd1_1.
      lo_nd_dd1_1->set_lead_selection(
        element = lo_el_dd1_1
    and the program is bombing out with the message
    Invalid index 0 when setting lead selection; context node: APPRAISAL.1.DD1_1
    Should I be using set_lead_selection_index?
    Thank you for all your help.
    Edited by: Ed Left on May 19, 2010 5:25 PM

  • Dropdown by Index: Initial lead selection

    All,
    <b>This is my requirement:</b> I have a dropdown (By Index), By default I wanted to have blank as selected value.
    If user selected any of the value, it has to be seleted value.
    <b>What i did so far is:</b>
    I set selection of node to 0..1, cardinality as 0;n and set initializeLeadSelection to false
    <b>The problem:</b> I have is, by default im getting the blank space in dropdown, no issue here.
    but when user selects any value from drop down, it always showing the space. not the selected value.
    Thanks ...
    BM

    You might try this:
    Create a context value node "Items", cardinality 0:N, selection 0:1 with a supply function "supplyItems".
    In the supply function, create the node elements that should appear in the dropdown-list.
    void supplyItems(IItemsNode node, ...)
      for (int i = 0; i < wdContext.nodeR().size(); ++i)
        IRElement e = wdContext.nodeR().getRElementAt(i);
        IItemsElement item = node.createItemsElement();
        node.addElement(item);
        item.setRD(e.getRid());
        item.setOrg(getOrgUnitName(e.getOrgunitid()));
      node.setLeadSelection(IWDNode.NO_SELECTION);
    At the event handler that calls the BAPI and changes the model node content, just call wdContext.nodeItems().invalidate() to trigger the supply function and will the items with the updated values from the model.
    (You might also give your context nodes and attributes more useful names)
    Armin

  • Highlight dropdown by index in table control in FPM error

    Hello,
    I have a situation where I would like to point out to a user that they have to maintain a value in a dropdown field in a table control. I am trapping the error situation in the Process_Event method of the FPM in my component,
    I would like to raise an FPM error to highlight this to the user. If I do this with a normal input field I can just pass the element and attribute that I want highlighting to the FPM error handler
    eg:
    wd_this->ao_fpm->mo_message_manager->report_bapiret2_message(
                                is_bapiret2 = ls_message-message_details
                                io_component = lo_component
                                io_element = ls_message-element
                                iv_attribute_name = ls_message-attribute_name ).
    and the field is highlighted and linked to the error.
    However, if the field is of a type dropdown by index, I can't seem to get it to highlight. I have tried passing the element that the dropdown text is bound to and the attribute/name of the text field, but this does not work. I even tried passing the child node name as the attribute, and the element as the parent element of the node holding the dropdown list - but unsuprisingly this doesn't work either.
    Is there anyway to highlight/link a dropdown by index field to an FPM error message - or is this functionality currently unsupported? Or perhaps I am making a simple mistake somewhere?
    Thanks for any suggestions!
    Cheers,
    Chris

    Chris Paine wrote:
    > Is there anyway to highlight/link a dropdown by index field to an FPM error message - or is this functionality currently unsupported? Or perhaps I am making a simple mistake somewhere?
    hi Chris,
    As far as i know this functionality is not supported.I have had the same problem earlier.

  • DropDown by Index in table control

    Hi,
    I'm using dropdown by index(i need different values for each row) in my table control and I have this problem:
    I have this context binded to my table control:
    TABLE_NODE (card. 0..n)
       - ATRIB1
       - ATRIB2
       - DROPDWN_NODE (card. 0..n sel. 0..1) - to this node dropdown by index is binded
            - VALUE
            - TEXT     <-- bind this attribute to Texts property
    Dropdown is filled OK, but how to transfer selected dropdown value to ATRIB2? And then, if I have a value in ATRIB2, how to diplay correct text for user in dropdown?
    Another thing is that I have 2 dropdowns by value in table and values of second depends on selected value in first. How should I refresh second dropdown by index when user change value in first?
    Many thanks for reply.

    I'm also facing the issue.  Can u plz. share the source code.

  • Dynamic creation of Dropdown by Index in the view

    Hi,
    Please help me how to create Dropdown by Index dynamically.
    The scenario is in a view, part of view is Static and other part is Dynamic.
    Dynamic part display depends on entry  selected from Static part of the view.
    I am using method WDDOMODIFYVIEW to implement this. I could successfully generate Group, Caption, TextView view
    element dynamically but with Dropdown by Index, I am getting runtime error.
    New Dropdown by Index will belong to Dyanmically generated Group in 'ROOTELEMENTCONTAINER' and new Context node will be created in CONTEXT for Dynamic Dropdown by Index .
    Thanks, in advance ,for your help.

    Thanks Amit and Lekha for your replies.
    I tried the code but still I am getting the same error.
      lr_rootnode_info = wd_context->get_node_info( ).
      lr_rootnode_info = lr_rootnode_info->get_child_node( 'ADD_DATA' ).
      call method lr_rootnode_info->add_new_child_node( exporting name = lv_node_name                                                                    is_mandatory = abap_false
                                                                  is_multiple = abap_true
                                                                  is_multiple_selection = abap_true
                                                                  is_singleton = abap_false
                                                                  is_initialize_lead_selection = abap_true
                                                                  is_static = abap_false
                                                        receiving child_node_info = lr_rootnode_info ).
    ****----------------Get instance of new node
      concatenate 'ADD_DATA.' lv_node_name INTO lv_child_node.
      lr_dyn_node = wd_context->get_child_node( name = lv_child_node ).
    ***----------------Prepare properties of attribute and add to context node
    *data:lo_nd_add_data type ref to if_wd_context_node,
    *     lo_nd_lv_node_name type ref to  if_wd_context_node,
    *     lo_el_lv_node_name type ref to  if_wd_context_element.
    *lo_nd_add_data = wd_context->get_child_node( name = wd_this->wdctx_add_data ).
    *lo_nd_lv_node_name = lo_nd_add_data->get_child_node( name = lv_node_name ).
    *lo_el_lv_node_name = lo_nd_lv_node_name->get_element(  ).
      concatenate is_char-descr_char 'ID' into lv_attname.
      translate lv_attname to upper case.
      condense lv_attname no-gaps.
      lr_attribute-name = lv_attname.
      lr_attribute-type_name = 'STRING'.
      lr_attribute-value_help_mode = '0'.
      lr_rootnode_info->add_attribute( exporting attribute_info = lr_attribute ).
      lr_element = lr_dyn_node->create_element( ).
      lr_dyn_node->bind_element( new_item = lr_element
                                 set_initial_elements = abap_true ).
      concatenate lv_node_name '.' lv_attname into   lv_bindtext.
      lr_ddbyidx = CL_WD_DROPDOWN_BY_IDX=>NEW_DROPDOWN_BY_IDX( id = iv_name
                                                    view = ir_view
                                                    label_for = iv_textviewid
                                                    bind_texts = lv_bindtext ).
      lr_row_grid_data = cl_wd_grid_data=>new_grid_data( element = lr_ddbyidx ).
    *******To set the TextView to the Group_2
      lr_group2->add_child( lr_ddbyidx ).
    Please help.
    Thanks.
    Edited by: Trupti Kallurwar on Oct 26, 2009 9:14 PM

  • How to populate table editor which has dropdown by index in a column

    Hi Experts,
    I have a table editor with 3 columns.
    Column 1. DD By Index - Subjects
    Column2: marks ( input field )
    column3: Result ( text view)
    On an action of button on top of the view, i am getting the data for column2 and 3 and populating the node but i am unable to populate the column 1 Dropdown by Index.
    My Node looks like this:
    Node_Parent
       Node_DD
          Subject_Text
       Marks
       Result
    When i get the internal table for Node_parent i am not getting Node_dd in that, so i am populating Marks and Result. binding it.
    again looping on lt_parent and binding the node_dd.
    it works fine when there is one row in lt_parent, its going for dump when its more than 2 records.
    What am i missing while binding the subnode Node_DD while looping?
    Any clue is highly appreciated.
    Note: I am not using Supply Function to populate the subnode.
    Ajay
    Edited by: ajay matam on Aug 1, 2011 12:40 PM

    Hi,
    Parent Node and Child node has cardinality 0 to N only.
    I am getting the child node of the parent.
    Lo_node_parent->get_child_node ( name = 'Node_dd' )
    i am trying to bind an internal table to Lo_node_parent but i am getting a dump with error
    "COMPONENTCONTRLLER.1.PARENT.2.NODE_DD.NODE_DD" does not exist.
    Binding works when there is one record in Parent node
    loop at lt_parent into ls_parent.
    binding the child node
    endloop.
    above thing works fine when there is one record, but when there are more than 1 record i am getting the above error.
    Ajay
    Edited by: ajay matam on Aug 1, 2011 1:40 PM

  • Spry dropdown menu only works fully in Safari...

    http://www.charlespatrickjewelers.com/jewelry_pages/rings.html
    That is the link to my page. I have spry dropdowns set on the navbar for Rings, Bracelets, and watches.
    In IE and Firefox, only the rings dropdown is working, but for Safari every dropdown works. Can someone help me fix this?
    Thank you all!
    Aza

    Well, someone on another forum suggested I use css rollovers because both the spry and the swap image used the mouseover event, but I changed it and that didn't work. Can anyone here tell me why my spry navbar doesn't work in ie and Firefox?

  • 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?

Maybe you are looking for