Slider layout broken in IE (<=9)

Thank you for the patch, I've just come across the same problem in iE7. I have applied your patch and so far it works very well and doesn't break anything else. Thank you.

P.S. Hmm i've taken a closer look at my site and in my case the patch seems to be working only with the "Leaves option" enabled. With this option disabled, the expand labels are positioned above checkboxes, not next to checkboxes. I'm getting this bug in IE.

The CSS is essentially broken in various ways for IE7 and IE8 (not sure about other versions).

I managed to hack together some css that fixed IE7 (because our client was using this) but a real hack so will try to fix properly and post details.

I would be interested in any hacks/fixes you've put together for this issue, chris.

Hi!

This is a real problem. Most of all internet users use IE <= 8.

We use this module together with the profile2 module. And use tax fields on the registration page. That looks ugly...

Two major problems:
1. the tax-terms aren't not in the same line like the checkbox (or line break)
2. if we expand a tax-term to overlays with the content

Attached there is a screenshot.

Wr
paulap

If you need help we can support. We can test it...

Man, I hate IE.

I don't remember exactly why I used an inline block for the div. My fear if I take it out at this point, even if it doesn't affect my own site, is that it might break things for someone else.

I think the best bet would be to make some conditional CSS files (one for IE7, one for IE8) that override those particular attributes only when the browser in question is being used. Trying to make the same stylesheet work on real browsers *and* IE always leads to a big mess.

Apologies for the late reply, I am probably going to have a go at a proper fix over the Christmas break will post anything useful back then.

Here's the patch I developed off the 7.x-2.x branch. Version for 1.x branch coming shortly.

And here's a version of that same patch for the current 7.x-1.6 release, which is actually the 7.x-1.3-dev branch in git. What a mess.

The patch as submitted breaks the existing layout in Firefox (and presumably other browsers as well). I've added a small CSS hack to 'fake' inline blocks in IE7 and 8, and it seems to work.

Hi,

Sorry to be the bearer of bad news, but this still seems to be an issue in IE8 on Windows XP (latest version, 8.0.6001.18702), which is unfortunately still very widely used.

Anyone have any ideas?

I've managed to get a test environment running for this combination. Microsoft offer a Virtual PC image of WinXP, with IE6 installed and desktop shortcuts for installing IE7 and IE8.

In testing I've found that resizing the window fixes the issue temporarily, however as soon as you cascade the open tree, it leaves the whitespace below it. If you resize the window again, the element below jumps up to fill the white space. The window only needs to resized by a single pixel.

The reference tree works correctly with IE8's browser mode set to IE7 Standards or IE8 Compatibility View modes. In both cases this sets the document mode to IE7 Standards. These settings can be changed by accessing IEs developer tools with F12, and then selecting browser mode on the far right of the toolbar.

I had to solve this for a client but was completely unable to duplicate it. So I created a completely overkill solution based the clearfix style (since I had no idea what was causing it I applied it to each level of the HTML), and apparently this works:

/* Overkill attempt to solve the IE8 problem */

.field-widget-term-reference-tree:after,
.field-widget-term-reference-tree .form-type-checkbox-tree:after,
.field-widget-term-reference-tree .form-type-checkbox-tree .term-reference-tree:after,
.field-widget-term-reference-tree .form-type-checkbox-tree .term-reference-tree .term-reference-tree-level:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size:0;
}

Good luck.

Works for me.

The patch at the top of the thread basically works, however I simply added the following as a CSS override:

.field-widget-term-reference-tree > .form-item {
	display: block;
}

One of the concerns noted in the patch is changing the inline-block display, and that this change may have unknown issues, so I just added a child selector to limit the scope of the selector to target only the wrapper .form-item and not the .form-item elements inside the tree.

Let's please add some inline documentation to the CSS in #19 explaining why and what versions of IE should be affected.

Submitting a new patch

Fix the previous patch #22 which the test has failed.

This is mistake?

-  *display: inline;
+  display: inline\9;

These styles are for IE 9 only.
I've recreated the patch