14 replies [Last post]
jbjones
Offline
newbie
Last seen: 15 years 38 weeks ago
Timezone: GMT-5
Joined: 2006-03-12
Posts: 10
Points: 0

I have a design on my testing site http://modx.acgi.org

The two separate menus across the top seem to be working fine in FireFox 1.5, but seem to be almost unrecognizable in Internet Explorer.

I was wondering if someone could help me figure out what is going on in Internet Explorer and how I can fix it?

- Jeff

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

CSS Menu Problems in IE

Hi Jeff,
You have used an class of dropmenu instead of an id.
Change <ul class="dropmenu"> to <ul id="dropmenu"> and you should get it working.

jbjones
Offline
newbie
Last seen: 15 years 38 weeks ago
Timezone: GMT-5
Joined: 2006-03-12
Posts: 10
Points: 0

CSS Menu Problems in IE

Well the CMS is feeding the names as a class rather than an ID.

Is there any way to get it to work as a class?

By the way. I did find a missing float tag in the li a tags which helped slightly on the layout. At least it's recognizable now. But it's still not completely right in IE.

- Jeff

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CSS Menu Problems in IE

Presumably, change "#dropmenu" to ".dropmenu" in your css.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jbjones
Offline
newbie
Last seen: 15 years 38 weeks ago
Timezone: GMT-5
Joined: 2006-03-12
Posts: 10
Points: 0

CSS Menu Problems in IE

Ok. I seem to be getting much better alignment now in both browsers. But...

TOP MENU

In Firefox the left edge of the button will swap without the text area if hovered in that area. When hovering over the text it swaps out both images fine.

In IE something is still not shifting images properly during the hover.

SECOND MENU

In Firefox the only dislike is a thick bar to the left of the drop down menu items. And the highlight doesn't extend all the way. Presumably the highlight will fix itself when the thick left bar is reduced to 1px.

In IE The first level of this secondary menu seems to be looking good finaly. BUT, I'm not getting the drop downs at all. I'm guessing something about the javascript isn't correct, but I don't know the language.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

CSS Menu Problems in IE

Hi Jeff,
Yes it is to do with the javascript.
Currently the javascript looks for an element with the ID of dropmenu.
if you have to use a class change your javascript to look for the class rather then the id.
Something along these lines.

startList = function() {
if (document.all&&document.getElementById) {
var uls=document.getElementByTagName("UL");
for (var x=0; x <uls.length; x++){
   if(uls[x].className=="dropmenu"){
      navRoot = uls[x];
      for (i=0; i<navRoot.childNodes.length; i++) {
         node = navRoot.childNodes[i];
         if (node.nodeName=="LI") {
            node.onmouseover=function() {
            this.className+=" over";
         }
          node.onmouseout=function() {
             this.className=this.className.replace»(" over", "");
         }
      }
    }
  }
}
}
window.onload=startList;

I haven't tested this so it is quite possible that it contains typo's.

jbjones
Offline
newbie
Last seen: 15 years 38 weeks ago
Timezone: GMT-5
Joined: 2006-03-12
Posts: 10
Points: 0

CSS Menu Problems in IE

Thanks for the help. I have no clue where to even begin when it comes to JavaScript.

However, I having the site running with the new suggested code and it still doesn't seem to enable a drop down menu in IE 6.

P.S.

Tony,
This is sort of beside the task of fixing the javascript. But I was wondering if you could also comment on what the script was doing. I took a semester of Basic and a semester of C in college, but I'm getting lost in what the script is asking for and doing. .... if you have time.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

CSS Menu Problems in IE

Hi Jeff,
Sorry I didn't match up the {.
Here it is with comments:

startList = function() {
  /* if the browser supports the required functions */ 
  if (document.all&&document.getElementById) {
   /* get all the UL's as an array*/
    var uls=document.getElementByTagName("UL");
    /* step through all the UL's */
    for (var x=0; x <uls.length; x++){
      /* if the current UL has the correct class */
      if(uls[x].className=="dropmenu"){
        navRoot = uls[x];
        /* step through all the children of the ul */
        for (i=0; i<navRoot.childNodes.length; i++) {
              node = navRoot.childNodes[i];
              /* if it is a LI */
              if (node.nodeName=="LI") {
                  /* assign the onmouseover function to it */
                  node.onmouseover=function() {
                    this.className+=" over";
                  }
                  node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                  }
              }
        }
      }
    }
  }
}
/* Call startList when the page loads */
window.onload=startList; 

jbjones
Offline
newbie
Last seen: 15 years 38 weeks ago
Timezone: GMT-5
Joined: 2006-03-12
Posts: 10
Points: 0

CSS Menu Problems in IE

Still, for whatever reason it doesn't seem to be working. Is there some way to figure out what the browser is doing? To follow the process? To figure out if it's actually applying the onMousover to the LI s?

I'm just trying to figure out if it's even being activated.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

CSS Menu Problems in IE

Hi Jeff,
One thing you can do is put in alerts to show where the code is at.

 startList = function() {
   alert("startlist has been called");
...
var uls=document.getElementByTagName("UL"); 
alert("uls: "+uls.length);
...
 if(uls[x].className=="dropmenu"){ 
   alert("we found dropmenu");

jbjones
Offline
newbie
Last seen: 15 years 38 weeks ago
Timezone: GMT-5
Joined: 2006-03-12
Posts: 10
Points: 0

CSS Menu Problems in IE

Alright. I inserted the alerts and it displays the

startlist has been called
uls:6

then nothing else comes up. So I'm guessing it's not making it through the "IF" loop. Or something.

Man. I should have taken more programming classes in college.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

CSS Menu Problems in IE

Hi Jeff,
You hit the nail on the head.
I should have checked for dropmenu using indexOf.
if(uls[x].className.indexOf("dropmenu")>=0){
Slowly we should be getting somewhere.

jbjones
Offline
newbie
Last seen: 15 years 38 weeks ago
Timezone: GMT-5
Joined: 2006-03-12
Posts: 10
Points: 0

CSS Menu Problems in IE

Well we are now making it to the third alert but I still don't have a dropdown showing up.

I put another alert in below the next IF loop

if (node.nodeName=="li") {
	alert("we found the li");

But it's not making it to that alert. Any ideas? And are there some other good alert locations that would be helpful for diagnosis?

A coulple of other questions though for this code:

navRoot = uls[x];
for (var i=0; i < navRoot.childNodes.length; i++) {
     node = navRoot.childNodes[i];

Is "navRoot" a variable or a built in browser/javascript tag. I was wondering since it didn't have var before it to set it up. And is "node" the same way?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

CSS Menu Problems in IE

Hi Jeff,
At the closing } for that if statement put an else statement then an alert.

 if (node.nodeName=="LI") {
                  /* assign the onmouseover function to it */
                  node.onmouseover=function() {
                    this.className+=" over";
                  }
                  node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                  }
              } else{
           alert("Node name: "+node.nodeName);
        }

[/code]

jbjones
Offline
newbie
Last seen: 15 years 38 weeks ago
Timezone: GMT-5
Joined: 2006-03-12
Posts: 10
Points: 0

CSS Menu Problems in IE

Wow Tony. I think it's working. Finaly. Thank you for helping me work that stuff out. (and my friends called me a genius. apparently they havn't really met one yet)

Anyway, I think I have it working now as far as the mechanics go. But the CSS isn't quite right.

I think I might start a new topic to get past all that javascript code in case someone is browsing later.