CSS inheritance issue in IE breaks Zen themes
| Project: | YUI Rich Text Editor |
| Version: | 5.x-2.6-96 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
What the problem is:
First, this only occurs in Internet Explorer (we're using IE7).
We have a multisite, with themes based on zen classic. So there are two sub-themes of zen: parent_site and sub_site. We've also adapted the color module to function with both, so when there are multiple subsites, they can each define their own colors.
The problem arises when the YUI editor calls a bunch of CSS and JS on pages that don't need it. Basically what occurs is that some of our stylesheets aren't being used and the page's structure breaks. The stylesheets in question are zen-classic.css, layout-garland.css, icons.css and html-elements.css (all within the sub-themes). So, I combined the styles from those 4 all into one layout.css and edited my template.php so it was the first sub-theme stylesheet that was called. This seemed to be a temporary fix until we noticed it still happened on some pages (two of which were admin/build/themes/settings/parent_site, admin/build/themes/settings/sub_site).
Also, these breaks in structure/style occur differently with the parent and subsites. On those example pages, the parent site (example.com) is able to display all styles except the new ones created by the color module (colors and images). On the subsite (sub.example.com), it will not load our layout.css stylesheet either, breaking the entire structure of the page.
When we disabled the YUI Editor module, our styles worked correctly, with the new colors and all. However, we want YUI editor, so disabling it isn't a solution. We grabbed the YUI library 2.6.0 and used it locally, but then it wouldn't show in forms, so we grabbed 2.5.0. In sites/all/modules/yui_editor, we checked out yui_editor.module and noticed in the function yui_editor_form_alter() that it uses yui_add_css() and yui_add_js(). We changed these to drupal_add_css() and drupal_add_js() and it solved our problem. So we tried even more specifically and discovered that the problem lies within the library at /build/assets/skins/sam/menu.css and /build/button/assets/skins/sam/button.css
The solution (temporarily):
In yui_editor.module, change
yui_add_css('editor', $yui_source, '/build/menu/assets/skins/sam/menu.css');
yui_add_css('editor', $yui_source, '/build/button/assets/skins/sam/button.css');to
drupal_add_css('editor', $yui_source, '/build/menu/assets/skins/sam/menu.css');
drupal_add_css('editor', $yui_source, '/build/button/assets/skins/sam/button.css');This will place these two stylesheets lower in the HTML output and won't mess with the styles we defined in the two themes.
But why does this solve it? Are there styles in menu.css and button.css that conflict with ours? I've glanced through these two stylesheets and all styles begin with a yui class, so they shouldn't conflict with any of mine.
Has anyone come across this? Why does Internet Explorer have a problem with the order of these stylesheets? Permanent solutions or explanation?
#1
New information:
Looks like more stylesheets are affecting the subsite compared to the parent site.
The subsite (sub.example.com), also needs the following changed to work correctly:
yui_add_css('editor', $yui_source, '/build/fonts/fonts-min.css');yui_add_css('editor', $yui_source, '/build/container/assets/skins/sam/container.css');
to
drupal_add_css('editor', $yui_source, '/build/fonts/fonts-min.css');drupal_add_css('editor', $yui_source, '/build/container/assets/skins/sam/container.css');
If I alter just menu.css and button.css as explained before, it fixes the layout on the subsite, and makes the colors work for the parent. In order to make the colors work for subsite as well, the three just mentioned need to be altered.
#2
So we have about 4 sites now that have this problem, all based on the Zen theme and subtheming. It only happens in Internet Explorer, and seems to only break with Zen, Zen-classic or any subthemes.
Making the previously stated changes only works sometimes. Other times, we seem to have a problem arise where there's a lot of whitespace below the footer, and overflow-y: hidden; doesn't seem to fit it.
We're beginning to think it's a Javascript problem because still, on sites that seems to work, external javascript apps like firebug lite in IE, break. We've tried recreating the situation from scratch, starting with just Zen and the YUI editor, no problems. Then we incorporated a subtheme directly from a site where it breaks.. and it doesn't in this new test. Extreme confusion sets in.
Basically, we're getting tired of hacking here and there and not getting definite results, so any help would be great.
#3
Have you tried in ie6??, probably the problem arais in the same way.
I think the trouble is in the css file number you load.
ie has a limit for the css files that can parse (maybe 32), so in some pages you exceed this number and in others you are under this number, try to reduce the css files you load.
#4
Got the same problem here. IE7 looses stylesheets. Seems like some kind of problem with js not doing the correct css injection.
#5
Nachete looks to be right. When I enabled CSS file aggregation (and compression) the number of CSS files in the HTML sent to the browser went from over 30 to around 24. At that point my Zen-based sub-theme started to work in IE7 with the YUI Editor enabled. No hacking of the yui_editor.module was required.
1. Go to Admin -> Site configuration -> Performance
2. Optimize CSS files: [X] Enabled
3. Save Configuration
4. And the people rejoice.
Cheers,
Alex Matan
#6
Sweet! Many thanks. I was having this problem with the Tapestry theme + YUI Editor on IE7 and Optimize CSS fixed that as well.
#7
fyi - this is not just an IE issue - my zen subtheme is broken in ff3 after enabling YUI editor.
I will post a solution back here if i find one