html horizontal menu showing up vertically on firefox 4

Question

i just went to test a website in firefox 4 (beta 10) and the horizontal menu is showing up vertically.

In chrome, the menu is horizontal like this:

but in firefox 4 it shows up like this:

I am using the superfish horizontal menu. The examples on the website seems fine in firefox 4.

how would i begin to investigate if this is a bug in firefox 4 or is there something wrong with my horizontal menu code??

Answer 1

I don't think your problem is with superfish or the underlying suckerfish. A quick look indicates that <div id="title"> is floated to the left but the floats aren't cleared between that and <table id="menuHeader">. The #menuHeader table and hence the <ul> are positioned right beside #title in Firefox so the table doesn't get enough width for the floats to layout horizontally.

As a quick hack you can stuff a <br/> right before #menuHeader:

<br /><table id="menuHeader">

and you should see the Firefox problem go away. However, you should explicitly clear your floats somewhere sensible after #title and before #menuHeader. Clearing between #header and #flashwrapper seems appropriate:

<div id="header">
    <!--...-->
</div>
<div style="clear: both;"></div>
<div id="flashwrapper">
    <!--...-->
</div>

You might be able to use an overflow:hidden clear fix for this too but I tend to prefer explicit clearing even if it does pollute my HTML with styling information.

And as far as how to debug this sort of thing goes, the DOM inspector in WebKit browsers (such as Chrome and Safari) is freakin' awesome. Firebug's DOM inspector is also pretty good. In a case like this, you'll want to use them both concurrently. DOM inspectors, guess work, experience, and lots of swearing are my tools for figuring out things like this.