If I go to create a new zen subtheme, click "more options", and then enable :

  • Layout: Liquid
  • Override sidebar and page widths and placement
  • Sidebars on their respective sides (left, main, right)

as well as set "Second sidebar width" to be 300, when the theme is generated, the settings in sidebars.css have picked up my preferences for the 300px, second sidebar. And when I look at the resulting web page in Firefox, Chrome or Opera, it looks great -- just like I wanted it to look. However when I look at the page with Internet Explorer, the flash object that I had in the 300px, second sidebar is too big and sticks out past the right margin. In addition, both sidebars are the same width and apparently 200px. My first reaction was, "Stupid IE...", but on looking into it further, it seems to be a bug in zenophile.

I had looked at the sidebars.css, and all was cool. But when I looked at layout-liquid.css, all the settings were as though both sidebars were 200px. After hand editing layout-liquid.css to make that second sidebar 300px, the web page finally looked right in IE, and still looked right in the other browsers, too.

Comments

Garrett Albright’s picture

Garrett Albright CreditAttribution: Garrett Albright commented

Which IE are you using?

I just made a liquid theme with 300px borders and checked it out in IE 7, the only IE I have available to me at the moment… there were issues, though not exactly the ones you're describing.

debplatt’s picture

debplatt CreditAttribution: debplatt commented

I was checking it with IE8, both 32 and 64bit. However regardless of IE version, a comment inside the layout-liquid.css says the that padding-right is supposed to be the width (not really relevant) plus the right margin specified in region-sidebar-second. In my case, region-sidebar-second was 300px, but in layout-liquid.css, the padding-right was 200px.

As to your other IE issues, I am something of a n00b, so you probably already know what I just found out recently. But I'll mention it anyway. IE only lets you use a finite number of CSS files (see http://john.albin.net/css/ie-stylesheets-not-loading). Almost all of my customizations were located in fresh.css, but this was one of the stylesheets beyond the 30 stylesheet limit, so it was having no impact on the rendering of my site under IE. To get around this I went to Performance (admin/settings/performance) and configured it so that the CSS was optimized. This collapses all the stylesheets together, so the 30 stylesheet limit is no longer an issue for me on IE.

Garrett Albright’s picture

Garrett Albright CreditAttribution: Garrett Albright commented

IE 8 still has the 30 stylesheet limit problem? Jeez… Anyway, just to be clear, are you saying the problem went away after turning on CSS optimization?

debplatt’s picture

debplatt CreditAttribution: debplatt commented

Sorry for the long delay in getting back to you. No, I only mentioned CSS optimization because you mentioned that you were having other IE isssues, so I thought that your other IE issues might be related to IE limiting the number of stylesheets it would use.

Getting back to the width of the sidebar, CSS optimization does not help with this on IE. IE was rendering the sidebar to be the default 200px, even though in sidebar.css the width was set to 300px. I had to hand edit layout-liquid.css to set the sidebar width to be 300px as well. Then the width in layout-liquid.css agreed with the width set in sidebar.css. With this hand edit, the IE rendering expanded from 200px to 300px as desired.