animatedcollapse.js problem with IE8 / Firefox

[GreenG]

1) Script Title: animatedcollapse.js

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem: I have been working on new menus using the animatedcollapse.js. I'm still in the process of building them but trying to fix a problem that only show up in IE8 and Firefox. It works just fine in IE7 and passes W3C Validation. the URL is http://www.mistergreengenes.com/mm5/menus/Leftside/leftmenu.html The problem is the gaps between the graphics and also when the DIV expands. Any ideas would be great.

Thanks

[azoomer]

Part of the problem can be alleviated by putting a css reset on the top of the stylesheet. I use a Meyer reset that looks like this

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" ""
}
It is helpful in making things look the same in different browsers.

There might still be small gaps left but those are probably due to transparent regions in the png's