10 Replies Latest reply: Oct 12, 2013 7:26 AM by FormUser RSS

    Workaround for IE, vertical menu bar

    FormUser Community Member

      The vertical menu bar on the site http://www.ottawapatentagency.com renders correctly inside Dreamweaver CS6 and in Chrome, but not quite correctly in IE. The 1 pixel border on the left and right of the vertical menu bar does not appear in IE.

       

      Until recently, the 1 pixel border did appear in IE too, by virtue of the workaround code in the header (which I copied below) but for some reason the workaround does not work anymore.

       

      Anyone has a workaround?

      I am not a programmer, help!

       

      <!--[if IE]>

      <style>

      1. UL.MenuBarVertical:after

      {

          content: ".";

          display: block;

          height: 0;

          clear: both;

          visibility: hidden;

          font-size: 0;

      }

      1. UL.MenuBarVertical

      {

          display: inline-block;

      }

      1. UL.MenuBarVertical{

          display: block;

          -height: 1px;

      }

      </style>

      <![EndIf]-->

        • 1. Re: Workaround for IE, vertical menu bar
          Ben Pleysier CommunityMVP

          This is what I see in IE8

          capture.png

          Nothing wrong!

           

          Qui me fait me demander, où est la langue française?

          • 2. Re: Workaround for IE, vertical menu bar
            hans-g. CommunityMVP

            Hello,

             

            no problem in my IE10 too, it's the same appearance as Ben's.

             

            BUT anyhow a little note from my point of view: shouldn't you better use - in this case - a menu that opens downwards and thus saves space?

             

            Hans-Günter

            • 3. Re: Workaround for IE, vertical menu bar
              ajatix.com Community Member

              Try replacing

               

              <!--[if IE]>

               

              line with

               

              <!--[if lte IE 8]>


              (that will prevent inline-block-compliant browsers from applying the workaround)

               

              Alex

              • 4. Re: Workaround for IE, vertical menu bar
                FormUser Community Member

                Thanks, guys! This is what I got:

                 

                IE 8 on laptop: renders correctly

                 

                IE 10 on desktop and netbook: both render incorrectly with missing 1 pixel borders to the left and right of the vertical menu bar which IS the issue. Note that BELOW the vertical menu bar is a .png image that has 1 pixel borders which is NOT the issue.

                 

                It seems I need a workaround for IE 10.

                 

                (The fly-outs render correctly even in IE 10, I am too afraid to change this)

                • 5. Re: Workaround for IE, vertical menu bar
                  ajatix.com Community Member

                  That is why I recommend using

                  <!--[if lte IE 8]>

                  instead of

                  <!--[if IE]>

                   

                  'lte' means 'less than or equal'.

                   

                  IE9 and IE10 do support display:inline-block, so you need to limit the workaround code to older versions of IE only.

                  • 6. Re: Workaround for IE, vertical menu bar
                    Ben Pleysier CommunityMVP

                    Here is me thinking that our IE woes were over!

                     

                    Add the highlighted line and all is well.

                    ul.MenuBarVertical {

                        border: 1px solid #CCC;

                        border-top: 0;

                        border-bottom: 0;

                        border-left: 1px solid #CCC;

                        border-right: 1px solid #CCC;

                        overflow: hidden;

                    }

                    • 7. Re: Workaround for IE, vertical menu bar
                      FormUser Community Member

                      Sorry guys, but here is what I found.

                       

                      The modification to <!--[if lte IE 8]> still does not make IE 10 display the 1 pixel border to the left and right of the vertical menu bar. I notice now, that with or without the modification, the 1 pixel border briefly displays initially during the page loading time, then disappears again.

                       

                      The addition of overflow: hidden; in the .css file of the vertical menu bar hides the fly-out to the right beyond the div container of the vertical menu bar, in IE 10. The fly-out does display in Chrome with or without the addition.

                       

                      Does the above help in coming up with further suggestions that I can try out?

                      • 8. Re: Workaround for IE, vertical menu bar
                        Ben Pleysier CommunityMVP

                        The only other thing I can suggest is to use the tested clearfix by adding the following to the bottom of the style sheet

                        .clearfix:before, .clearfix:after { content: ""; display: table; }

                        .clearfix:after { clear: both; }

                        .clearfix { zoom: 1; }

                        and adding the class to the parent UL as in

                        <ul id="tempelVerticalMenu" class="MenuBarVertical clearfix">

                        This will leave a slight blank at the top of the menu bar.

                         

                        If all fails, place a borderless menu bar in a wrapper that does have the required border. Bugger IE

                        • 9. Re: Workaround for IE, vertical menu bar
                          ajatix.com Community Member

                          In tempelVerticalMenu.css you have the following IE hack section:

                           

                          /* 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.MenuBarVertical li.MenuBarItemIE {

                                    display: inline;

                                    f\loat: left;

                                    background: #FFF;

                          }

                          }

                           

                          Looks like it is no longer needed for current versions of IE.

                          Can you try commenting it out:

                          /*@media screen, projection {

                          ul.MenuBarVertical li.MenuBarItemIE {

                                    display: inline;

                                    f\loat: left;

                                    background: #FFF;

                          }

                          }*/

                           

                          When I do this the border appears fine in IE10. I have not checked it in IE8 though, as I don't have it at hand at the moment. Can check on Monday.

                          • 10. Re: Workaround for IE, vertical menu bar
                            FormUser Community Member

                            Yay, it works! The commenting out of the IE 5 hack makes IE 10 and at least my copy of IE 8 render correctly! Thanks, ajatix!

                             

                            A follow up question to all: I notice that IE 10 and IE 8 now render correctly with or without the <!--[if IE]> inline code. Shall I leave the inline code as is or delete it? What are the pros and cons?