Skip navigation
Currently Being Moderated

Spry vertical menu bar not working in IE

Apr 1, 2012 8:16 PM

I have a simple (well I thought) Spry Vertical Menu bar in my site that works great in every browser except - in you guessed it Internet Explorer.  One of the sub-items moves right on top of a main menu item when it's hovered (is that a real verb LOL) over; so you can't really even click on that particular main menu item...  Here's the web site:  www.meridianwaterfiltration.com 

 

Any help would be appreicated!! 

 
Replies
  • Currently Being Moderated
    Apr 2, 2012 3:30 AM   in reply to fourwhitesocks

    The validator says you have a missing <tr> element here:

     

     

    <table id="sample" cellspacing="2">

    <tr>

          <td class="data"><a href="index.html">Home</a></td>

     

    I wonder if that's it?

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 5:34 AM   in reply to fourwhitesocks

    Martin has probably given you your answer, but I wanted to express my admiration for your logo, typography and background design.  Just perfect.

     

    Also spotted a typo for you.  In your menu"Contacts Us"

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 11:22 AM   in reply to fourwhitesocks

    -----del, wrong suggestion, bad advice-----

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 7:10 AM   in reply to fourwhitesocks

    Add/modify the following

    ul.MenuBarVertical {

        width: 10em;

    }

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 7:33 AM   in reply to fourwhitesocks

    I still see

    ul.MenuBarVertical

    {

    list-style-type: none;

    font-size: 100%;

    cursor: default;

    width: 0em;

    padding: 0;

    margin-top: 75px;

    font-weight: bold;

    }

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 7:49 AM   in reply to fourwhitesocks

    Please open the site in Firefox, right click the page and choose 'view page source' then, in the resulting window, click on SpryAssets/SpryMenuBarVertical.css and view the script.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 8:27 AM   in reply to fourwhitesocks

    Yep. You are right, you have not changed anything at all. Have a look at the screen dump below

     

    capture.png

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 8:53 AM   in reply to fourwhitesocks

    Gramps is pointing out that you may have changed the width on your local file,

    but you have not uploaded the revised SpryMenuBarVertical.css to the server

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 9:26 AM   in reply to fourwhitesocks

    Check to be sure you are uploading to a folder in your root directory named "SpryAssets"

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 9:35 AM   in reply to fourwhitesocks

    Looks like you got it now

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 2, 2012 9:55 AM   in reply to fourwhitesocks

    That's just the way IE works... they've always felt free to play fast and loose with standards.

    You could ask Bill Gates the next time he posts here *grin*

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 4:49 AM   in reply to fourwhitesocks

    Hi everybody,

    I've had the same problem with the spry menu in IE9. Hoover on main menu is ok but not sub menu coming.

    After some research I found this solution. I hope that will help you .......

     

    Put this line in the head section of your html page

     

    <meta http-equiv="X-UA-Compatible" content="IE=9" >

     

    Enjoy ...

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 5:11 AM   in reply to Scouby_12

    Welcome Scouby

    Thanks for jumping in here...

    Much appreciated

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 7:43 AM   in reply to fourwhitesocks

    Hi fourwhitesocks,

     

    If it's ok for you, I suppose you don't need this line. (but maybe it's better to put it to be sure it's ok on the differents clients using IE9)

    I just find it cause here, on the same IE9 configuration but on the differents computers, the submenus list didn't come. Was just the hoover on the title menus and no more.

    I don't know why with some IE9 it's ok and with some others IE9 it's not ok.

    This is a part of the mysterious of microsoft maybe.

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2012 9:13 PM   in reply to fourwhitesocks

    I am also having the same sort of problem... I think. My head is spinning having just spent the last 2 days experimenting with Spry Menus.  I have one site with 2 layouts (home page & content pages) - each containing 2 vertical Spry menus. In both instances, using IE7 & 8, the 2nd or right menu throw the drop down way off from where it should be appearing. Of course works fine in Chrome on the same PC and all browsers on Mac.

     

    The site is: www.stride.on.ca

     

    I've been racking my brain over this, reading all sorts of forums but without success.

     

    PLEASE HELP! SOMEONE?

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2012 9:36 PM   in reply to Elevate_Me

    Bcause you have set the width to 100%, the menubar will go feral in IE

    ul.MenuBarVertical

    {

    margin: 0;

    padding: 0;

    list-style-type: none;

    font-size: 180%;

    cursor: default;

    width: 100%;

    font-weight: normal;

    text-transform: none;

    color: #FFF;

    border: 0;

    }

    I do not know why you have got two complete style sheets for each of the two menu bars. All you need to do is place the rule that you want to change into a selector that uses the ID of the menu bar as per

    ul#MenuBar1.MenuBarVertical a {

        background-color: red;

    }

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2012 5:48 AM   in reply to Ben Pleysier

    Thanks for the reply, though I'm unsure what the solution to the width issue is. I've since made it 8em (noticed that as an earlier solution on the thread), not perfect, but anything else moves the menu out of the light blue area. However the submenus are way off to the upper right.

     

    Weird that the left/centre SPRY menu works fine but not this one?

     

    Really appreciate the help - thank you!

     

     

    PS: As for me, I'm just trying to get back into the game - been stuck using images & tables till now. Working at trying to improve my understanding of CSS, I'm sure there is plenty of better ways to implement it than I have.

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2012 5:57 AM   in reply to Elevate_Me

    Forum etiquette says "Please start a new topic giving a short description of the problem and a link to the site."

     

    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