Same code, different browsers, looks very strange

[tdk]

Folks'es,

I have a very strange problem of browser dependency! The exact same code creates absolutely weird results, depending on the browser I use to view my app:
1. IE 8 ist ok
2. Firefox 3.6.3 is ok
3. Chrome 4.1.249.1045 not ok
4. Opera 10.51 not ok
5. Safari 4.0.5 not ok

see the appr. attachments.

Everything runs on the same platform (Vista x64) against the same application, built withd GWT 2.0.3 and SmartGWT 2.1.

Following are the snippets of code, that draw the part in question:

    public void onModuleLoad() {
        panel = new VLayout();
        panel.setSize("100%", "100%");
        panel.addMember(topPanel());
        panel.draw();
        :
    }
    private HLayout topPanel() {
        Img icsLogo = new Img("logoDotted.png");
        icsLogo.setWidth(175);
        icsLogo.setHeight(70);

        userLabel = new Label();
        userLabel.setContents("<i>CONTINUITY</i> user: ");
        userLabel.setStyleName("icsUserPanel");
        userLabel.setHeight(20);
        userLabel.setWrap(false);
        userLabel.setIcon("person.png");
        userLabel.setExtraSpace(20);

        IButton logoutButton = new IButton("Log out");
        logoutButton.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {
            @Override
            public void onClick(com.smartgwt.client.widgets.events.ClickEvent event) {
                mainLayout.hide();
                mainLayout.markForDestroy();
                loginService.logout(new AsyncCallback<Void>() {
                    @Override
                    public void onFailure(Throwable t) { SC.say(constants.fatal() + ": " + t); }
                    @Override
                    public void onSuccess(Void v) { login.manualLogin(false); }
                });
            }
        });

        HLayout userInfo = new HLayout();
        userInfo.setStyleName("icsUserPanel");
        userInfo.setLayoutAlign(VerticalAlignment.CENTER);
        userInfo.setAutoHeight();
        userInfo.addMember(userLabel);
        userInfo.addMember(logoutButton);

        VLayout selections = new VLayout();
        selections.setAutoHeight();
        selections.setAutoWidth();
        selections.addMember(languageSelector);
        selections.addMember(new SkinSelector());

        HLayout hLayout = new HLayout();
        hLayout.setLayoutAlign(VerticalAlignment.CENTER);
        hLayout.setWidth100();
        hLayout.setHeight(80);
        hLayout.setStyleName("icsPanel");

        hLayout.addMember(icsLogo);
        hLayout.addMember(new Layout());
        hLayout.addMember(userInfo);
        hLayout.addMember(new Layout());
        hLayout.addMember(selections);
        return hLayout;
    }

[svjard]

Well the smartgwt code your using is just setting layouts, your injecting your own CSS, so I would verify the CSS your using is cross-compatible.

[tdk]

My CSS file is actually quite simple:

.icsPanel {
    background: grey url(images/gradientBackground.png) repeat-x;
    padding: 5px;
}
.icsUserPanel {
    background: lightgrey;
    padding: 5px;
    font-weight: bold;
    font-size: 11px;
}

Is there anything not cross-compatible?
How would I find out, whichstyles are compatible and which aren't?

[barsum]

Check your xml that you didn't include GWT styling.

[tdk]

I don't quite understand what you mean.
I include SmartGWT skins/styles and let the user select one.

I just want some panel(s) to have my own style.

[tdk]

Hello, anybody any ideas? Thanx

[svjard]

First off check your xml config file, make sure you don't have anything like
<inherits name="com.google.gwt.user.theme.standard.Standard"/>

[tdk]

I don't. Here is my gwt.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module rename-to='reporter'>
    <inherits name="com.google.gwt.user.User"/>
    <inherits name="com.google.gwt.core.Core"/>
    <inherits name="com.google.gwt.user.History"/>

    <inherits name="com.smartgwt.SmartGwtNoScript"/>
    <inherits name="com.smartgwt.tools.SmartGwtTools"/>
    <inherits name="com.smartclient.theme.enterprise.EnterpriseResources"/>
    <inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlueResources"/>
    <inherits name="com.smartclient.theme.graphite.GraphiteResources"/>
    <inherits name="de.ics.continuity.web.reporter.Shared"/>

    <entry-point class="de.ics.continuity.web.reporter.client.Main"/>
    <extend-property name="locale" values="de"/>
</module>

[sergez]

May I also to add something to the thread?

I have the similar problem for Chrome browser, but I don't use any custom styles only standard CSS styles which go together with Enterprise skin.

For the following code snippet:

isc.HLayout.create({
					ID: "SearchPanel_StatusPanel",
					width: 380,
					height: 20,
					isGroup: true,
					groupTitle: "Status",
					layoutTopMargin: 8
				}),
isc.VLayout.create({
					ID: "SearchPanel_RectSearch",
					width: 380,
					height: 30,
					isGroup: true,
					groupTitle: "Rectangle Search",
					layoutTopMargin: 8,
					members: [
						isc.DynamicForm.create({
							ID: "SearchPanel_RectSearch_Form",
							fields: [
								{	name: "rectSearch",
									title: "Rectangle search",
									type: "checkbox"
								}
							]
						}),

For IE and FF browsers that looks fine but not for the Chrome 4.1.249.1030
Find please the screen shots attached

[tdk]

sergez,

I'm afraid I can't tell you what's wrong here.

BUT the problem went away for me after I changed setting the background via style sheet to setting it directly via canvas.setBackgroundImage() (see OP).

[KevinC]

sergez,

Did you figure out what the cause of the issue? I have same issue in Chrome with isGroup=true. This is on Smartclient LGPL 8.3_2013-02-11.