Skip navigation
ColinBowling
Currently Being Moderated

Menu problem in Internet Explorer

Apr 16, 2012 4:04 AM

I am having a problem with a Spry menu in Internet Explorer 9 and 8. Using Dreamweaver CS5.5 I have set up a horizontal menu bar and in all the browsers that I have tested it on it works fine on both a Mac and a PC, until I try Internet Explorer. When the file is stored locally and I view it (with Parallels Desktop) in IE instead of seeing the menu I see a large light green box that covers not only the menu area but the surrounding area too. I thought the problem might be with Parallels Desktop so I put the site online and now the green box is gone, but instead of the menu being displayed across the page it is in the centre of the page and vertical.  Can anyone shed some light on this for me please?

 

The pages can be seen here: <http://www.colinbowling.com/ss/index.html>

 

Thanks

Colin.

 
Replies
  • Currently Being Moderated
    Apr 16, 2012 6:58 AM   in reply to ColinBowling

    Have a look at the following

    /********************************************************************* **********

     

    BROWSER HACKS: the hacks below should not be changed unless you are an expert

     

    ********************************************************************* **********/

     

    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

    ul.MenuBarHorizontal iframe

    {

        position: absolute;

        z-index: 1010;

        filter:alpha(opacity:0.1);

    }

    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

    @media screen, projection

    {

        ul.MenuBarHorizontal li.MenuBarItemIE

        {

        display: inline;

        f\loat: none;

        background: #FFF;

        }

    }

    The original value is left.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 16, 2012 7:00 AM   in reply to ColinBowling

    Is it possible that your box width is set to 100%? 

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 6:08 AM   in reply to ColinBowling

    Colin,

     

    I've got mine set to 25% because I wanted 4 of equal size.

     

    /* Menu item containers, position children relative to this container and are a fixed width */

    ul.MenuBarHorizontal li

    {

    margin: auto;

    padding: 0;

    list-style-type: none;

    font-size: small;

    position: relative;

    text-align: left;

    cursor: pointer;

    width: 25%;

    float: left;

    }

     

    Shelly

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 9:02 AM   in reply to ColinBowling

    Yeah if I'd seen Gramps was on the case I probably wouldn't have posted. 

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 17, 2012 5:12 PM   in reply to CJLong

    @Shelly,

     

    If I had known that you were on the case, I would have remained an onlooker, knowing that you would bring it to a good end. 

     

    CU around

    Ben (sorry, Gramps)

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 6:25 AM   in reply to Ben Pleysier

    Oh no Ben! 

     

    I've only been playing with spry for a couple weeks!  My success has been entirely thanks to you!

     

    Shel

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 7:59 AM   in reply to CJLong

    I had to change this to 24.5% for IE 7 & 8.  The last box was dropping down to the next line.  Also for iPads these work but you have to touch on then off then back on before they work...  Is there a fix for that?

     
    |
    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