Some of my users have updated their Firefox to FF3 and are experiencing an issue with suckerfish menus. Instead of being horizontal across the nav area, they are stacked on top of each other to the left. Any ideas?

Comments

MindArchr’s picture

MindArchr commented

Hi,
Although I'm not a Drupal user, I was experiencing this exact same problem in Joomla with horizontal menus. I found this thread: http://forum.joomla.org/viewtopic.php?f=42&t=299330
and it solved the problem flawlessly. Basically, just do this (as quoted from the thread):

"Firefox renders pages as they download, and for some reason it isn't rendering the float: lefts when it receives adjacent items in different chunks (an incremental reflow bug). If the menu is received in multiple parts, it will be split into those parts. A slow host or certain buffering settings might make the problem worse.

You can reproduce the problem by putting something like flush(); sleep(1); half-way between your menu.

To fix it, put this right after your menu's HTML:

.reflow { display: none; } var body = document.getElementsByTagName("body")[0]; var bodyClass = body.className; body.className = "reflow"; setTimeout(function() { body.className = bodyClass; }, 1);

It'll force Firefox (tested on 3.0) to reflow the document."

Hope this helps others as it helped me.

stevryn’s picture

stevryn commented
Status: Active » Closed (fixed)

Thanks to a co-worker we have fixed this issue on our site. Depending on which color you are using (in my case "blue") there is a specific css file (in my case suckerfish_blue.css found in the css folder of the theme) which needed the following line added:

find this:

#suckerfishmenu ul.menu { /* top level ul */
padding: 0 0 0 0px;
list-style: none;
z-index: 1000;
display: inline;

And add this:
float: left;

There may be some other minor adjustments needed but this gets the menu horizontal and worked for us.

fassoni’s picture

fassoni commented
Project: Denver » Tapestry
Version: 5.x-1.x-dev » 6.x-1.x-dev
Component: User interface » Code

i've same problem....

i add this: float: left; but nothing happens

why?

_plucky’s picture

_plucky commented

I had this same issue, and the 'float: left;' didn't work for me as stated above,
but it DID work once I put it in the .block section of the suckerfish.css, so mine
looks like this now:

#suckerfishmenu	.block {
  margin-bottom: 0;
  padding-bottom: 0;
  float: left;
}

Poof! It's working in FF3 and IE7 now (it was fine in IE7 before, but this didn't
break it ;) ).