6 Replies Latest reply: Oct 21, 2012 2:51 PM by FormUser RSS

    Artifacts between Logo and Vertical Menu Bar

    FormUser Community Member

      See http://www.ottawapatentagency.com

       

      Artifact #1: a light grey dot at the joint between the logo and the vertical menu bar, on the right hand side.

       

      Artifact #2: on mouse over 'Home' - the top menu item of the vertical menu bar - there appears a light-colored, 1-pixel separation between the logo and the vertical menu bar.

       

      The logo is a standard gif and the vertical menu bar is a standard spry menu bar, I am puzzled.

       

      Anyone has a solution?

        • 1. Re: Artifacts between Logo and Vertical Menu Bar
          Web Magi Community Member

          This appears to be creating both artifacts:

           

          /* Outermost menu container has borders on all sides */

          ul.MenuBarVertical {

              border: 1px solid #CCC;

          }

          • 2. Re: Artifacts between Logo and Vertical Menu Bar
            FormUser Community Member

            Thanks, Web Magi, I took off the top border of the menu container, reduced the width of the menu items by 2 pixels, and the artifacts disappeared! It looks beautiful in 'Live' view within Dreamweaver itself, with a beautiful 1 pixel border on the left, right and bottom of the vertical menu.

             

            However, IE displays the beautiful border only before the 'Allow blocked content' button is pressed. As soon as the button is pressed, the beautiful border on the left, right, and bottom of the vertical menu disappears, ouch!

             

            Anyone has a cure?

            • 3. Re: Artifacts between Logo and Vertical Menu Bar
              Web Magi Community Member

              You could try adding the following code above your closing </head> tag:

              <!--[if IE]>

              <style>

              UL.MenuBarVertical:after

              {

                  content: ".";

                  display: block;

                  height: 0;

                  clear: both;

                  visibility: hidden;

                  font-size: 0;

              }

              UL.MenuBarVertical

              {

                  display: inline-block;

              }

              UL.MenuBarVertical{

                  display: block;

                  -height: 1px;

              }

              </style>

              <![EndIf]-->

              Also, it looks like you need to add closing brackets to the following two lines:

              <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"

              <link rel="icon" href="/favicon.ico" type="image/x-icon"

              • 4. Re: Artifacts between Logo and Vertical Menu Bar
                FormUser Community Member

                Hi, Web Magi, you are right about the closing brackets

                 

                The [ifIE] code is grayed out in code view. Nonetheless, the [ifIE] code does prevent IE from 'eating' the border after the 'Allow blocked content' button is pressed. However, as soon as a menu item is pressed, IE eats the border of the main menu. IE does display the borders of the submenu and subsubmenu.

                 

                Google Chrome displays the borders of the main menu, submenu, and subsubmenu.

                 

                Any further IE hack that I could try?

                • 5. Re: Artifacts between Logo and Vertical Menu Bar
                  Web Magi Community Member

                  The code appearing grayed out is natural. The idea is to either modify or add to the style within the conditional comment until IE is showing you the desired results.

                  • 6. Re: Artifacts between Logo and Vertical Menu Bar
                    FormUser Community Member

                    Thanks, Web Magi, all of your responses were very helpful. I will start another thread as the topic has changed from the title of this thread. Thanks, again!