Problem with vertical css menu & sectionheader & IE6

[jack4ya]

The default installation also shows the problem:

Try making a section header and open the site in IE6... When you hover over the section header, things start to shift up!

Any ideas?

[RonnyK]

I think you are referring to the 3px jog problem of IE6. Several posts mention it and have solutions for it.

Ronny

One link to a recent post:

http://forum.cmsmadesimple.org/index.ph ... l#msg49519

[jack4ya]

The 3px jog isn't the problem. (Allthough I had that problem, that is fixed now)

I really mean the sectionheader, when you hover the sectionheader, it collapses, and everything below shifts up.

Ow also the concerning templates is CSSMenu left + 1 column.

To have a look, change settings at demo.opensourcecms.com/cms/ (login with demo/admin)
(this is a playable demo, which resets everytime or so)
- to all pages apply: CSSMenu left + 1 column
- add an sectionheader somewhere in the middle (so there is at least one menu item below it)
Go to the front and test it.

[jack4ya]

The problem lies in the javascript. And I think the solution should be included in the core also!


var cssid = "primary-nav"; // CSS ID for the menuwrapper
var menuadd = "h";  // Character to be added to the specific classes upon hovering. So for example, if this is set to "h", class "menuparent" will become "menuparenth" when hovered over.
var menuh = "menuh"; // Classname for hovering over all other menu items

if (window.attachEvent) window.attachEvent("onload", cssHover);

function cssHover() {
  var sfEls = document.getElementById(cssid).getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {

    if(sfEls.className.indexOf("sectionheader") == -1){

      sfEls.onmouseover=function() {
        if (this.className != "") {
            this.className = this.className + menuadd;
        }
        else { 
            this.className = menuh;
        }
      }

      sfEls.onmouseout=function() {
        if (this.className == menuh) {
            this.className = "";
        }
        else {
            this.className = this.className.replace(new RegExp(menuadd + "$"), "");
        }
      }
  }
  }
}