CiviCRM Community Forums (archive)

Phil - I find the Firebug plugin for Firefox to be a good tool for debugging css confilcts like this. You can "inspect" any element and modify the css in the browser to see what changes you need to fix problems.

Well, after many hours, I've figured something out. If I remove #mainmodules from the following line, the menus are visible again, but it throws a bunch of other things off in the site. It has something to do with the overflow: hidden property. When I change it to overflow: visible, I get the same effect (i.e. menus are visible, but it messes up other things).

#showmodules, #mainmodules, #mainmodules2, #mainmodules3, #mainmodules4 {overflow: hidden; margin-bottom: 20px;}

At least that's a start...

Phil

Phil - The problem is caused by a naming conflict between a css class used by your menu block and one used in civicrm.css.

You "menus" are inside this div:
<div class="spacer w33" id="mainmodules">

... with class of "spacer".
 
In css/civicrm.css - the spacer class is defined like this:

div.spacer, .spacer {
clear:left;
height:5px;
}

Removing "height:5px" fixes the problem. However if might cause some other (probably minor) spacing problems in CiviCRM pages. You could try changing the above to this (to narrow down the part of the page to which it applies):

#crm-container div.spacer, #crm-container .spacer {
clear:left;
height:5px;
}

I "discovered" this using Firebug within Firefox on your page - "Inspect Element" tool.