First, I want to say that I have been singing the praises of Arrange Fields everywhere I go. I've given it a big thumbs up on IRC and in the support forum. Now on to my issue:

I when I look at the form on any Microsoft Internet Explorer browser, I see the fields "squished" horizontally. I have enclosed some screenshots below to illustrate this. It totally breaks the beautiful layout. #2 below shows how it displays on most browsers. #3 and #4 show the IE form display.

Here are some things I've tried:
• Thinking it was a CSS issue I enabled css optimization. I realize now that the form widths are in the module. So this had no effect.
• I disabled the "Compact Fields" module but that had no effect.

I am using the Aquia Slate theme. Could it be a theming issue? I guess that's my next troubleshooting step.

Any other ideas as to what might cause this?

Thanks!

Jerry

CommentFileSizeAuthor
04form-in-ie-8.png18.36 KBmcfilms
Screen shot 2011-01-17 at 7.05.47 PM.png13.97 KBmcfilms
02form-with-arrange-fields.jpg40.92 KBmcfilms
01default-form.jpg29.13 KBmcfilms

Comments

richardp’s picture

richardp commented

Wow, those are really squished!

Yes, I would assume this is a theming issue. Of course, whenever our old friend IE is involved, it can be hard to diagnose.

The first thing that comes to mind is the IE CSS bug, where it can only load 31 stylesheets. I have heard that modules like unlimited_css can fix this problem, if indeed that is the problem.

Does it work when you switch to a basic theme, like Garland?

Richard

mcfilms’s picture

mcfilms commented
Status: Closed (cannot reproduce) » Active

Yes.

It works in Garland, Minnelli, Zen and I imagine a host of other themes.

I chose to override Acquia Slate because the site had a black with light letter design and I thought it would make my life "easier." Hmpfff.

So I guess I need to figure out how to remove any overrides that theme is doing that, uhhh, superceed what the arrange fields module does? I just can't see it. Firebug shows me:

#webform-client-form-10 #edit-first-name-draggable-wrapper input.form-text, #webform-client-form-10 #edit-first-name-draggable-wrapper input.form-textarea {
    height: 15px;
    width: 203px;
}

And the page source in IE shows that the same field width is in the HTML. So how (or why) would all versions of IE choose to ignore this?

richardp’s picture

richardp commented

Well, if it is indeed the IE 31 stylesheet limit, that is just a fun thing that IE chooses to do. Somewhere is chose to just not load one of your (or some other module's) stylesheet. Microsoft has even written about it: http://support.microsoft.com/kb/262161. Basically, they are fine with @import'ed stylesheets, but you can only have 31 <link>'d stylesheets.

As I said in another post, the unlimited_css module (http://drupal.org/project/unlimited_css) might work, as might a similar module, the IE CSS Optimizer (http://drupal.org/project/ie_css_optimizer). They work partially by converting the <link> tags to @import's, which hurts performance a little bit but perhaps not so much that it would really affect you.

If you do try one of those, and it works, please let me know so I can tell others that it definitely will solve that problem. As it stands, I have never tested either module.

richardp’s picture

richardp commented

... as for why IE would ignore some styles but keep others, or place such an arbitrary limit on link'ed stylesheets, or just behave weird in general... I don't think anyone can say for sure. I sometimes wonder what it must be like to be a programmer at Microsoft, and realize this weird problem is there, but then either be unwilling or unable to fix it. So strange.

I mean, despite how most people out there feel, I think Microsoft really does put out useful and friendly software. I just can't fathom why they release some software with all these obvious problems and then go years without fixing them.

Oh well-- off topic ;)

Richard

mcfilms’s picture

mcfilms commented

Thanks for replying Richard. I THOUGHT it might be a CSS issue so I enabled Drupal's "Optimize css files. I think this mashes all the external css into one big file. I really don't think it is a css issue.

But you know what? I'm going to try your suggestion anyway. I was about disable Arrange Fields and start manually theming the layout (which is already approved in Firefox). If it works I'll jump for joy. But either way I'll report back here.

mcfilms’s picture

mcfilms commented

Nope.

I tried IE Unlimited CSS Loader (only because it had a couple thousand more users). It had no effect.

The weird thing is, I can SEE the field widths are in the HTML source for the page. It's just that IE isn't rendering them. Almost like something containing the fields is forcing them to collapse.

Unless someone has a sudden brainstorm, I guess I'm going to have to layout the fields manually.

richardp’s picture

richardp commented
Status: Active » Closed (cannot reproduce)

Well, I'm sorry you couldn't get it to work. If it makes it faster, Arrange Fields places a style tag (as markup) in the middle of your form. If you use firebug you can find it. You may find copying and pasting from there into a CSS file will save you some time, if you have to lay it out yourself in CSS anyway.

Richard

lafutura’s picture

lafutura commented

I had the same problem with alignment, labels and fields getting squished and overlapping. I found that all I needed to do was set the wrapper width in pixels to whatever I wanted it to be and everything worked perfectly. Thought it was worth trying for those of you who might not have thought of this.

mcfilms’s picture

mcfilms commented
Status: Active » Closed (cannot reproduce)

Well it appears the creator of Slate is saying it is related to the modules reliance on jQuery. See http://drupal.org/node/1034140#comment-4414468

richardp’s picture

richardp commented

How odd. AF doesn't do any field-resizing with jQuery, but instead uses CSS to set widths. Of course, it does add a "draggable" property to textfields, which is part of jQuery UI, not jQuery. I'm afraid I am somewhat out of my depth, though, when it comes to debugging problems or issues within jQuery itself.

I wonder if other jQuery UI-heavy modules would work with this theme, or is AF the only one?

Either way, I'm sorry it didn't work out for you. I suppose if you were *really* dedicated, you could create your own version of the theme which removes all of its included javascript ;)

Thanks for reporting back,
Richard