views:

86

answers:

3

Hi,

I've been working on and off on a horizontal accordion. It's not working perfectly at the moment but i've just got to change a few bits. The code is very rough and I intend to make it a bit more graceful once it works.

It functions perfectly in every browser apart from ie6..initially when it loads in the page all you can see is the 6th panel (labelled df6)...then if you click on that the accordion seems to spring in to life....all the panels appear and it seems to work just fine. I can't think of any reason for this..

Any ideas? I'm at a complete loss with this :(

http://boudaki.com/testing/carousel/test.html

A: 

The only wisdom I can offer is not to use the ul li construction in your markup. The same thing could be done with divs, and you wouldn't have all the horrible CSS baggage IE6 brings to those.

Robusto
Hi Robusto, Yes thanks for the suggestion. I did it with ul's on the pretence of semantics....even though i'm not even sure whether an un-ordered list is more semantic in this case ;)
elduderino
+1  A: 

Ah! Thankyou Elf King! Your comment about jquery and IE6 led me to a google search which turned up another stack overflow post:

http://stackoverflow.com/questions/463800/jquery-document-ready-failing-in-ie6

It seems moving my script to the bottom of the page and removing the document.ready fixed it!!

Many thanks and apologies I should have googled this more thoroughly :)

elduderino
Don't forget to accept your answer! :-)
Christopher Parker
It says I can't accept it for 2 days
elduderino
+1  A: 

For me this did not work well in IE7 either! However, I was able to make it work properly by setting the id's of the list items in the markup. Element ID's shouldn't be the kind of things change often, so perhaps this can be done, rather that set it in the onload function... Is there some reason you were doing it that way?

<body>          
 <ul id="accordion">     
  <li id="handle1">
    <a href="#">df1</a>
    <div>content1
    </div>
  </li>     
  <li id="handle2">
    <a href="#">df2</a>
    <div>content2
    </div>
  </li>       
  <li id="handle3">
    <a href="#">df3</a>
    <div>content3
    </div>
  </li>        
  <li id="handle4">
    <a href="#">df4</a>
    <div>content4
    </div>
  </li>         
  <li id="handle5">
    <a href="#">df5</a>
    <div>content5
    </div>
  </li>               
  <li id="handle6">
    <a href="#">df6</a>
    <div>content6
    </div>
  </li>        
</ul>       

Java Drinker
Hi, I didn't get a chance to test ie7 but I imagine it's the same problem as ie6 was having. Thanks for letting me know! I'm dynamically assigning those id's so it's nice and easy to use in the future. I usually put things like this in plugins so it can be re-used by other developers in my workplace who aren't very adept at js.
elduderino