PDA

View Full Version : Chromemenu shows menus messed up in Firefox 3



seraph
08-19-2009, 04:26 AM
1) Script Title: Chrome CSS Drop Down Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/chrome/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/firefox_menu_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
08-19-2009, 07:58 AM
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
08-19-2009, 08:05 AM
It's happening *very* often. I'm using Firefox 3.0.12....

seraph
08-19-2009, 08:12 AM
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
08-19-2009, 11:12 PM
Anyone has any comment? The problem is still happening for me on 3.0.13...

ddadmin
08-20-2009, 08:06 AM
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
08-21-2009, 02:23 AM
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
08-21-2009, 08:11 AM
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
08-22-2009, 03:01 AM
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
08-22-2009, 07:20 AM
That'd be 1).

seraph
08-27-2009, 01:29 AM
Dunno if you wanna give it one more try to see for yourself. I noticed that it occurs more frequently the first time you open the page. So if you open up a new firefox browser window and go to that website or if you go from another website to this website, it's more likely to reproduce that problem.

I haven't made a decision on whether to collapse the code to plain html as you suggested because I know it'll mess up the look on Chrome.