If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Sliding Navbar/Menu Not Working in IE

I am new to javascript and am eager to learn. I know I could probably just use jQuery to make this cross-browser but I would like to learn the ins and outs of javascript before abstracting them away.

Our website currently has a navbar that is coded in HTML on every single webpage so changing it means changing every single webpage. So I want to make this more dynamic (and animated) by using javascript.

The problem is that IE is not cooperating. Specifically, IE loads everything alright but does not slide. It just loads the whole submenu instantaneously after a user clicks. Firefox works perfectly. At the top of my test page is a doc type statement inherited from the real index

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Oddly enough, if I put anything in front of that HTML 4.01 part, it works in IE... If I change it to XHTML or QHTML it will start working. The javascript is below. Basically, it loops through the links array and builds the navbar by creating an unordered list and assigning events. After a user clicks a menu, the page it directs to calls the makeMenu function and the fireMyEvent function to "click" that menu after it is created on the new page. This way I can keep certain submenus open across pages.

Thank you for the notes, Kor. I wanted to post a follow up as I have since solved the issue. The sliding animation is simply a loop that increments the pixel height of the menu elements. I noticed that IE was bumping the elements to a predetermined height and not incrementing.

After several hours of googling, I was able to determine that IE does not like it when a font size is larger than the tag size. When I set the font size to 1px initially and incremented the font size along with the tag size, everything worked in all browsers. Alternatively, you can also set the font to 1px initially and then once the looping starts to happen you can change it to "x-small" or something like that. Hope this helps someone!