9 Replies Latest reply: May 21, 2013 4:34 PM by Nancy O. RSS

    spry vertical menubar issues ie compatibility mode

    westwm Community Member

      i'm having huge issues with a vertical spry menu bar in ie, i get different results from ie 8 to 9, firefox and chrome are working perfectly!

       

      website

       

      in some verions of ie, the menubar completely loses its vertical stacking, in others it works fine. am i supposed to enable something in ie?

      for different clients browsing the site though, how are they suposed to know what version of ie they should use to CORRECTLY view the site?

      attatched are some  pics of the results i am getting:

       

      correct bevaior in mozilla19:

      mozilla19.02spry menu.jpg

      here is ie9.08112

       

      ie9.08112 menu compatibility mode.jpg

      as you can see, the alignment in ie compatibilty mode  ON, is totally whacked!

      but turn OFF  compatibiltiy   mode and it works fine?!

      this inconsistancy also happens with older ie7, as two diff computers running the same os

      and ie7 browser,  one might display the menu correct and the other will display it as above.

      both were not running in compatible mode.

       

      Please help this is so frustrating!                                                                                                                                                     

       

      Message was edited by: westwm

        • 1. Re: spry vertical menubar issues ie compatibility mode
          Nancy O. CommunityMVP

          #1 Your liberal use of APDivs (position:absolute) is pure poison for primary layouts. 

          See screenshot from Firefox 20 with increased text size. 

           

          WestwoodMem.jpg

           

          You don't need positioning for any of this.  Default CSS positioning (static or none) is all that is required for 98% of layouts.  Alignment is best controlled with CSS Margins, Floats and Padding.  Or just use a pre-built, 3-column layout from DW.  

           

          Go to File > New > Blank Page > HTML > Layouts...  Select one from the 3rd panel & hit Create.

           

          CS6-NewLayout.jpg

           

           

          #2 Spry Menus were built in 2006, predating modern browsers by several years.  As such, Adobe abandoned the framework last year because quite frankly it isn't up to modern standards. Also, Spry drop menus don't invoke on touch screen devices because they lack a mouse.   Best advice, ditch Spry & use a better menu system.

           

          Pop-Menu  Magic2 by PVII (commercial DW extension)
          http://www.projectseven.com/products/menusystems/pmm2/index.htm

           

          jQuery Superfish
          http://users.tpg.com.au/j_birch/plugins/superfish/

           

           

          Nancy O.

          • 2. Re: spry vertical menubar issues ie compatibility mode
            westwm Community Member

            hi Nancy

             

            thank you so much for the advice and for taking the time to browse through the my site

             

            you can tell i am a novice at this. i was basically following an online course from lynda.com (think it was called 'your first css site' by paul trani and basically started out the site one way but moved to another direction with it so there is a lot of residual code underneath this current site. Its been a chore to say the least, over 4 months of frustrating developement now.

             

            I am totally shocked by the fact that spry is outdated! the online tutorial was done using dreamweaver6 so i assumed this is current technology. throughout they kept saying that it was suitable for all browsers, or so i was led to beleive.

             

            in your opinion what would be the quickest way to fix the browser irregularities? should i create a new page as you suggested and then template it from there in dreamweaver? I really do like the spry image viewers and menu and 'kind of' know it right now. to have to learn jquery menus and slideshows seems like it would take another 3 months for me.

             

            My boss is growing impatient, i have my 1st child due any day and i need to get this site up and running soon. is there any quick fixes that would get these pages running reasonably well? in your opinion, would it be possible to get this site going in a day or two?

             

            thanks for your help. Your opinions and suggestions, and any others would be greatly appreciated!

             

            Nancy O. wrote:

             

            #1 Your liberal use of APDivs (position:absolute) is pure poison for primary layouts. 

            See screenshot from Firefox 20 with increased text size. 

             

             

            You don't need positioning for any of this.  Default CSS positioning (static or none) is all that is required for 98% of layouts.  Alignment is best controlled with CSS Margins, Floats and Padding.  Or just use a pre-built, 3-column layout from DW.  

             

            Go to File > New > Blank Page > HTML > Layouts...  Select one from the 3rd panel & hit Create.

             

             

             

            #2 Spry Menus were built in 2006, predating modern browsers by several years.  As such, Adobe abandoned the framework last year because quite frankly it isn't up to modern standards. Also, Spry drop menus don't invoke on touch screen devices because they lack a mouse.   Best advice, ditch Spry & use a better menu system.

             

            Pop-Menu  Magic2 by PVII (commercial DW extension)
            http://www.projectseven.com/products/menusystems/pmm2/index.htm

             

            jQuery Superfish
            http://users.tpg.com.au/j_birch/plugins/superfish/

             

             

            Nancy O.

            • 3. Re: spry vertical menubar issues ie compatibility mode
              Mike M Community Member

              Closest thing to Spry menu I've found is DynamicDrive's "Smoothmenu" Looks very similar, but is more customizable and as the name says, smoother than Spry. It's built in horizontal and vertical layouts.

              http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

              Nancy's 100% right about the APDIVs, they cause a lot more headaches than they're worth. They should be a last resort for something you can't do with overlays or z-index tweaking.

              • 4. Re: spry vertical menubar issues ie compatibility mode
                westwm Community Member

                hey thank you very much that is a very slick menu and will implement that in replacement of my spry menu.

                thanks again for the help!

                 

                C F McBlob wrote:

                 

                Closest thing to Spry menu I've found is DynamicDrive's "Smoothmenu" Looks very similar, but is more customizable and as the name says, smoother than Spry. It's built in horizontal and vertical layouts.

                http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

                Nancy's 100% right about the APDIVs, they cause a lot more headaches than they're worth. They should be a last resort for something you can't do with overlays or z-index tweaking.

                • 5. Re: spry vertical menubar issues ie compatibility mode
                  westwm Community Member

                  Hi nancy (and others)

                  I've begun to re-implement the site using the pre-created template from dreamweaver that you suggested above.

                   

                  I'm still finding it hard to abandon the use of ap div's. for instance here is a shot of my current progress:

                  new site markup.jpg

                  now with your statement:

                   

                   

                  You don't need positioning for any of this.  Default CSS positioning (static or none) is all that is required for 98% of layouts.  Alignment is best controlled with CSS Margins, Floats and Padding.  Or just use a pre-built, 3-column layout from DW.  

                   

                  and C F McBlob's comment of  "Nancy's 100% right about the APDIVs, they cause a lot more headaches than they're worth. They should be a last resort for something you can't do with overlays or z-index tweaking."

                  how can i move the text called "Instruction" into the middle of the scroll banner inidacted by the RED highlighting using the above mentioned options instead of an ap div?

                   

                  how can i create an open are to place my gallery and slide show images indicated by BLUE?

                   

                  how can i move text that i will use as a blurb to describe each gallery, indicated by GREEN?

                   

                  the new header and body backgrounds are images that were inserted using css background option. all other text and mark ups are the same as the original dreamweaver template

                   

                  any additonal pointers would be greatly appreciated!

                   

                  thanks!

                  • 6. Re: spry vertical menubar issues ie compatibility mode
                    Nancy O. CommunityMVP

                    I would structure the page this way:

                    http://www.alt-web.com/sandbox/Westwood.html

                     

                    The only image is the blue ribbon which I used as a backgound for the Heading 2.  Everything else is done with real text & CSS.  No APDivs required.

                    View source in browser to see the code. 

                     

                     

                    Nancy O.

                    • 7. Re: spry vertical menubar issues ie compatibility mode
                      mike129374 Community Member

                      THE CONFLICT IS BETWEEN YOUR DOCUMENT CSS AND THE SPRY CSS.

                       

                      It is because the <li> and <a> TAGS have been styled and therefore OVERRIDDEN THE SPRY CSS.

                       

                      Use CLASS TAGS e.g.  <li class="anyclass"> and <a class="anyclass">
                      and STOP USING THE <a> TAGS.

                       


                      N.b. you may need to unstyle any <a> or other TAGS that conflict with the SPRY CSS.  (However it's best to start over knowing that styling basic tags may affect the SPRY CSS).

                      • 8. Re: spry vertical menubar issues ie compatibility mode
                        westwm Community Member

                        nancy thank you so much for taking the time and showing me this.

                        its actually incredible but quite a bit over my head, i will have to study this for a while to fully understand whats going on in terms of how you positioned elements without using ap divs.

                         

                        what is your formal education in web building if you dont mind me asking. seems like i will have to take some paid courses.

                         

                        thanks again.

                        Nancy O. wrote:

                         

                        I would structure the page this way:

                        http://www.alt-web.com/sandbox/Westwood.html

                         

                        The only image is the blue ribbon which I used as a backgound for the Heading 2.  Everything else is done with real text & CSS.  No APDivs required.

                        View source in browser to see the code. 

                         

                         

                        Nancy O.

                        • 9. Re: spry vertical menubar issues ie compatibility mode
                          Nancy O. CommunityMVP

                          My formal education as you put it comes from reading articles by experts and experimenting with code until I get what I want. 

                           

                          Web Design Theory

                          http://webdesign.tutsplus.com/sessions/web-design-theory/

                           

                          Eric Meyer

                          http://meyerweb.com/eric/css/

                           

                          CSS Tricks

                          http://css-tricks.com/

                           

                          Smashing Magazine

                          http://coding.smashingmagazine.com/

                           

                          Web Design Tuts

                          http://webdesign.tutsplus.com/

                           

                          Good luck!

                           

                          Nancy O.