Results 1 to 7 of 7
  1. #1
    Join Date
    Dec 2007
    Posts
    38
    Plugin Contributions
    0

    Default Overlapping menu doesn't play nice in IE

    I'm attempting to have level3 and beyond of my drop-down menu overlap slightly. It looks great in Firefox, Safari, Chrome, etc. but not IE6/7/8. I've played around with the z-index for different elements, but I have no idea what an appropriate fix for IE might be. I've googled the issue and can't seem to find any solution. Anyone have experience with this before?

    The site is based on the Apple Zen template, but that's not significant as it seems to be a CSS compatibility issue.

    View the site here:
    http://www.atsresources.org/shop

    Thank you!

  2. #2
    Join Date
    Oct 2009
    Location
    Netherlands - NB
    Posts
    151
    Plugin Contributions
    0

    Default Re: Overlapping menu doesn't play nice in IE

    Just a shot. I know from IE that they have a different view on defaults of padding and a, li properties

    http://www.atsresources.org/shop/inc...eader_menu.css

    div#dropMenu li a (line 50)

    {

    display: block;

    height: 16px;

    padding-top: 5px;

    padding-right: 33.3px;

    padding-bottom: 5px;

    padding-left: 33.3px;

    text-decoration: none;

    color: #ffffff;

    text-align: center;

    font-weight: bold;

    font-size: 14px;

    border-right-width-value: 1px;

    border-right-style-value: solid;

    border-right-color-value: #ffffff;

    border-right-width-ltr-source: physical;

    border-right-width-rtl-source: physical;

    border-right-style-ltr-source: physical;

    border-right-style-rtl-source: physical;

    border-right-color-ltr-source: physical;

    border-right-color-rtl-source: physical;

    }

    Did you tweak this property?

    good luck

  3. #3
    Join Date
    Feb 2005
    Location
    Lansing, Michigan USA
    Posts
    20,313
    Plugin Contributions
    3

    Default Re: Overlapping menu doesn't play nice in IE

    Removing position:relative; from DIV#dropMenu LI seems to fix it here.

  4. #4
    Join Date
    Dec 2007
    Posts
    38
    Plugin Contributions
    0

    Default Re: Overlapping menu doesn't play nice in IE

    @jcdk
    I believe #dropMenu li a only controls the initial tabs, not pertaining to level3 of the drop-down.

    @stevesh
    I tried your suggestion, but the drop-downs are then positioned absolute left, rather than underneath each corresponding tab.

    I keep thinking it's a z-index glitch with IE because you'll notice level3's first link is positioned above level2, but the following links in level3 are hiding behind level2. It's the same for level4 hiding behind level3. Why would the first link appear above, but not the others? Again, this only seems to happen in IE6/7/8.

    Although the menu was built differently, the proper affect is achieved on the main site at http://www.atsresources.org without any IE issues. So I know it's possible, just need your help

  5. #5
    Join Date
    Dec 2006
    Location
    Seligman, MO U.S.A.
    Posts
    2,123
    Plugin Contributions
    5

    Default Re: Overlapping menu doesn't play nice in IE

    I got the overlapping problem in both IE and FF, but think I found the fix for you. In you stylesheet_header_menu.css , find this section of code:

    Code:
    div#dropMenu ul.level3, 
    div#dropMenu ul.level4, 
    div#dropMenu ul.level5, 
    div#dropMenu ul.level6, 
    div#dropMenu ul.level7,
    div#dropMenu ul.level8{
        /*top: 0;*/
        top: 0.3em;
        /*left: 16.8em;  position sub-level right of 1st level */
        left: 13.3em; /* position sub-level over 1st level */
        background:#4f4f4f;
        border-left: 1px solid #444;
        border-top: 1px solid #444;
        margin-left: 45px;
    }


    and add "margin-left: 45px", as shown above in red. That seemed to fix the problem for me in both IE and FF.

    Hope this helps.
    Teach them to shop and they will shop today;
    Teach them to Zen and they will OWN a shop tomorrow!

  6. #6
    Join Date
    Dec 2007
    Posts
    38
    Plugin Contributions
    0

    Default Re: Overlapping menu doesn't play nice in IE

    @Get Em Fast
    Thanks for the tip. I tried implementing the 'margin-left' along with removing 'left' and playing with other measurements, but still no luck.

    I would like level3 to overlap level2, but it only seems to work on the top link while the others hide behind.

  7. #7
    Join Date
    Dec 2007
    Posts
    38
    Plugin Contributions
    0

    Default Re: Overlapping menu doesn't play nice in IE

    Anyone else run into this problem with IE?

 

 

Similar Threads

  1. Nice Top-Nav Categories Menu? Is it hardcoded, or a mod?
    By schoolboy in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 20 Nov 2011, 01:03 AM
  2. Facebook doesn't play nice with ZenCart...
    By mikestaps in forum General Questions
    Replies: 0
    Last Post: 20 Jan 2011, 10:08 PM
  3. Doesn't Play Well with eAccelerator?
    By ses707 in forum Upgrading from 1.3.x to 1.3.9
    Replies: 7
    Last Post: 16 Apr 2010, 04:29 PM
  4. Adding nice buttons to css flyout menu
    By thunder11 in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 7 Oct 2009, 09:01 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR