IE Issues with CSS

phpuser2000 · December 19th, 2007, 12:13 PM

I have created a collapsible list using CSS. The list seem to work fine on Firefox. But on IE6 , the bottom for "More" collapsible list disappears, when you expand them all and collapse them.

Could anyone help me tweak this for IE?

Thanks in advance and here is the code below

<body onLoad="makeCollapsible(document.getElementById('l eftrail'));">

<ul id="leftrail">
                                     <li>
    <div id="leftraildiv"> Products </div>
                                        [list]<li><a href="#">News 1</a></li>
                                        <li><a href="#">News 2</a></li>
                                        <li><a href="#">News 3</a></li>
                                     </ul>
                                    </li>
                                    <li>

                                    <div id="leftraildiv">More Information Etc </div>
                                                    [list]
                                        <li><a href="#">More 1</a></li>
                                        <li><a href="#">More 2</a></li>
                                                                            </ul>

                                     </li>
                                    </ul>

===== Javascript part-->
// JavaScript Document for Collapsible list

/* CLOSED_IMAGE - the image to be displayed when the sublists are closed
* OPEN_IMAGE - the image to be displayed when the sublists are opened
*/
CLOSED_IMAGE='./images/plus2.png';
OPEN_IMAGE='./images/minus2.png';

/* makeCollapsible - makes a list have collapsible sublists
*
* listElement - the element representing the list to make collapsible
*/
function makeCollapsible(listElement){

  // removed list item bullets and the sapce they occupy
  listElement.style.listStyle='none';
  listElement.style.marginLeft='0';
  listElement.style.paddingLeft='0';

  // loop over all child elements of the list
  var child=listElement.firstChild;
  while (child!=null){

    // only process li elements (and not text elements)
    if (child.nodeType==1){

      // build a list of child ol and ul elements and hide them
      var list=new Array();
      var grandchild=child.firstChild;
      while (grandchild!=null){
        if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){
          grandchild.style.display='none';
          list.push(grandchild);
        }
        grandchild=grandchild.nextSibling;
      }

      // add toggle buttons
      var node=document.createElement('img');
      node.setAttribute('src',CLOSED_IMAGE);
      node.setAttribute('class','collapsibleClosed');
      node.onclick=createToggleFunction(node,list);
      child.insertBefore(node,child.firstChild);

    }

    child=child.nextSibling;
  }

}

/* createToggleFunction - returns a function that toggles the sublist display
*
* toggleElement - the element representing the toggle gadget
* sublistElement - an array of elements representing the sublists that should
* be opened or closed when the toggle gadget is clicked
*/
function createToggleFunction(toggleElement,sublistElements ){

  return function(){

    // toggle status of toggle gadget
    if (toggleElement.getAttribute('class')=='collapsible Closed'){
      toggleElement.setAttribute('class','collapsibleOpe n');
      toggleElement.setAttribute('src',OPEN_IMAGE);
    }else{
      toggleElement.setAttribute('class','collapsibleClo sed');
      toggleElement.setAttribute('src',CLOSED_IMAGE);
    }

    // toggle display of sublists
    for (var i=0;i<sublistElements.length;i++){
      sublistElements[i].style.display=
          (sublistElements[i].style.display=='block')?'none':'block';
    }

  }

}