Strange button rendering problem in IE (broken buttons)

hello vaadiners

It can be a bug riport as well I think

I attach a screenshot to demonstrate the problem

it seems to me that this is an IE only problem (I am using IE8 as my default browser in eclipse), and it only affects vaadin version>6.4.4 (6.4.5-6.4.8)

And I have another question what is this strange warning (in red) in the debug window? ( I think this is an IE only problem as well)

Thanks for your attention and help:)


I’ve seen a lot of similar button issues lately with IE8, and from what I remember, the issue was IE8 running in Compatibility Mode, which is not quite IE7 and not quite IE8 (but Vaadin interprets it as IE7), hence some anomalies. Can you test the same app/view with plain IE8, does it have the same issue?

It usually is what is says: you’re somehow using a theme from Vaadin 6.4.8, but the widgetset is from Vaadin 6.4.7. Might be cache issue, most likely.

I found the same problem in the Eclipse internal browser.
Changing theme to Chamaleon is even wrost.

Again, this is caused by running IE8 in compatibility mode (a.k.a “almost IE7”), while the browser reports it’s version to be 8. Vaadin adds a class “.v-ie8” to the body element, and all themes break because the rendering/box model of the browser is not what the theme expects.

Update: here’s screenshot how I got Chameleon theme messed up (see the Browser Mode and Document Mode settings from the Developer Tools).

There might be someway to fix this, but I’m not sure, and if it’s even necessary, since you can fix this by not forcing IE8 into compatibility mode.

Unfortunately the same problem occurs using vaadin 6.5 :frowning:

Does anybody know is this problem occurs with IE6 OR IE7?

This shouldn’t be affected by the Vaadin version you use, just by the browser settings. If there is a workaround/fix that we can incorporate into Vaadin, please share.

IE6/7 should work without this issue.

It seems like

<meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1"/>

from ApplicationServlet causes the behavier in IE8.
My workaround is to add a XUA Compatible before the writeAjaxPageHtmlHeader-method is called:

page.append("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=7\" />");

This will be interpreted first …

It is okay for our situation, because we create an internal application and we have only IE7 and IE8-Users.

This is really weird. IE8 works perfectly when running application at localhost-address. But when it’s runned at intranet it renders buttons like described.

It seems that by default ie8 has this: “Display all intranet sites in compatibility mode”. (http://localhost is not affected, you can try same behavior by selecting “display all websites in compatibility view”

Can I force IE8 some how to be in full ie8-standars mode?

Vaadin provides whis X-UA-Compatibility meta tag which sets the document mode to ie8 but browser still reports in user-agent string that it is IE7.

What if Vaadin would use document.Document mode to detect version in javascript instead of user-agent string?

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
      engine = document.documentMode;
   else // IE 5-7
      engine = 5; // Assume quirks mode unless proven otherwise.
      if (document.compatMode)
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
   // The engine variable now contains the document compatibility mode.

Would be better, object detection is way more future proof than UA sniffing.

At mean time, we have no option but to force pages to render in ie7 compatible mode although all users have ie8 :frowning:


There was a fix commited yesterday for this issue so that the compatibility flag is only added when IE9 is used. This should resolve the issue. If not, please comment in ticket

Yeah, it “fixes” it. Now it renders using ie7 engine. In our application, all users have ie8 (corporate intranet) so as a web developer I would like that all users would use ie8-rendering engine. That can be set using that x-ua-compatibility tag but then vaadin’s layout calculation will bug because of all those isIE7() invokes in client.

To summarise: Without any x-ua-compatibility meta-information= Browser will be in ie8 compatibility mode and render pages using ie7 engine.
With x-ua-compatibility=ie8. Browser will be in ie8 compatibility mode and render pages using ie8 engine.

When browser mode is IE8 Compatibility that means that user-agent string will contain “ie7 plaa plaa trident” but it will use eiher ie8 or ie7 mode depending on that x-ua-compatibility.

As a feature request, I propose that ie8 should be detected by using that document.documentMode. That way I could force IE8 to use IE8 javascript engine without layout calculation bugs.

As a (belated) follow-up and for information:

We have had a similar problem recently: some buttons are not rendered or are rendered as a short vertical line (I could not figure out a meaningful pattern explaining why some buttons were displayed correctly and others not).

This however only happens with Vaadin 6.7.1 using a Chameleon theme, under IE8 in compatibility mode. Under Vaadin 6.6 with Chameleon, or under Vaadin 6.7.1 with reindeer, buttons are displayed correctly. The problem never appeared under IE6.
(We upgraded from Vaadin 6.6.7 to 6.7.1 so have not tried 6.7.0.)

We solved the problem by overriding AbstractApplicationServer.writeAjaxPageHtmlHeader() and inserting

page.append("<meta http-equiv=\"X-UA-Compatible\" content=\"IE=8\" />");

as per suggestion in an earlier post in this thread (thank you!).

Normand Fortier

We are having similar problems than Normand. Unfortunately, the buttons are not visible on real IE 7 either.

It seems that this definition in Chameleon theme’s “borderless” section is causing the problems:

.v-button {
overflow: hidden;

If you remove it, buttons will appear. As a side effect some buttons will have unwanted borders, but this is more acceptable than disappeared buttons.

The issue with disappearing Chameleon buttons in IE7 has recently been fixed in
and will be included in Vaadin 6.7.3 which is scheduled for release in the beginning of next week.

I tried Vaadin 6.7.3 with Chameleon and IE8 campatibility mode. With normal buttons the problem is solved but with Link button I still have problem with disappearing buttons.
I tried this:

Button link = new Button(“Look at me in IE7 or IE8 in compatibility mode”);


Thank you for the report. The ticket has been reopened and an attempted fix has been committed.