Skip navigation
OharaLane
Currently Being Moderated

Menubar not displaying correctly in IE

Mar 29, 2011 9:58 AM

I am a beginner. I have no idea where to begin to trouble shoot this problem I am having.  Please help!!!

Menu bar in IE shifts to right and 2 submenus do not drop below main menu. "Links" and "Resources".  "Programs" submenus drop fine.

 

MenuIE.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Displays fine in FireFox and Safari.

 

MenuFireFox.jpg

 
Replies
  • Currently Being Moderated
    Mar 29, 2011 4:45 PM   in reply to OharaLane

    The good news; the original SpryMenuBar works like a charm in ALL modern browsers.

     

    The bad news; you have mutelated the package to such an extent that you are now seeking advice.

     

    Suggestion:

    1. resurrect the original SpryMenuBarHorizontal.css
    2. read http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php #one
    3. make adjustment to suit

     

    If, after that, you still have problems, come back here with a URL to your site or (at the very least) a copy of the CSS

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 30, 2011 4:00 PM   in reply to OharaLane

    The first set of style rules in the original SpryMenuBarHorizontal.css looks like

    ul.MenuBarHorizontal
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
    }

    The same rules in your document

    ul.MenuBarHorizontal
    {
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: auto;
        text-align: center;
        color: #1B213B;
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

     

    As I have already said, the ORGINAL WORKS! if you decide to leave a left margin out of the equation and to give the text a center alignment, then that is entirely up to you, but you must also suffer the consequences. The above rules tell the browser to not worry about a left margin but the right margin must be zero. Also this is not the place where you center the text. That is best done as

    ul.MenuBarHorizontal a {
         text-align: center;
    }

    Have a look here for further info http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHoriz ontalMenuBarSample.html

     

    I have not looked any further because of time constraints. Hopefully there are no other deviations from the orginal that will adversely affect your design.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 31, 2011 2:56 PM   in reply to OharaLane

    This is the better way to go http://foundationphp.com/tutorials/sprymenu/ssi.php

     

    Gramps

     
    |
    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