Form looks weird in IE 7

[xren]

my form looks nice in firefox and Chrome. It is also not bad in IE-8. But the layout rendered not nicely in IE 7. What is the reason? Can this be fixed?

e.g.
- some backgound image will not stick together with the text.
- layout or item distance not right in a fixed size and scrollable panel.


Thanks for any suggestion.

[Wai]

Hi Xiaoli,

Older versions of IE in particular can be difficult when it comes to layout and positioning.

Please can you export your form and send that to us along with any external files such as CSS, images, js that is required to run the form.

Thanks

[xren]

Hi Wai,

I sent you the two forms that have problems when rendering in IE.
REHAB_PT_CHART: layout problem in IE 8 with the fix-size panel - the items appears too far from each other.
REHAB_REFERRAL: the auto complete works fine in Chrome and firefox but not in IE8, the buttons which trigger back-end scripts react very slow.

Thanks,
Xiaoli

[Wai]

Can you also send me the folder containing your images?

Also, can I replicate your issues with any data?

[Wai]

Hi Xiaoli,

I'm not going to be able to resolve your autocomplete issue easily without having the web service/js/data. If you can first check if there are any client-side JavaScript errors.

If you run your form in Chrome, right-click on the page, and select 'Inspect Element', click on 'Console'. It will show you any client-side errors.

In terms of the layout issues, please be more specific. What panel on the page are we looking at, and is the problem still there is there is no content?

Thanks

[Wai]

Please also send me your CSS and JS libraries.

[Wai]

There are various posts regarding JQuery autocomplete and IE 8.

For example:

http://forum.jquery.com/topic/autocomplete-error-in-ie8

http://stackoverflow.com/questions/7820 ... -recovered

http://stackoverflow.com/questions/2823 ... ge-refresh

[xren]

Hi Wai,

The panel has problem is panel 21. It is the same no matter there are referrals or letters under each sub panel or not. The Forms and Letters show far apart they should be.

The Upload Image button behave strange as well. The yellow background just detaches from the text and show much below the correct position.

Xiaoli

[Wai]

Hi Xiaoli,

Although I can't replicate your form exactly as I do not have any data, I think I can see what you are referring to with the layout.

I tried resetting a few things to debug the problem. Can you try changing the Layout type on your repeater control from Vertical Box. Just remove the layout type for the time being and re-check it in IE 7.

Please let me know the results.

[Wai]

Forget the last post.

The problem is caused by the 40 em height on the Panel11 control.

You can keep this but then you need to do the following:

- Make the panel PANEL11 a vertical box layout type

- In Layout Properties, make it's vertical alignment: Top

Should fix it. Let me know if it does.

[xren]

It works now!!
Thank you very much.

What is the reason? What should I pay attention to next time?

[Wai]

Unfortunately browsers behave differently when it comes to CSS, and different versions of IE in particular, especially when working with heights.

Because you set a height on the panel, the default behaviour in IE 7 seems to put the content in the middle of the container rather than align it to the top.

We can only suggest that while developing the layout of your form, that you test it in different browsers as you do it.