21 Replies Latest reply on Mar 4, 2012 2:55 AM by AbbuJan2

    Spry not working properly in IE (again !)

    AbbuJan2

      Hello everybody,

       

      I have put multiple vertical spry menu bars on my page, they are working as expected on all other major browsers except IE :S ....as usual. When you go to the page on any other browser you shall see that the sub menus overlap the other spry menus, but when you go through IE they don't overlap instead the sub menus come under the other spry menus. I've tried many a things to resolve the situation here but all have deemed fruitless :|

       

      http://bonzo.bonzoline.com/

       

      I would appreciate any help from any of you guys, looking forward to you response(s). Cheers !

       

       

      Kamil

        • 1. Re: Spry not working properly in IE (again !)
          teedoffnewbie Level 2

          First I would address the coding errors you have, which can be seen here. In particular, the doctype should be the very first line in your document.

          • 2. Re: Spry not working properly in IE (again !)
            martcol Level 4

            You should definately check your page in the validator.

             

            It shows this for one:

             

            Error  Line 268, Column 12: end tag for "ul" which is not finished

             

            That's going to muck something up.

             

            Still, there's other stuff going on too:

             

            http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbonzo.bonzoline.com%2F

            • 3. Re: Spry not working properly in IE (again !)
              AbbuJan2 Level 1

              Thanks for the quick reply, but if you look at the source code the <ul> tag has been ended properly. Could you please look and if this is not it then please suggest something else.

              • 4. Re: Spry not working properly in IE (again !)
                martcol Level 4

                Try this one:

                 

                   <div class="CollapsiblePanelContent"list</div>

                • 5. Re: Spry not working properly in IE (again !)
                  AbbuJan2 Level 1

                  Hey thanks a lot dude , most of the content is working now. Just the first box is not working properly now. Else is fine, you can check it.

                  • 6. Re: Spry not working properly in IE (again !)
                    AbbuJan2 Level 1

                    Its still not working :S , It works fine when you load the page and move your cursor for the first time, after that when you bring your cursor again it does not work.

                    • 7. Re: Spry not working properly in IE (again !)
                      teedoffnewbie Level 2

                      You should try and fix ALL the errors martcol and myself have pointed out. You have several unclosed elements, several invalidly nested elements, and you have a <link> tag within your body section. Those need to go in the head section. The one linking your spry file.

                       

                      IE is notorious for not rendering invalid code. Other browser do a better job at 'guessing" what the code wanted, but IE likes everything laid out correctly, as it should be.

                      • 8. Re: Spry not working properly in IE (again !)
                        martcol Level 4

                        In one of your lists you have done some pretty heavy commenting out.

                         

                        <!-- <ul> and so on

                         

                        and so on

                         

                        -->

                         

                        I think that might have left you with a stray </ul> tag.  So either you commented out too much or not enough.

                         

                        Martin

                        • 9. Re: Spry not working properly in IE (again !)
                          martcol Level 4

                          After that, if I were you, I think I would tidy up the <head> of the page.

                           

                          I think that you might do well to think about why you have opted for the Doctype you have and then go from there.

                           

                          I think that those things overall will not screw your layout but I think that not playing ball with the doctype can throw IE into Quirks mode.

                           

                          Martin

                          • 10. Re: Spry not working properly in IE (again !)
                            Nancy OShea Adobe Community Professional & MVP

                            You still have 39 code errors on the page.  

                            http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbonzo.bonzoline.com%2F

                             

                             

                             

                            Nancy O.

                            Alt-Web Design & Publishing

                            Web | Graphics | Print | Media  Specialists 

                            http://alt-web.com/

                            http://twitter.com/altweb

                            • 11. Re: Spry not working properly in IE (again !)
                              teedoffnewbie Level 2

                              Nancy O. wrote:

                               

                              You still have 39 code errors on the page.  

                              http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbonzo.bonzoli ne.com%2F

                               

                               

                               

                              Nancy O.

                              Alt-Web Design & Publishing

                              Web | Graphics | Print | Media  Specialists 

                              http://alt-web.com/

                              http://twitter.com/altweb

                              lol thats what I've been saying. Makes me feel invisible here....lol

                              • 12. Re: Spry not working properly in IE (again !)
                                AbbuJan2 Level 1

                                No way dude , your efforts are totally appreciated here, I'm working on those errors and also specific things that martcol is pointing out, thanks to him too. I'll get back to you guys soon.

                                 

                                Regards,

                                • 13. Re: Spry not working properly in IE (again !)
                                  AbbuJan2 Level 1

                                  Hello again,

                                   

                                  Removed all the errors, you can check that on the validator page, still no luck :S

                                   

                                  Any Ideas..?

                                  • 14. Re: Spry not working properly in IE (again !)
                                    BenPleysier Adobe Community Professional & MVP

                                    There are still many errors left in your markup. Doubling up on links to CSS and JS do not help. Also, unneccessary markup, style rules and JS does not help. The following illustrates this

                                    <script type="text/javascript">

                                    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar4 = new Spry.Widget.MenuBar("MenuBar4", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar5 = new Spry.Widget.MenuBar("MenuBar5", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar6 = new Spry.Widget.MenuBar("MenuBar6", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar7 = new Spry.Widget.MenuBar("MenuBar7", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar8 = new Spry.Widget.MenuBar("MenuBar8", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar9 = new Spry.Widget.MenuBar("MenuBar9", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar10 = new Spry.Widget.MenuBar("MenuBar10", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar11 = new Spry.Widget.MenuBar("MenuBar11", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    var MenuBar12 = new Spry.Widget.MenuBar("MenuBar12", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                    </script>

                                     

                                    Remember KISS

                                     

                                    Look at the following where I have linked the support files to Adobe to ensure that we use un-adulterated versions.

                                    <!doctype html>
                                    <html>
                                    <head>
                                    <meta charset="utf-8">
                                    <title>Untitled Document</title>
                                    <link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css" rel="stylesheet">
                                    <style>
                                    body {
                                        width: 980px;
                                        margin: auto;
                                    }
                                    ul.MenuBarVertical {
                                        height: 100px;
                                        background-color: #EEE;
                                        display: block;
                                        float: left;
                                        margin: 20px;
                                    }
                                    ul#MenuBar1.MenuBarActive {
                                        z-index: 2000;
                                    }
                                    </style>
                                    </head>
                                    
                                    <body>
                                    <ul id="MenuBar1" class="MenuBarVertical">
                                      <li><a class="MenuBarItemSubmenu" href="#">Community</a>
                                        <ul>
                                          <li><a href="#">Item 1.1</a></li>
                                          <li><a href="#">Item 1.2</a></li>
                                          <li><a href="#">Item 1.3</a></li>
                                        </ul>
                                      </li>
                                    </ul>
                                    <ul id="MenuBar2" class="MenuBarVertical">
                                      <li><a class="MenuBarItemSubmenu" href="#">Jobs</a>
                                        <ul>
                                          <li><a href="#">Item 1.1</a></li>
                                          <li><a href="#">Item 1.2</a></li>
                                          <li><a href="#">Item 1.3</a></li>
                                        </ul>
                                      </li>
                                    </ul>
                                    <script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
                                    <script>
                                    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
                                    var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
                                    </script>
                                    </body>
                                    </html>
                                    

                                     

                                    Gramps

                                    1 person found this helpful
                                    • 15. Re: Spry not working properly in IE (again !)
                                      AbbuJan2 Level 1

                                      Thanks for that, but I still havn't got it. I have removed unneccessary things like CSS and JS from the code but still couldn't fix it. Could you look again and advise something else ?

                                       

                                      Thanks,

                                       

                                      Kamil

                                      • 16. Re: Spry not working properly in IE (again !)
                                        BenPleysier Adobe Community Professional & MVP

                                        I guess you did not have a good look at the code that I gave you; your document is still a mess and you overlooked the most important part. That's all I'll say.

                                         

                                        To fix your problem add the following just above the </head> tag

                                         

                                        <style>
                                        ul#MenuBar1.MenuBarActive, ul#MenuBar3.MenuBarActive, ul#MenuBar5.MenuBarActive  {
                                            z-index: 2000;
                                        }                
                                        </style>
                                        

                                         

                                        Gramps

                                        • 17. Re: Spry not working properly in IE (again !)
                                          AbbuJan2 Level 1

                                          Thanks for that, it fixed it. I have three questions here:

                                           

                                          1) Could you please point out how my document is still a mess ? I would surely love to learn on how to lay out things more efficiently.

                                          2) Which part did i overlook ? Was it in your code or mine

                                          3) Lastely, how did this fix you have me work, how did it resolve the issue ?

                                           

                                          It would be great if you could answer these questions, thank you very much again.

                                           

                                          Regards,

                                           

                                          Abbu

                                          • 18. Re: Spry not working properly in IE (again !)
                                            BenPleysier Adobe Community Professional & MVP

                                            <title>BonzoLine | Homepage</title>

                                            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

                                            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

                                             

                                            <link href="/css/site.css" media="screen" rel="stylesheet" type="text/css" />        <link href="/SpryAssets/SpryMenuBarVertical.css" media="screen" rel="stylesheet" type="text/css" />

                                            <link href="/css/site.css" media="screen" rel="stylesheet" type="text/css" />        <link href="/SpryAssets/SpryCollapsiblePanel.css" media="screen" rel="stylesheet" type="text/css" />

                                            <link href="/SpryAssets/SpryMenuBarVertical.css" media="screen" rel="stylesheet" type="text/css" />

                                            <link href="/css/site.css" media="screen" rel="stylesheet" type="text/css" />

                                            <meta name="Description" content="..."/>

                                            1a The above doubles up on links that I mentioned

                                            <script type="text/javascript">

                                            var temp = 1;

                                            var temp2 = "MenuBar";

                                            temp2 = temp2+temp;

                                            //alert(temp2);

                                            var MenuBar = new Spry.Widget.MenuBar(temp2, {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

                                            </script>       

                                            1b What is the above, and there are 5 more like this.

                                             

                                            ul#MenuBar1.MenuBarActive {
                                                z-index: 2000;
                                            }

                                            2. The above gave you the hint on how to fix your problem. I also gave you a hint on how to show the menubars, HTML and CSS. The CSS is as follows

                                            ul.MenuBarVertical {
                                                height: 100px;
                                                background-color: #EEE;
                                                display: block;
                                                float: left;
                                                margin: 20px;
                                            }

                                            and there is no <a href="#"></a> to be seen

                                             

                                            3. If you have a look at lines 26 to 29 of SpryMenuBarVertical.css, you will see that the original z-index has been set to 1000. What we needed to do was go higher for the menu items on the left so that they would cover the menu items on the right. I chose a safe 2000, but this value could have been 1001 with the same result.

                                             

                                            I have not gone through the whole document looking for further problems. I think it is up to you to go through the document and question each and every line. If you do not know the purpose of the markup (the line) the comment it out and have a look at the result in your favourite browser (Internet Explorer). If you still have queries, Google the subject or otherwise come back here, remembering that you are bound to come across this grumpy aged pensioner when you do.

                                             

                                            If you happen to come Down Under, please bring a box of cigars with you

                                             

                                            Gramps

                                            1 person found this helpful
                                            • 19. Re: Spry not working properly in IE (again !)
                                              AbbuJan2 Level 1

                                              1a --> I really did miss that mess

                                              1b --> Actually the thing about that is that on my website the number of spry menu bars showing on the home page are dynamic(i.e they can increase and decrease subject to the number of categories which can be added on run time through the admin panel) which is in actuality one piece of code that runs a loop and shows 6 items that are currently being shown on the home page. That script that you find there 6 times there was to create an object of the dynamically created spry menu bar but it isn't working at the moment but I plan on gettin it to work. I shall remove that for the time being.

                                              2 --> Alright, I understand that I missed that hint.

                                              3 --> Actually I didn't clearly knew how these things worked, I understand there working better now that how the value increase and decrease can change the outlook.

                                              I shall definitely go for your advice and look more thorough in the document for each and every line. BTW, IE is not my favorite browser, but its for most internet users so that's why I had to go tweaking I shall be googling and coming back here too to meet the grumpy man time and again who helps a lot (thanks for all of it).

                                               

                                              I would definitely keep that request of yours in mind when I come to that special place

                                               

                                              Thanks a lot,

                                               

                                              Abbu

                                              1 person found this helpful
                                              • 20. Re: Spry not working properly in IE (again !)
                                                BenPleysier Adobe Community Professional & MVP

                                                Thank you for your feedback. People that know me usually ignore my grumpiness.

                                                 

                                                It goes you well my friend.

                                                Gramps

                                                • 21. Re: Spry not working properly in IE (again !)
                                                  AbbuJan2 Level 1

                                                  Your grumpiness is much appreciated here. Cheers !

                                                   

                                                  Abbu