Javascript Help -- IE Being Stupid

[racketboy]

I'm putting in some collapsibile category menus on my right-hand column of my blog:

See here

In Firefox, the menu seems to work fine.

However, in IE the "Platforms" one is just displayed like it's always expanded and doesn't collapse.

Here's the main Javascript routine in the HEAD area:

<script language="JavaScript" type="text/javascript">

<!--

if (document.getElementById) {

 document.writeln('<style type="text/css"><!--')

 document.writeln('.links {display:none; padding-left:14px}')

 document.writeln('.link {text-decoration:none}')

 document.writeln('a:hover.link {text-decoration: underline }')

 document.writeln('//--></style>') }

function openClose(theID) {

 if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }

 else { document.getElementById(theID).style.display = "block" } }

// -->

</script>

And then here's the menu part:

 <b class="sidebar-title">Categories[/b]

 <ul> 

 [*][url=http://www.racketboy.com/retro/2004/07/category-sega.html]Sega[/url]

 [*][url=http://www.racketboy.com/retro/2004/07/category-nintendo.html]Nintendo[/url]

 [*][url=http://www.racketboy.com/retro/2004/07/category-portable.html]Portable Gaming[/url]

 [*][url=http://www.racketboy.com/retro/2004/07/category-hacks.html]Hacks[/url]

 [*][url=http://www.racketboy.com/retro/2004/07/category-emulation.html]Emulation[/url]

 [*]<div onClick="openClose('a3')" style="cursor:hand; cursor:pointer">+ <span onMouseOver="this.style.textDecoration='underline';" onMouseOut="this.style.textDecoration='none';">Platforms</span></div>

   <div id="a3" class="links">

    [*][url=http://www.racketboy.com/retro/2004/07/category-nes.html]NES[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-genesis.html]Genesis[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-snes.html]SNES[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-sega-cd.html]Sega CD[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-saturn.html]Saturn[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-playstation.html]Playstation[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-n64.html]N64[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-dreamcast.html]Dreamcast[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-ps2.html]PS2[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-gamecube.html]Gamecube[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-xbox.html]XBox[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-xbox-360.html]XBox 360[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-revolution.html]Revolution[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-gameboy.html]Gameboy/GBA[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-nintendo-ds.html]Nintendo DS[/url]

    [*][url=http://www.racketboy.com/retro/2004/07/category-psp.html]Sony PSP[/url]

    </div>

 [/list]

Also worth mentioning is that my other menus that are slightly different work fine in IE (I'm including the Blogger template code, but you'll get the idea)

 <b class="sidebar-title"><div onClick="openClose('a1')" style="cursor:hand; cursor:pointer">+ <span onMouseOver="this.style.textDecoration='underline';" onMouseOut="this.style.textDecoration='none';">Previous Posts[/b]</span></div>

    <div id="a1" class="links">

 <ul id="recently">

  <BloggerPreviousItems>

    [*][url=<$BlogItemPermalinkURL$>]<$BlogPreviousItemTitle$>[/url]

   </BloggerPreviousItems>

 [/list]    </div>

Any ideas?

 

[racketboy]

ok, I basically got it to work by using nested ULs

but I'm gonna have to tweak the indent -- its currently more than I would like