Chromemenu shows menus messed up in Firefox 3

[seraph]

1) Script Title: Chrome CSS Drop Down Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem:

On www.unicomamerica.com, I'm using chrome css drop down menu on the top horizontal menu bar. If you view it with Firefox 3, you'll see that frequently the menus are messed up. Like, the "Contact Us" and "About Us" menus would fall outta place and went to the left. For example, it would look like this:

http://www.seraph-consulting.com/fir...nu_problem.jpg

This happens on Firefox 3. IE and Chrome seems fine. And if I just refresh the browser, it would eventually go away. And then it would reappear.

Please help help help!

[ddadmin]

Using FF 3.0313, I viewed your page a few times, though wasn't able to catch the problem you've described. How common does it pop up?

[seraph]

It's happening *very* often. I'm using Firefox 3.0.12....

[seraph]

I just upgraded to 3.0.13. It appears to show up less frequently now. But after clicking through a few pages, I noticed that it did it once.

[seraph]

Anyone has any comment? The problem is still happening for me on 3.0.13...

[ddadmin]

I still can't duplicate the problem on my 3.0.13. Looking at your screenshot, it seems the "Contact Us" item has spilled over to the next line. Have you tried tinkering with the CSS of the menu to see if that changes anything? This looks like a CSS issue, rather than script.

[seraph]

That's exactly what happened. Sometimes more menus will get spilled over to the next line.

And everytime I see it, I refresh the browser, and usually it'll go away but will come back later.

It's happening to me frequent enough to notice it...

I don't know what to tweak for CSS for this problem.... basically since I don't know what's causing this problem to begin with....

Please let me know if you have any other ideas.... Thanks.

[ddadmin]

Well, looking at your source code, my best guess for your issue is due to the fact that you're dynamically writing out the individual LIs of the main menu bar:

    <div class="chromestyle" id="chromemenu">
      <ul>

        <script type="text/javascript">
        <!-- 
          if (BrowserDetect.browser == 'Chrome') {
            document.write('<li><a href="/">Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>');
          } else {
            document.write('<li><a href="/">Home</a></li>');
          }
        // -->
        </script>

        <script type="text/javascript">
        <!-- 
          if (BrowserDetect.browser == 'Chrome') {
            document.write('<li><a href="ps.html" rel="dropmenu1">Products &amp; Services&nbsp;&nbsp;&nbsp;&nbsp;</a></li>');
          } else {
            document.write('<li><a href="ps.html" rel="dropmenu1">Products &amp; Services</a></li>');
          }
        // -->
        </script>

        <script type="text/javascript">
        <!-- 
          if (BrowserDetect.browser == 'Chrome') {
            document.write('<li><a href="partners.html" rel="dropmenu2">Partners Central&nbsp;&nbsp;&nbsp;&nbsp;</a></li>');
          } else {
            document.write('<li><a href="partners.html" rel="dropmenu2">Partners Central</a></li>');
          }
        // -->
        </script>

        <script type="text/javascript">
        <!-- 
          if (BrowserDetect.browser == 'Chrome') {
            document.write('<li><a href="newsevents.html">News &amp; Events&nbsp;&nbsp;&nbsp;&nbsp;</a></li>');
          } else {
            document.write('<li><a href="newsevents.html">News &amp; Events</a></li>');
          }
        // -->
        </script>
    
        <script type="text/javascript">
        <!-- 
          if (BrowserDetect.browser == 'Chrome') {
            document.write('<li><a href="careers.html">Careers&nbsp;&nbsp;&nbsp;&nbsp;</a></li>');
          } else {
            document.write('<li><a href="careers.html">Careers</a></li>');
          }
        // -->
        </script>

        <script type="text/javascript">
        <!-- 
          if (BrowserDetect.browser == 'Chrome') {
            document.write('<li><a href="#" rel="dropmenu6">About Us&nbsp;&nbsp;&nbsp;&nbsp;</a></li>');
          } else {
            document.write('<li><a href="#" rel="dropmenu6">About Us</a></li>');
          }
        // -->
        </script>

    
        <script type="text/javascript">
        <!-- 
          if (BrowserDetect.browser == 'Chrome') {
            document.write('<li><a href="contact.html">Contact Us&nbsp;&nbsp;&nbsp;&nbsp;</a></li>');
          } else {
            document.write('<li><a href="contact.html">Contact Us</a></li>');
          }
        // -->
        </script>
    
      </ul>
    </div>

While theoretically this should be no different than just embedding the HTML directly (without the use of JavaScript), using JavaScript to write out HTML is not as reliable, and my guess is, during those rare occasions the browser makes an error outputting your HTML, the menu "breaks". As mentioned, I have yet to experience this myself.

I'd try to replace the main menu bar so all the LIs are literally defined.

[seraph]

Hm. The only reason why that was done was to get the menu to show correctly on Chrome the browser. Without the extra spaces, the menus look different from the other browsers...

When you say "so all the LIs are literally defined.", which of the following do you mean?
1) just break it back down into plain HTML OR
2) you mean define the html code in a java script variable and then document.write the variable.

Just trying to clarify.

Thanks!

[ddadmin]

That'd be 1).