11 Replies Latest reply: Sep 21, 2010 11:30 AM by paul_shoe RSS

    SPRY Accordion Widget "jumpy" in IE

    Mike_Watt Community Member

      Search for "Accordion IE" and you get about a million threads talking about how all the panels are open in IE. That's NOT my problem.

       

      What I'm experiencing is very "jumpy" behavior from the accordion panel in IE8.  It works fine in EVERY other browser that I've tried.  Technically, it's working, just not very well!  Take a look if you have a sec - anyone who has any ideas please let me know.

       

      www.wattproductions.com/preview/

        • 1. Re: SPRY Accordion Widget "jumpy" in IE
          martcol Community Member

          Have you tried using the validator?

           

          From my understanding you seem to have a missing closing element somewhere but I might be wrong.

           

          I did have a look but my, tables, don't they produce a heap of code!  You have a few things going on that niggle the validator but won't upest your page rendering.  If there's a missing closing tag that might.

           

          Martin

          • 2. Re: SPRY Accordion Widget "jumpy" in IE
            Zabeth69 CommunityMVP

            Well, your accordion is behaving in my IE8, but your menubar is a little jittery. Usually, this means that you have set padding differently for the menu items when they are hovered over. If you adjust the padding to be the same, your menubar will no longer hop around.

             

            Actually, I see that you are using images for navigation (I think...your image names are pretty inscrutable). When you make images for swap-image navigation, be sure the text lines up better, and you will have the illusion of the color changing instead of the impression that the image has been swapped out.

             

            Using more meaningful filenames for images...ones that indicate what the image is...will help you get around in your code.

             

            Beth

            • 3. Re: SPRY Accordion Widget "jumpy" in IE
              Mike_Watt Community Member

              The horizontal nav bar will be tweaked later. I do see that it's not perfectly aligned yet, but that's a mission for another day. 

              I'm surprised you say that the accordion is behaving for you in IE8. I've checked on three different machines and all three display the same jittery, jumpy behavior.  You don't see any "flashes" on the page when the accordion animates? I've had this issue on every spry accordion I've ever used.  I thought that the upgrade to the newest framework would do the trick, but nope.

              • 4. Re: SPRY Accordion Widget "jumpy" in IE
                Zabeth69 CommunityMVP

                Nope, no flashes. I'm on XP.

                 

                Scratch that; I had Firefox open.

                 

                (still on XP) and getting Flashes in IE8. Here I thought I had lucked out.

                 

                I saw a post by Arnout recently about loading content in the background...the particular situation was two images next to each other that rendered initially as stacked and then adjusted to the right layout.

                 

                I don't know if looking at that would help in this situation, but on your page when the screen flashes, I see bits of the content, as if the page is stretching out to full height and collapsing back into the accordion layout.

                 

                Beth

                • 5. Re: SPRY Accordion Widget "jumpy" in IE
                  martcol Community Member
                  I checked your CSS in the Validator.  In the first rule you miss a semi-colon.

                  .AccordionPanelTab {
                       background-color: #BBAD8F;
                       font-size:x-small
                       font: Tahoma, Geneva, sans-serif;
                       color: #000000;
                       border-top: solid 1px black;
                       border-bottom: solid 1px gray;
                       margin: 0px;
                       padding: 1px;
                       cursor: pointer;
                  }

                  In this rule there's to many f's

                  .AccordionPanelTabHover {
                       color: #FFFFFFF;
                  }

                  I doubt the second rule will make a difference but that missing semi-colon might make it go flaky!


                  Hope it fixes it.


                  Martin

                  • 6. Re: SPRY Accordion Widget "jumpy" in IE
                    Mike_Watt Community Member

                    Thanks - I fixed that font-size line... that didn't have any effect on the "flashing" problem.  I'm a little confused, I can't be the only person who experiences this. It's a plug &  play widget, it should just work, no?

                    • 7. Re: SPRY Accordion Widget "jumpy" in IE
                      Arnout Kazemier Community Member

                      It's a plug &  play widget, it should just work, no?

                      Check the online example it works out of the box, yes.

                       

                       

                       

                      I suspect it has something to do with tables. See what happens if you place the widget outside the <table>

                      • 8. Re: SPRY Accordion Widget "jumpy" in IE
                        Mike_Watt Community Member

                        Whelp - it looks like you're right about that.  It's a real bummer though, because my whole layout is based on tables.  Maybe this can be addressed in the next framework update?  Safari, Chrome, and Firefox all handle the Accordion Panel fine even when it's inside a table... IE seems to be the only browser that has trouble with it.

                        • 9. Re: SPRY Accordion Widget "jumpy" in IE
                          Zabeth69 CommunityMVP

                          Sure, and though it seems as if ALL the other browsers support, remember that IE still owns half the planet, so half the world (at least!) need to be catered to, if you want your site to be intelligible and calm for that half of the population that uses IE!

                           

                          But...is the widget jumpy because IT is in a table, or because it is in a PAGE with tables? If the former, you could give it its own div reasonably easily. If the latter, oh well. I suppose it's because the rendering of the bottom part of the table is taking place at the same time as the rendering of the widget, and the ordering of the table rendering is throwing off the widget's javascript.

                           

                          And though your site is built on tables, divs are not that difficult. You could probably even get away with fewer divs than you have table cells.

                           

                          Beth

                          • 10. Re: SPRY Accordion Widget "jumpy" in IE
                            martcol Community Member

                            .AccordionPanelTabHover {

                                           color: #FFFFFFF;

                            }


                            That rule has too many Fs in it.

                             

                            The next rule has a missing semi-colon


                            .AccordionPanelTab {
                                 background-color: #BBAD8F;
                                 font-size:x-small
                                 font: Tahoma, Geneva, sans-serif;
                                 color: #000000;
                                 border-top: solid 1px black;
                                 border-bottom: solid 1px gray;
                                 margin: 0px;
                                 padding: 1px;
                                 cursor: pointer;
                            }


                            The Validator still shows a couple of problems with your HTML and one of those problems might be a missing closing tag.  If that's the case it might cause some difficutlies.  I'm not going to try and hunt it down.  However, if I were  you, on a nothing-to-lose basis I would use the validator to run the page through HTML Tidy and see if that solves your problem.  Do you know about HTML Tidy?  It will sort out quite a few HTML problems and whenever I've used it, it has made my pages validate.  It's not a good way to learn and it will add a meta tag to your page as well include  messages in your empty alt="" attributes but it's quick and dirty.  It won't make bad code into good code but it will validate it!  I'm still waiting for the day when HTML Tidy will be upgraded to HTML Beautiful! 

                             

                            Anyway, if none of my suggestions help, they shouldn't make it any worse.

                             

                            Martin

                             

                            PS: I noticed that you say you fixed that CSS line but the live site I looked at still has it in.

                             


                            • 11. Re: SPRY Accordion Widget "jumpy" in IE
                              paul_shoe

                              I know it's been quite a while since you posted this, but I thought I would share this.  I was having the same problem in IE and Firefox.  After some additional searching, I found a solution that worked for me.

                               

                              In the file "SpryAccordion.js", I changed the value for "this.duration = 500;" from 500 to 100.  The sliding animation goes a little faster but the "jumpy" appearance is not evident.

                               

                              Hope this helps someone.

                               

                              Paul