Contribution page display problems after 3.0 - 3.1 upgrade

[cspence]

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?

[Kiran Jagtap]

can u confirm your Resource URLs, go to  Administer CiviCRM -> Global Settings -> Resource URLs

related demo site url is here : http://drupal.demo.civicrm.org/civicrm/admin/setting/url?reset=1

kiran

[Dave Greenberg]

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.

[mikeney]

I can confirm that this problem was remedied in Joomla by being certain that the CiviCRM CSS style #crm-container.section loads AFTER your template's declaration of div.section.  Thus in your site's main template:

Replace:

div.section {
       float: left;
}


With this:

div.section {
       float: left;
}
#crm-container .section {
       float: none;
}

[Dave Greenberg]

Very helpful - thx for posting back on this!

[sonicthoughts]

yes, adding that to the bottom of my drupal theme css file is a valid fix / workaround.  thanks!

[Dave Greenberg]

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:

Code: [Select]

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


... try this:

Code: [Select]

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


[sonicthoughts]

Tried this, but it didn't help (made it a bit worse.)  sorry but not a css guru but happy to try something else

[Dave Greenberg]

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.)

[cspence]

Thanks for everyone's contributions and assistance. We were successful in cleaning up our contribute pages (and CiviEvents pages, incidentally) using the fixes mentioned above, specifically adding both entries to theme's style.css

div.section {
       float: left;
}
#crm-container .section {
       float: none;
}

#crm-container div.section {
        margin-bottom:1em;
        }

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

[Maggs167]

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?

[ken]

See my post at http://forum.civicrm.org/index.php/topic,12177.msg53220.html#msg53220 which includes a patch to civicrm.css

Also, try the fix to CRM-5828 at http://issues.civicrm.org/jira/browse/CRM-5828?page=com.atlassian.jira.plugin.system.issuetabpanels%3Aall-tabpanel (I haven't tried this, but will be released with 3.1.3)

Ken

[Jon Rodriguez]

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.