Accoridion menu spacing changes only after being opened and closed

[pm813]

1) Script Title: Accordion Menu script (v1.7)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...daccordion.htm

3) Describe problem: I am using the accordion menu script, and everything about it is working perfectly - on Safari, including the gaps between the menus that I want. However, when viewing on the latest internet explorer (on vista), the menu loads up with perfect gaps as I want them, however once the menus have been opened, when they close the gap between the menu bars disapears and they end up touching each other. I'm at a loss, as I can't see anything in the script that would cause the gap to change only after being opened and closed.

(I have preset the first menu bar to be open when the page loads, but I can't see how this would effect anything). - Oh, and I have put the script inside a table, but again, wouldn't have thought this would make a difference - especially as it's ok in Safari.

The page I have used the script on is: http://www.architectureone.co.uk/projects.htm

If anyone knows how to resolve this I would be eternally grateful!

[ddadmin]

Ah, but it does have something to do with the fact that the contents you're expanding/ contracting are tables in IE actually. I've run into the same issue as well in the past- it seems when you hide a table (using CSS's display:none property) in IE and reveal it again, the original margins/ paddings are lost for some reason. You might try styling the container DIV (class="theborder") in some way that overcomes this, though honestly, it's probably best that you just replace the tables with floating DIVs that accomplish the same thing. Instead of a bunch of table cells for example, you can do the same using DIVs and CSS, something like:

<div style="width:90px; height:90px; float:left"><img src="buttons/soon.jpg" width="83" height="83" border="2" style="border-color: white"></div> 
<div style="width:90px; height:90px; float:left"><img src="buttons/soon.jpg" width="83" height="83" border="2" style="border-color: white"></div> 
etc

[pm813]

thanks... I'll give it a go... but I have noticed that on the example page for the accordion script itself (http://www.dynamicdrive.com/dynamici...daccordion.htm), the spaces alter once opened and closed in the latest IE - and this hasn't got any tables in.

Maybe I'll try putting some breaks in see if that helps... will let you know.

Interestingly, I found another accordion script on the internet, http://www.stickmanlabs.com/accordion, and that does work in IE I have and maintains its spacing once opened and closed... but its a bit of a mess to customise for novices like me... and besides, you don't get the service as you do on here... so I'll remain loyal and persevere with this!

[Myke Black]

Hi, I noticed the same issue, it only happens when using Internet Explorer 8.
IE7, IE6 and Firefox latest version all work fine, so I assume is it a bug with IE8 - possibly losing the margin style of the H3 tag maybe? If you specify a height and margin attribute for the section header in the css, that might fix it.

The IE8 bug is also evident on this menu: http://www.dynamicdrive.com/dynamici...enu-bullet.htm.

[ddadmin]

Interesting, I didn't realize the issue occurred on the DD demos as well (which it does in IE8 like you said). I'll look into the issue more closely tonight. Should have a resolution very soon. I'll post an update when that happens.

[ddadmin]

Ok, I've updated the .js file to v1.7.1 which should for the most part fix the issue in IE8. I say for the most part, because this seems to be a rendering bug in IE8, and not with the script itself. Basically in IE8 if you're changing the header's style (ie: update its CSS class, prefix it with a bullet image etc) as it's expanding/collapsing, then at the end of the animation the DIV loses its margins for some reason. The fix for now is to do the former before the expanding/collapsing takes place.

Let me know if it works. Attached is the file.

[Myke Black]

hi, i figured out a simple fix to make it work in IE8, basically, you need to insert an empty div layer between each div eg:

<div class="glossymenu">
  <a class="menuitem submenuheader" href="/box1">Box 1</a>
    <div class="submenu">
      <ul>
        <li><a href="/box1/link1">link 1</a></li>
        <li><a href="/box1/link2">link 2</a></li>
        <li><a href="/box1/link3">link 3</a></li>
				
      </ul>
    </div>

    <div></div> <!-- this is the empty div required for IE8 -->

  <a class="menuitem submenuheader" href="/box2">Box 2</a>
    <div class="submenu">
      <ul>
        <li><a href="/box2/link4">link 4</a></li>
        <li><a href="/box2/link5">link 5</a></li>
        <li><a href="/box2/link6">link 6</a></li>
				
      </ul>
    </div>

    <div></div> <!-- this is the empty div required for IE8 -->

  <a class="menuitem submenuheader" href="/box3">Box 3</a>
    <div class="submenu">
      <ul>
        <li><a href="/box3/link7">link 7</a></li>
      </ul>
    </div>

</div>

alternatively, try to make the menu without relying on the margin attribute. If you have a repeating background image on the submenuheader class, you cant use padding instead of margin, but you can add a height attribute to the class and make the background image non repeating sometimes.