7 Replies Latest reply on May 29, 2010 12:15 AM by daveharr1s0n

    Spry menu bar alignment/border problems

    daveharr1s0n Level 1

      Anyone able to help? I'm designing a site using a simple vertical Spry Menu Bar in the sidebar with no submenus. I have a dotted border down the right side that for some reason doesn't display in Internet Explorer 8 unless I click on "Compatibility View". However, in doing so the whole menu moves up, putting it out of line with the content in the mainContent area. I took a look on Apple Safari and it appears out of line there as well. Is there something I'm doing wrong? Is there something I can do so it appears correctly in both browsers?

       

      This is my first time posting here. Any help greatly appreciated. Here's a link to the site.

       

      http://www.daveharrison.info/auroraPowers/index.html

        • 1. Re: Spry menu bar alignment/border problems
          Nancy OShea Adobe Community Professional & MVP

          You have Conditional Comments in your document for IE browsers.  Try tweaking the padding-top values.

           

          <!--[if IE 5]>
          <style type="text/css">
          /* place css box model fixes for IE 5* in this conditional comment */
          .twoColFixLtHdr #sidebar1 { width: 230px; }
          </style>
          <![endif]-->

          <!--[if IE]>
          <style type="text/css">
          /* place css fixes for all versions of IE in this conditional comment */
          .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
          .twoColFixLtHdr #mainContent { zoom: 1; }
          /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
          </style>
          <![endif]-->

           

          Regarding IE8's handling of your dotted border.  The syntax should be:

          {

          border-right: size | style | #hex color

          }

           

          If all else fails and you can't get IE8 to play nice, add this meta tag to force IE8 into IE7 Standards mode.

           

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

           

           

          PS: When I saw your banner, I made an appointment to get my eyes examined. 

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          1 person found this helpful
          • 2. Re: Spry menu bar alignment/border problems
            daveharr1s0n Level 1

            Thanks, Nancy!

             

            That did the trick as far as moving the sidebar content down. Not sure I understand as far as the syntax for the dotted border, isn't that what I have here in Spry's ul.MenuBarVertical?

             

            border-right-width: 5px;

            border-right-style: dotted;

            border-right-color: #FFCC00;

             

            I played changed the word "width" to "size", but that didn't help.

             

            However, the metatag definitely did the trick! I'll check it out on some different browsers now.

             

            Yeh, I was playing with the artist's name there a little by applying the glow and blur effect. An obvious thing to try, her name being "Aurora".

             

            Thanks again!

             

            Dave

            • 3. Re: Spry menu bar alignment/border problems
              daveharr1s0n Level 1

              Okay, so that did the trick for IE (on the versions I've checked -- aside from version 8), but what about Safari? I checked on an Apple and the vertical navbar (while showing the dotted border at least) still sits up higher than I would like. Is there a conditional comment for that?

              • 4. Re: Spry menu bar alignment/border problems
                Nancy OShea Adobe Community Professional & MVP

                I just checked your site again in Google Chrome and Firefox 3.6.  They look exactly the same to me.

                Add some padding to your sidebar1

                 

                .twoColFixLtHdr #sidebar1 {
                     float: left;
                     width: 30%;
                     padding-top: 45px;
                }

                 

                You should build sites for the good browsers (FF, Opera, WebKit..).

                If needed, use conditional comments or hacks for IE only.

                 

                 

                Nancy O.
                Alt-Web Design & Publishing
                Web | Graphics | Print | Media  Specialists
                http://alt-web.com/
                http://twitter.com/altweb
                http://alt-web.blogspot.com

                • 5. Re: Spry menu bar alignment/border problems
                  daveharr1s0n Level 1

                  Thanks, Nancy!

                   

                  I only changed one page on that site so far -- the gallery page. Everything now lines up on that one for IE. But as I said, still not so on Safari. 

                   

                  That sounds like great advice, building for Firefox or one of the "good" browsers. (I don't really know what the best browsers are. I know nothing else but IE, really). I'll definitely try that! Heard so much bad about IE. Do you find it easier to then compensate for IE after building for one of these other browsers?

                   

                  You've been a great help. Thanks so much for your expertise!

                   

                  Dave

                  • 6. Re: Spry menu bar alignment/border problems
                    Nancy OShea Adobe Community Professional & MVP
                    Do you find it easier to then compensate for IE after building for one of these other browsers?

                     

                    "Good browsers" are web standards compliant.  IE is not.

                    MS created Conditional Comments to make up for IE's multitude of sins.

                     

                    IE Bugs Exposed

                    http://www.positioniseverything.net/explorer.html

                     

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    http://alt-web.com/
                    http://twitter.com/altweb
                    http://alt-web.blogspot.com

                    • 7. Re: Spry menu bar alignment/border problems
                      daveharr1s0n Level 1

                      Nancy!

                       

                      I downloaded Firefox and will try using that now as my default for web projects. I made some changes to the problem site and it seems to be displaying as intended now.

                       

                      I wish I had known this about Internet Explorer (not being "web standards compliant") from the start! IE is all I've ever really used and known. Your advice is very much appreciated!

                       

                      Thank you so much!

                       

                      Dave