oversize content causes IE6 layout breakage

The default overflow for <div>s is overflow: visible;. Unfortunately, IE6 doesn’t implement the default or even the ability to do overflow: visible;. See http://www.howtocreate.co.uk/wrongWithIE/?chapter=overflow%3Avisible%3B

There are two work-arounds:

1. Re-design your theme to give the sidebars more width.
2. Use this IE6-specific declaration on the sidebars: _overflow: hidden; _overflow-y: visible;. This will allow the sidebar to stretch vertically, but not horizontally. And it cuts off any extra-long content. It’s not a great solution, but it’s the only one I know of.

I love Holly n' John. It looks like word-wrap: break-word; (which is in the CSS3 spec) might be a good supplement to work-around #2.

Apparently, oversized content in the squeeze div (main content area) still causes layout breakage in IE6. It is fixed in the sidebars.

I keep having this problem too with Zen on IE6. Just tested with IE5 for fun, and Zen fails miserably on that version across the board. The problem is always that the main content is pushed underneath the left side bar. I don't have a right side bar.

Longing for a table solution, rather than divs, which are simply unreliable on older browsers. Zen would be absolutely stable, reliable, nice, and beautiful in a table. I know, I know ...

Is there really no way to make Zen stable on all, particularly on older platforms? I consider this a big problem.

Hans-Georg

Applied the proposed solution to 5.x-1.x-dev.

In IE7 and other modern browsers, wide content now flows past the edge of the containing div without breaking the columns.

In IE6, wide content is cut-off at the edge of the containing div. This is the only known work-around, as far as I know (without reverting to a table-based layout; egads!) So in IE6, we choose from the lesser of two evils: break the layout or cut-off the wide content.

Hans-Georg, regarding IE5, please see: http://drupal.org/node/196223

Thanks for the link. Just for fun I tested the current Zen theme, slightly modified, on Internet Explorer 5.0. It doesn't work at all, doesn't display the left sidebar, for example, and only part of the content.

Then I looked at the access statistics and found that IE 5.0, intermediate versions, and IE 5.5 constitute only a tiny proportion of the user base on my web sites, less than 1%.

I think it is time to abandon support for Internet Explorer versions before 6. Can't support everything.

I would like it, if Drupal could somehow discover such old versions, as well as limited devices like handhelds, and fall back to an idiot-proof theme that always works, but it may not be worth the trouble.

Hans-Georg

This has not been fixed in Zen Classic.

The bug is in the layout method used in Zen Classic. It uses the same method as Garland.

However, I looked at Garland and it does not experience this bug. So I looked at Garland’s CSS and found the fix.

  #page #container #main
  {
    /* Reduce amount of damage done by extremely wide content */
    _overflow: hidden;
  }

Fixed! Finally!

zen/layout.css already contains the following block:

/* Ensure long text or wide images don't break IE6 layout. */
#page, #header, #footer, #squeeze, #container .sidebar {
  _overflow: hidden;
  _overflow-y: visible;
  word-wrap: break-word; /* A very nice CSS3 property */
}

How about adding #main? Thus:

/* Ensure long text or wide images don't break IE6 layout. */
#page, #header, #footer, #squeeze, #container .sidebar, #main {
  _overflow: hidden;
  _overflow-y: visible;
  word-wrap: break-word; /* A very nice CSS3 property */
}

By the way, #page #container #main seems to be nonsense. #main alone is enough. The id attribute has to have a unique value anyway, so there can be no other #main.

I always get the shivers when I see something like that, because the suspicion arises that somebody doesn't know what he's doing. I hope I'm mistaken. Or should it have been: #page, #container, #main with commas in between? I couldn't find #main in the Garland CSS files as of Drupal 5.6.

Hans-Georg

From Garland’s fix-ie.css:

#wrapper #container #center {
  /* Reduce amount of damage done by extremely wide content */
  overflow: hidden;
}

I translated that directly to the div names used in Zen. But you are correct that #main works just as well, so I've made that change.

However, I can't add #main to the rule you mentioned because there is no #main div in Zen. Only in Zen Classic. So I'm keeping it in zen_classic/ie.css.

However, I can't add #main to the rule you mentioned because there is no #main div in Zen. Only in Zen Classic. So I'm keeping it in zen_classic/ie.css.

Sorry, my mistake. I'm still using an older version of Zen, I think, 0.7. (Big upgrade of everything including Drupal 6 and Zen planned for April.)

I'm not an expert on cross-browser programming, so I don't know what the leading underscore means (overflow versus _overflow). I only notice that your last code sample doesn't have it and hope it works as expected.

Hans-Georg (http://winhlp.com/, http://elephanttrust.org/ and others)

Regarding the underscore before the CSS property name, take a look at the comments in the ie.css file in the latest Zen.

Ah, thanks!