5 Replies Latest reply on Apr 17, 2011 2:33 PM by bobby_x

    CSS Spry Menu Bar Issues in Internet Explorer

    bobby_x

      Hi there - I'm new posting to this forum - so please be gentle!  :-)

       

      I am working on integrating a WordPress blog into my site - it has NOT been easy, but I'm getting there.  Most of the site pages are done in HTML and the navigation bar was built using SpryMenuBar in Dreamweaver.

       

      My WordPress site uses PHP - and I've been having a hard time getting the navigation bar to work properly in PHP.  I converted the navigation bar's HTML code into PHP and inserted the PHP code at the top of all the WordPress page templates.  That seems to be working ok and both the HTML and PHP pages show the navigation bar CSS styles correctly in Safari 5.0.4 and Chrome 11.0.696.44.

       

      However, the link color and some of the padding is off when I view the PHP pages in Internet Explorer 8.  I'm thinking it's a CSS issue, but I have NO clue how to fix it and I've tried everything!  Could it be an issue with the PHP code itself?  Or is this a CSS issue?

       

      Can someone take a look at my CSS coding and point me in the right direction?

       

      Thanks so much

       

      B

       

       

      /*Menu Bar styling classes*/

      ul.MenuBarHorizontal{

      margin: 0;

      padding: 0;

      list-style-type: none;

      font-size: 100%;

      cursor: default;

      width: 791px;

      }

      ul.MenuBarActive{

      z-index: 1000;

      }

      ul.MenuBarHorizontal li{

      list-style-type: none;

      font-size: 100%;

      position: relative;

      text-align: left;

      cursor: pointer;

      width: 9.45em;

      float: left;

      white-space:nowrap;

      }

      ul.MenuBarHorizontal ul{

      margin: 0;

      padding: 0;

      list-style-type: none;

      font-size: 100%;

      z-index: 1020;

      cursor: default;

      width: 14em;

      position: absolute;

      left: -1000em;

      text-align:left;

       

      }

      ul.MenuBarHorizontal ul.MenuBarSubmenuVisible{

      left: auto;

      }

      ul.MenuBarHorizontal ul li{

      width: 14em;

      white-space:nowrap;

      text-align:left;

       

      }

      ul.MenuBarHorizontal ul ul{

      position: absolute;

      margin: -5% 0 0 95%;

      }

      ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible{

      left: auto;

      top: 0;

      }

      ul.MenuBarHorizontal ul{

      border: 1px solid #CCC;

       

      }

      ul.MenuBarHorizontal a{

      display: block;

      cursor: pointer;

      background-color: #b7d3de;

      padding-left:0;

      padding-right:0;

      padding-bottom:1em;

      padding-top:1em;

      color: #000;

      background:#B7D3DE;

      text-decoration: none;

      text-align:center;

       

      }

      ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{

      background-color: #d8f3fc;

      font-size: 100%;

      color: #000;

       

      }

      ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{

      background-color: #d8f3fc;

      font-size: 100%;

      color: #000;

       

      }

      ul.MenuBarHorizontal a.MenuBarItemSubmenu{

      background-repeat: no-repeat;

      background-position: 95% 50%;

      }

      ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{

      background-repeat: no-repeat;

      background-position: 95% 50%;

      }

      ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{

      background-repeat: no-repeat;

      background-position: 95% 50%;

      }

      ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{

      background-repeat: no-repeat;

      background-position: 95% 50%;

      }

      ul.MenuBarHorizontal iframe{

      position: absolute;

      z-index: 1010;

      }

      @media screen, projection{

      ul.MenuBarHorizontal li.MenuBarItemIE{

      display: inline;

      f\loat: left;

      background: #FFF;

      }

      }

       

       

        • 1. Re: CSS Spry Menu Bar Issues in Internet Explorer
          John Waller Adobe Community Professional & MVP

          Can you post a link to a problem page so we can see what's wrong?

           

          However, the link color and some of the padding is off when I view the PHP pages in Internet Explorer 8.  I'm thinking it's a CSS issue, but I have NO clue how to fix it and I've tried everything!  Could it be an issue with the PHP code itself?  Or is this a CSS issue?

           

          Tip: be specific with descriptions of unexpected behaviour.

           

          Rather than "off", it's more helpful if you describe a) what you expect to see and b) what you are actually seeing.

          • 2. Re: CSS Spry Menu Bar Issues in Internet Explorer
            bobby_x Level 1

            Sure thing - I'll try to be more specific:

             

            • The text is supposed to stay black throughout the navigation bar - not just turn black when you hover on an item.

            • Also, the submenus have some kind of padding happening in them that shouldn't be there.

             

            Does that help?

             

            Thank you so much...

            • 3. Re: CSS Spry Menu Bar Issues in Internet Explorer
              bobby_x Level 1

              Hey John - here are screenshots - does this help?

               

               

              incorrect - in IE8

               

              incorrect.jpg

               

              correct - in Chrome

               

              correct.jpg

               

               

               

                   incorrect in IE8

               

              incorrect_2.jpg

               

              correct - in Chrome

               

              correct_2.jpg

              • 4. Re: CSS Spry Menu Bar Issues in Internet Explorer
                John Waller Adobe Community Professional & MVP

                You seem to have removed the link posted earlier.

                 

                I presume you're still talking about

                http://198.65.234.159/wordpress/

                 

                The global style for a:visited

                 

                a:visited {
                color: #83b31f;
                }

                 

                is kicking in because there's no override for the navbar links in the Spry stylesheet.

                 

                Add an a:visited rule to the Spry stylesheet (in bold below so you can see the change);

                 

                ul.MenuBarHorizontal a, ul.MenuBarHorizontal a:visited {

                display: block;

                cursor: pointer;

                background-color: #b7d3de;

                padding-left:0;

                padding-right:0;

                padding-bottom:1em;

                padding-top:1em;

                color: #000;

                background:#B7D3DE;

                text-decoration: none;

                text-align:center;

                 

                }

                • 5. Re: CSS Spry Menu Bar Issues in Internet Explorer
                  bobby_x Level 1

                  That was it!  Thank you so much John.

                   

                  Yes, I removed the link, thought I would post images of what I was having issues with instead.  But I guess links are better to post...

                   

                  There's one more issue that still remains though - there's a white border/padding that appears in the submenu in IE.

                   

                  What could be triggering this?

                   

                   

                  INCORRECT

                  incorrect_2.jpg

                  CORRECT

                  correct_2.jpg