CiviCRM Community Forums (archive)

After the upgrade from 3.0.4 to 3.1 (Drupal 6.14) all of our contribute pages have formatting problems.  It seems that CiviContribute isn't breaking between the page components, so they display off the right side of the screen, overlap, etc.  I've reproduced this in several different Drupal themes, a picture of the problem is attached. The pages displayed correctly in 3.0 and 2.2.

I recognize that there were some templating and theming changes made in 3.1 as described here: http://civicrm.org/node/693 - and I've used the sample code in those examples in my extras.css files to try and address the problem with some minor improvement but still a broken display. I don't have access to my system logs to see if it's throwing an error, it seems to me like maybe Civi isn't loading some of the needed style sheets or something.

Any suggestions on how to approach troubleshooting this?

Firefox's Firebug plugin is your best bet for debugging css issues like this. You can easily see what css files are applying what styles etc.

Very helpful - thx for posting back on this!

Can you see if changing these lines in civicrm.css fixes things - w/o needing the change in your template theme css file.

Instead of this:
#crm-container .section {
margin-bottom:1em;
}
#crm-container .section .section {
margin-bottom:0.5em; /* make subsections sit closer together */
    }


... try this:
#crm-container div.section {
margin-bottom:1em;
}
#crm-container div.section .section {
margin-bottom:0.5em; /* make subsections sit closer together */
    }


Shawn - thx for trying that. It seems like we may need to modify the class names in a future release to use something more 'specific' than .section (.crm-section for example). Based on our understanding of CSS cascading, we 'should' have been safe using .section since we've preceded it with our #crm-container ID - but seems like in some cases things are not working as expected. For now, I guess stick w/ your change to the drupal theme css file.

(If you're ok posting a link to this contrib page - might help us understand a bit more.)

I'm having the same issue in Joomla.  The page displays fine in Firefox but not IE...
I'm not a css guru, but was able to narrow the issue down to the following CSS entry..
#crm-container .section .content {
   margin-left:16%;
    }

Any ideas?

I recently had this problem on a Drupal installation and tried all the steps above to no avail.

If modifying the css doesn't seem to be working, go to www.yoursite.com/admin/settings/performance and see if the option to Optimize CSS Files is on.  If it is, turn it off and check your contribution page again and see if it worked.  If so, you can go back and turn the Optimize CSS Files back on again.