I'm not sure if this is a bug report or support request, though I assumed I am doing something wrong, so support request it is.

I have the problem that when I am an anonymous user the sidebar changes width to 180px, if I am logged in it is fine. I can also keep the site styled correctly by enabling page caching, block caching, compressing cached pages and aggregating and compressing CSS files. I could not find another working combination and enabling aggregation of javascript had no effect on the end result. I also experienced this problem on 7.x-2.1. I have this problem in the most recent versions of Chrome and Firefox on linux and do not currently have my VM's handy to test the IE's.

When I am logged in and access the site the stylesheets are like so:

@import url("http://example.com/example_site/sites/all/themes/adaptivetheme/adaptivetheme/css/at.layout.css?m0j0ra");</style>
<link type="text/css" rel="stylesheet" href="http://example.com/example_site/sites/default/files/at_css/mytheme.responsive.layout.css?m0j0ra" media="all" />
<style>@import url("http://example.com/example_site/sites/all/themes/adaptivetheme/adaptivetheme/css/at.messages.css?m0j0ra");

When the caching setup from above is disabled and I access the site as an anonymous user the stylesheets are like so:

<style>@import url("http://example.com/example_site/sites/all/themes/adaptivetheme/adaptivetheme/css/at.base.css?m0j0ra");</style>
<link type="text/css" rel="stylesheet" href="http://example.com/example_site/sites/default/files/at_css/mytheme.responsive.layout.css?m0j0ra" media="all" />
<style>@import url("http://example.com/example_site/sites/all/themes/adaptivetheme/adaptivetheme/css/at.layout.css?m0j0ra");

The problem is that at.layout.css moves to after the responsive stylesheet in the second scenario. This causes the styling in the responsive stylesheet which has the same specificity to be overridden by at.layout.css

I must also mention that for the very first page load as an anonymous user after clearing the cache (with all the performance options disabled) the page styling is correct.

This may be related to #1454550: sidebar width is on IE8 different with agregated css-files and I do not currently have a site online with which I can demonstrate the problem. I have looked through pretty much all the code I think, I think the problem could lie in respond.js, if it is indeed a bug, but I'm having a bit of a hard time getting through the minified js, even if I reformat it.

If anyone could shed some light on this confusing situation I would be grateful, and if you need any further details please let me know.

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Are you using a Views block and do you have caching enabled for that views block?

Another user I have been working with has a bug where Views cache reorders the stylesheets, that is the problem here - a module is reordering the stylesheets, could be Views if you are have a cached views block anywhere on the page or it could be another module.

phizes’s picture

phizes commented

Thanks for your help.

It's a cached Views block causing the problem. I looked over the Views issue list but I can't seem to find it mentioned, do you have any more information about it available so that I can investigate further and possibly file a report for Views? I haven't looked at Views code yet though.

I'd like to get this resolved if possible, as a site we wish to move to using AT for has 4 - 6 Views blocks per page.

Thanks again, and I am really liking AT.

Jeff Burnz’s picture

Jeff Burnz commented

The issue is here: #1390886: CSS insertion order not respected after views_plugin_cache->restore_headers()

I might have to put in a workaround and release a new version, its a real show-stopper for using Views caching.

phizes’s picture

phizes commented
Status: Active » Postponed

It seems to be fixed in Views 7.x-3.x-dev of 2012-Mar-09 if the order of the stylesheets below is correct:

<style>
...
@import url("http://example.com/drupal/sites/all/modules/ctools/css/ctools.css?m0mczx");
@import url("http://example.com/drupal/sites/all/modules/views_slideshow/views_slideshow.css?m0mczx");</style>
<style>@import url("http://example.com/drupal/sites/all/themes/adaptivetheme/adaptivetheme/css/at.base.css?m0mczx");
@import url("http://example.com/drupal/sites/all/themes/adaptivetheme/adaptivetheme/css/at.layout.css?m0mczx");
@import url("http://example.com/drupal/sites/all/themes/adaptivetheme/adaptivetheme/css/at.messages.css?m0mczx");
@import url("http://example.com/drupal/sites/all/themes/my_theme/css/html-elements.css?m0mczx");</style>
<link type="text/css" rel="stylesheet" href="http://example.com/drupal/sites/default/files/at_css/my_theme.responsive.layout.css?m0mczx" media="all" />
<style>@import url("http://example.com/drupal/sites/all/themes/my_theme/css/forms.css?m0mczx");
@import url("http://example.com/drupal/sites/all/themes/my_theme/css/tables.css?m0mczx");
@import url("http://example.com/drupal/sites/all/themes/my_theme/css/fields.css?m0mczx");
@import url("http://example.com/drupal/sites/all/themes/my_theme/css/page.css?m0mczx");
@import url("http://example.com/drupal/sites/all/themes/my_theme/css/navigation.css?m0mczx");
@import url("http://example.com/drupal/sites/all/themes/my_theme/css/articles.css?m0mczx");
@import url("http://example.com/drupal/sites/all/themes/my_theme/css/comments.css?m0mczx");
@import url("http://example.com/drupal/sites/all/themes/my_theme/css/blocks.css?m0mczx");</style>
<style media="print">@import url("http://example.com/drupal/sites/all/themes/my_theme/css/print.css?m0mczx");</style>

I had the problem, then updated to Views 7.x-3.x dev 2012-Mar-09, and it seems to work, I can't get it to break now no matter what I set the caching to. Seems I am just left with an AT unrelated problem of Views Slideshow not transitioning with block caching.

Marking as postponed as I can't say it is fixed until Views pushes a stable release, if you feel it should be marked as fixed to keep your queue clean, please do so.

phizes’s picture

phizes commented
Status: Postponed » Closed (duplicate)

Closing because it really is a duplicate of #1390886: CSS insertion order not respected after views_plugin_cache->restore_headers()

My work around for the moment:

<?php
function my_theme_css_alter(&$css) {
  $css['public://at_css/my_theme.responsive.layout.css']['weight'] = count($css) / 1000;
}
?>

Not the best, but it lands up in what I think may be the correct ordering on our sites.

hwasem’s picture

hwasem commented
Component: AT Subtheme » CSS/HTML

I'm having this problem, as well. In which file did you put the code you listed above?

Thanks in advance!

hwasem’s picture

hwasem commented
Issue summary: View changes

"this is a bug report or feature request" changed to "this is a bug report or support request"