Skip navigation
KCoverick
Currently Being Moderated

Help with IE drop down menu stretching across page, Chrome & Firefox work perfectly.

Dec 11, 2012 7:28 PM

Tags: #spry #ie #cs6

I have set up a spry menu in my page.  file:///C:/Users/Kim/Documents/PQH_xhtml/index.html

 

Everything works great in Chrome and Firefox. Just not in IE.  The only problem I am having is in IE the drop down menus stretch out all the way across the page.

 

I have tried changing the width, but it messes up Chrome and Firefox.  Just need IE to shorten up the width of sub menus.

 

Any help is GREATLY appreciated!!!

 
Replies
  • Currently Being Moderated
    Dec 12, 2012 1:57 AM   in reply to KCoverick

    The reason is the auto width sub-menu items.

     

    To get the correct setting for IE you need the following style rules, where !important is not a remark, but needs to be included

    ul.MenuBarHorizontal ul li {

        display: block;

        float: none !important;

        width: auto;

        white-space: nowrap;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2012 9:12 AM   in reply to KCoverick

    Please upload the site and supply a link to it

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2012 3:12 PM   in reply to KCoverick

    The answer to your problem can only be found in the code (HTML, CSS and JS).

     

    The out-of-the-box SpryMenyBar works well. It is when one makes changes in the code that the problems arise. Have a look here

    http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php #one

     

    May I assume that you have made no changes in the JS file and that the changes in the HTML file will not cause the problems. In which case, the problem probably lies in the CSS. It will therefore be a good idea to copy and paste the CSS file in your next reply.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2012 3:49 PM   in reply to KCoverick

    Spry Menus were never designed to work with Fluid Grid layouts.  They pre-date them by several years.

     

    As an FYI: Spry framework is no longer being developed by Adobe and is being phased out from future products.  So the best advice I can offer you is to find a better menu system, preferably one that is responsive to work with your responsive layouts.

     

    CSS Menu Systems

     

     

     

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2012 4:18 PM   in reply to KCoverick

    As much as I hate to admit it, Nancy is correct.

     

    But being the lover of Spry that I am, have a look at the following.

     

    Change the widths in the following to auto


    ul.MenuBarHorizontal li

    ul.MenuBarHorizontal ul

    ul.MenuBarHorizontal ul li

     

    and add the highlighted to ul.MenuBarHorizontal ul li

    width: auto;

    display: block;

    float: none !important;

    width: auto;

    white-space: nowrap;

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 12, 2012 7:36 PM   in reply to KCoverick

    You are best off at mastering what you are doing now.

     

    Once you have a website that you like and has the functionality that you need, then you can go ahead and experiment with responsive web design which includes fluid layouts.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points