I am on a fresh and current install of Drupal 6.14. Loaded up Fusion 6.x-1.0-beta2 and Acquia Prosper 6.x-1.0-beta2 themes. In Firefox all is well however in IE7 and IE8 on two different computers all of the regions collapse in to a single column. For instance the "SIDEBAR LAST" region renders below "CONTENT TOP", etc. I have deleted and reinstalled the themes, rebuilt all cache, ran cron, update, etc. I have no performance tweaks enabled like CSS caching. It is a fresh install with just a few nodes added. The issue persists with Acquia Prosper, Fusion Starter, and Fusion Core.

I hope I am missing something obvious. I am excited to try the Fusion core theme on a few projects.

Thanks!

Comments

jeremycaldwell’s picture

jeremycaldwell commented

Very interesting you are having these issues. I just downloaded Fusion and Acquia Prosper and set up a fresh install of Drupal 6.14 and everything worked as it should in all browsers including IE6, IE7, and IE8. I enabled the Fusion theme as well as the Acquia Prosper theme but set Acquia Prosper as the default theme. Hopefully you missed that step and it's causing the issue. Make sure both themes are enabled as Acquia Prosper requires Fusion.

stephthegeek’s picture

stephthegeek commented

Also you may want to turn *on* CSS aggregation or the CSS combination feature under the developer section in the theme settings and see if that helps. IE has a maximum CSS file limit and if you have more than a few modules with CSS files installed, you may be hitting that limit.

InTheLyonsDen’s picture

InTheLyonsDen commented

Thanks for your feedback!

Very interesting... rolled the themes out on another fresh build (with only 1 node of content) and had no issues.

On my "problem" site I enabled the "Avoid IE stylesheet limit" and it is now working in IE. Turn off the feature and it breaks again. Enabled "Optimize CSS files" in admin/settings/performance and the problem goes away.

I have not altered or started styling the theme. Does anyone know what would cause this? It seems like I had a similar issue with a Zen based theme a few months back. I will still move forward with the build but would like to know why.

Thanks!!!

jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Fixed

Sounds like what stephthegeek suggested was the culprit. IE stylesheet limit might have been reached when enabling the modules on your site so it stopped loading them after a certain point and since the theme's stylesheets are loaded last they failed to load. Glad it's working on your other site though, just keep an eye on the amount of stylesheets.

InTheLyonsDen’s picture

InTheLyonsDen commented

Thanks StephTheGeet et al!

I did realized that I had just enabled a handful of Ubercart modules which are heavy on style sheets.

Thanks all!

sociotech’s picture

sociotech commented
Status: Fixed » Active

InTheLyonsDen,

This is a longstanding issue with IE browsers: they can't handle more than 31 stylesheets.

So in a modern CMS with a modular approach to stylesheets, they go over that limit.

Assuming reducing the number of stylesheets is not an option, you have three choices:

  • Turn on Drupal's CSS aggregation
  • Combine the stylesheets with a module (e.g., IE Unlimited CSS Loader )
  • Use a theme that has that feature built-in (e.g., Fusion)

The strongly recommended solution is to use Drupal's CSS aggregation. Other approaches can introduce problems with incorrect ordering of the stylesheets.

The "Avoid IE stylesheet limit" in the Developer section of Fusion's theme settings is not recommended for production use and is there only as an aid to development.

sociotech’s picture

sociotech commented
Status: Active » Fixed

Assuming this is no longer an issue.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Sarenc’s picture

Sarenc commented

For those who need to theme with IE and still have issues using the @import method you can always turn on css aggregation then in a module clear the css cache every page load:

/*
 * Implementation of hook_init().
 */
function mymodule_init() {
  drupal_clear_css_cache();
}